To connect Gatsby with Typeform, we will be using our Gatsby webhooks. Which is just a URL to send your Form submissions to so that they end up in your Gatsby account - and mapping the correct Field IDs so Gatsby knows which answers are for email address and Instagram handle. Gatsby will only receive email address and Instagram handle.

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:

form_response.answers[0].email

Under Instagram Username, map the following field ID exactly:

form_response.answers[1].text

Press "Save" and press the Launch Campaign or Update Campaign button in the header.

Important context:

The number corresponds to which number question it is in your form. So the first question is [0] and the second question is [1] 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[4].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?