To connect Gatsby with Typeform, we will be using our Gatsby webhooks.
A webhook is simply a URL to send your form submissions to so that they end up in your Gatsby account - so all we really need to do below is map the correct fields so Gatsby knows which answers are for email, Instagram and TikTok.
Step 1: Create your Typeform
To match this guide exactly, make your first question set to type "email" and second question (for Instagram handle) set to type "short_text".
If you have additional questions after that's fine, and if you have additional questions before these two, that's also okay but it will slightly change one of the following steps which I will call out below.
Step 2: Create & Map your Gatsby Webhook
Log into your Gatsby account >> Integrations >> Scroll down to Webhook and click "View Webhook"
You will see something like the below:
Under Email Address, map the following field ID exactly:
Under Instagram Username, map the following field ID exactly:
Press "Save" and press the Launch Campaign or Update Campaign button in the header.
The number corresponds to which number question it is in your form. So the first question is  and the second question is  etc.
And the .email or .text is the question type.
If the order of your questions in the form change, or if the question types change, then you will need to change the Field Ids accordingly, or it will break.
For example, if your Instagram Username question is actually the 5th question in your form, then you will need to make it form_response.answers.text
Step 3: Paste your Webhook URL in Typeform
Back in your Typeform, click "Connect" on the top of the page
And then click "Webhooks" and "Add a Webhook"
Paste your long Webhook URL from Gatsby into the field and then make sure you turn it on.
That's it. Now just test your form and make sure you email address and instagram handle pass to your Gatsby account. Let us know if you have any questions!Did this answer your question?