How to use BlockSurvey as headless forms?

What are headless forms? 

Usually, form tools allow you to create visually without needing to know how to code. But it comes with a drawback. You cannot make it flexible as you want. 

If you are building a website and you literally want the forms to be closest to your brand, then you have to code it for cohesiveness. This is where headless forms help. 

Without worrying about the backend of the data collection involved, you can build a front end of your choice and push the data to the headless form provider. 

Today, BlockSurvey can be used as a headless form too. 

We use it to collect subscriptions on our blogs. Sample screenshot below. Blog link: https://blocksurvey.io/features/secure-surveys

You can build similar widgets of your choice. Here is a simple tutorial on how to do it. 

How to use BlockSurvey as a headless form?

npm install blockstack  <br><br>import { encryptContent } from 'blockstack';

1. Get storage address
2. Get survey id
3. Get public key
4. Get question id's for 
5. Form payload
6. Encrypt using BlockStack
7. Send encrypted payload to BlockSurvey

1 & 2: Get storage address and survey id

Get published survey URL from share screen, it contains storage address and survey id. So we can take it from the URL.
The URL pattern is,
https://blocksurvey.io/survey/storageAddress/surveyId

e.g., https://blocksurvey.io/survey/1BvVyNGkxP22vDBF6qy8dkm38TMEPraz7q/e0b2c5df-86be-4193-bdfd-fa10ed53a7dc

Here the storage address is: 1BvVyNGkxP22vDBF6qy8dkm38TMEPraz7q

Survey id is:  e0b2c5df-86be-4193-bdfd-fa10ed53a7d

let storageAddress = "1BvVyNGkxP22vDBF6qy8dkm38TMEPraz7q";

let surveyId = "e0b2c5df-86be-4193-bdfd-fa10ed53a7dc";

3. Get the public key

Get the public key of Survey creator by using the below URL, 

https://gaia.blockstack.org/hub/storageAddress/blocksurvey_public_key.json

let publicKey = "04206186f20517ad6cfd38f247e8ae0b662c0058973697d9632abeacb9324d4dff999d6a0d05b6b45ac";

4. Get question id

let questionId = "7b172ebd-54eb-4b40-955e-75b9ec53897d";

This is available from the question reference. Sample screenshot below. 

5. Form the payload

let answer = { 
"<questionId>": "[email protected]" 
};

let answer = {"7b172ebd-54eb-4b40-955e-75b9ec53897d": "[email protected]"};

6. Encrypt answers using Blockstack.

Now we have to encrypt the answer with the Survey creator's public key using BlockStack. Code is

let encryptedAnswer = JSON.parse(encryptContent(JSON.stringify(<answer>), {publicKey:"<publicKey>"}));

let encryptedAnswer = JSON.parse(encryptContent(JSON.stringify(answer), {publicKey:"04206186f20517ad6cfd38f247e8ae0b662c0058973697d9632abeacb9324d4dff999d6a0d05b6b45acff6c22fd05ad8b17483476d92ab4e82621bf37d6f0c3239"}));

7. Send encrypted answer to BlockSurvey, so it will collect it as an answer and show it on the results screen

let finalPayload = {
    "qid": "<surveyId>",
    "ans": < encryptedAnswer >
};
restService.post('https://blocksurvey.io/api/blocksurvey/answer', finalPayload).subscribe(data => {});

let finalPayload = {
    "qid": "e0b2c5df-86be-4193-bdfd-fa10ed53a7dc",
    "ans": encryptedAnswer
};
this.restService.post('https://blocksurvey.io/api/blocksurvey/answer', finalPayload).subscribe(data => {});

import { encryptContent } from 'blockstack';

// Form payload with questionId and answer tex
let answer = { 
	"7b172ebd-54eb-4b40-955e-75b9ec53897d": "[email protected]"
};

// Encrypt with Survey creator's public key using BlockStack
let encryptedAnswer = JSON.parse(encryptContent(JSON.stringify(answer),
{publicKey:"04206186f20517ad6cfd38f247e8ae0b662c0058973697d9632abeacb9324d4dff999d6a0d05b6b45acff6c22fd05ad8b17483476d92ab4e82621bf37d6f0c3239"}));

// Send encrypted payload to BlockSurvey
let finalPayload = {
	"qid": "e0b2c5df-86be-4193-bdfd-fa10ed53a7dc", 
	"ans": encryptedAnswer
};
restService.post('https://blocksurvey.io/api/blocksurvey/answer', finalPayload).subscribe(data => {});
<br>