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';
----------------------------
- 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,
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
Payload pattern,
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 => {});
That's all, on submit you should see the submitted answer on the results screen.
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>