How to create a contact form with FlowFrames and collect data in Airtable.
In under 5 minutes and without writing a single line of code
--
I love Airtable. It is a great tool for data manipulation and storing (amongst other things) and has plenty of super neat integrations. Moreover, I love the simplicity when it comes to importing or collecting data from various sources, one of them being the use of Webhooks.
I’ll skip the reasons why using FlowFrames is great for quickly building a lot of simple — hosted on a shortened URL - pages and go straight to the tutorial:
To get started, you obviously need a FlowFrames and an Airtable account. You can go with the free plan on both services to achieve the result of this tutorial.
- Once logged in to your Airtable workspace, head to your table and set up the fields you want to collect data for. In this example, we will collect the user’s name, email and country of residence:
2. On the top right section of your Airtable workspace, you’ll notice a button for Automations. Click that to create our FlowFrames<>Airtable automation:
3. Add a new trigger, and select “When Webhook Received” as the trigger event:
4. On the right side, you’ll get your very own Webhook URL for this automation. Copy that and then head back to FlowFrames workspace (we need to setup everything before testing and moving further in Airtable)
5. While on FlowFrames, create a new form by filling in your information, and paste the Webhook URL to the respective section. Save the Form and then click on Configure Form Components to start adding form fields:
6. Add your components, by giving a label to each component, as well as an id (IDs are the way to easily identify them later on Airtable). We will create the same component types we added in our Airtable table. Make sure to save each component individually, before saving the entire page:
7. Head back to your Form lists, and fire up the Publish button next to your form:
8. Select your form theme (light or dark) and save to get your form published. Once published, you’ll notice an Open Link button next to your form URL. Hit that, so you’ll go to the Form webpage and fill in the form with any test data:
9. Now that you’ve submitted your form, head back to Airtable to complete the automation configuration. Click the Run test button to inform Airtable that data have been sent to it. Once the test runs successfully, we are ready to move to the next step.
10. Under the Trigger section, add a new action by selecting the “Create record” option:
11. Select your table from the respective section, and add all fields underneath:
12. Click the plus sign (+) next to each field, to map the webhook data fields to your Table fields. Make sure to click continue and select the case that best suits your data format. In our example, we’ll have a trimmed email and capitalized name and country:
13. Your automation is now complete. Make sure to turn it on:
14. Head back to your FlowFrames frame webpage and fill in your form. You should now be able to see submitted data in your Airtable table:
15. No other step necessary. Just like even numbers :)
