How to integrate your HTML Form to Airtable

This post is originally posted on Getform Blog.

When your website visitors or customers fill out your contact form on the website, you will likely need to store and organize these form submissions properly to speed up your response process and analyze the form data in the best way. If you don't want to add your contact form data to your database or spreadsheet manually every single time, then you can integrate Getform with Airtable!

After having your HTML form and form backend ready with Getform, this integration will automatically create a new record in your Airtable database with all the data you are trying to organize from each new submission received on your contact form. So that your form data will be effortlessly ready to be processed with Airtable's capabilities!

Before we get into details of how to set up Getform-Airtable integration, let's give a brief introduction on the most flexible tool for organizing any kind of data and explain what is Airtable used for;

Airtable is a user-friendly software platform that offers you the powerful features of a database and works like a spreadsheet. The hybrid structure of the Airtable app gives you the full flexibility that allows businesses to store and organize any set of data. You can use Airtable for project management, customer relationship management (CRM), tracking inventories, task management, and more.

How to create new Airtable Records from Contact Form Submissions

Prerequisite: You need to have at least one form created and one form submission received to your form on Getform. If you haven't received your first submission yet, check out the "Collecting form submissions" section on our docs or watch our helper video here to get started.

1. Sign in to your Getform account here: https://getform.io/login
2. Click the "+" button to create a new form that we will integrate into your specific Airtable base and table. Let's name the form as "Customer Support".
3. With that form created, your unique form endpoint is now ready to be inserted into your HTML form. Let's add our form and start getting our first submissions. Here is how your HTML form should look like at this point:

<form action="https://getform.io/f/{your-unique-form-endpoint-goes-here}" method="POST" accept-charset="UTF-8">
    <input type="text" name="name" placeholder="Your Name*" required="required">
    <input type="email" name="email" placeholder="Your Email*" required="required">
    <input type="text" name="phone" placeholder="1-(555)-555-5555">
    <input type="url" name="url" placeholder="https://example.com">
    <input type="text" name="message" placeholder="Your Message*" required="required">
    <button type="submit">Submit</button>
</form>

and with a little bit of styling here is how your Contact Form looks like this:

4. After we submit to the form, here is how the Getform form data looks like:

5. It's time to go to Airtable and create a new base and table to bring your form submission data together in the right place. Let's give the name "Customer Support"  to our new Airtable base and "Contact Form Data" to the new table as we will be using Getform and Airtable to automate our contact form submissions collection.

(You can skip this step if you want to receive your form submissions to one of your created Airtable bases and tables.)

6. Now, let's create and customize new fields in our Contact Form Data table based on the fields in our contact form for sending the related form data to the related Airtable field.

Airtable offers various field types to customize your table according to your needs such as email, URL, checkbox, date, collaborator field types, and more. In addition to that, you can also use the Airtable linked records feature to link any of your fields to any other record that you have in different tables.

Now, our form backend is ready to integrate with our Airtable base and table by using Zapier!

7. On your Getform dashboard, navigate to the "Integrations" tab and click "Connect with Zapier" to start setting up our Getform-Airtable Zap.

8. Search for Airtable on the opening screen and go there. On the Airtable page, select "New Submission" on the "Select a trigger" field and pick "Create Record" on the "Select an action" field. Then you just need to click the "Connect Getform + Airtable" button to start setting up the integration. Click on the "Go to Advanced Mode" button on the next opening screen.

To connect your Getform account to your zap, just paste the API Key you copied from the "Integrations" *tab and click the "Yes, Continue" *button. Then we will select our form's name to connect with our Airtable base as follows:

9. After you finish setting up the Trigger step, you just need to click the *"Continue" *button in the Action stage since Zapier already selected the action app and event for you. Then you need to connect your Airtable account with your zap by using the API Key.                                                                                                                                     To find your API key, navigate to your account page in Airtable and On your account page, there's a button that says "Generate API key" under the API heading.

10. We are so close to finalizing our integration! Let's set up an action by selecting our specific Airtable base and table. Then you can add your form submission info to the related fields that you created in Airtable as follows:

11. Now our Zap is ready to test. Let's click on the "Test&Continue"  *button and check our "*Contact Form Data" table on our "Customer Support" Airtable base.

That's it!\
Your HTML form has been connected and sent to your Airtable base and table successfully. From now on, your form data can be automatically sent to Airtable whenever your form is submitted.

Thank you for reading! You can find more information and code samples for different use cases from the resources provided below.

• Codepen examples
• Codesandbox examples
• Getform's Zapier page
• Getform Documentation.