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?

Pre requirement: We need BlockStack dependency to be installed for encryption and import to your file. Blockstack is the blockchain BlockSurvey uses today.

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

Steps to implement:
----------------------------

Get storage address
Get survey id
Get public key
Get question id's for
Form payload
Encrypt using BlockStack
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,

you need to replace your storageAddress in the below URL

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

e.g., https://gaia.blockstack.org/hub/ 1BvVyNGkxP22vDBF6qy8dkm38TMEPraz7q/blocksurvey_public_key.json

You will get the public key of the survey creator as below and assign it to a variable

let publicKey = "04206186f20517ad6cfd38f247e8ae0b662c0058973697d9632abeacb9324d4dff999d6a0d05b6b45ac";

4. Get question id

Get all question id's to populate the answer,

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

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

5. Form the payload

Let us construct the payload to submit the form/survey,
Payload pattern,

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

e.g.,

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>"}));

e.g.,

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 => {});

e.g.,

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

That's all, on submit you should see the submitted answer on the results screen.

All the best to set up your own head-less form to collect answers on Blocksurvey.

Full code for your reference,

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>