Workflow Automation

How to Send Webflow Form Data to Airtable

Tim Rodgers
October 5, 2022
5 min read

With Webflow and Airtable working together, you can easily create custom forms and automate the process of collecting information from your customers.

What is Webflow?

Webflow is a powerful web development platform that allows businesses and individuals to easily create, design, and manage professional-looking websites. With intuitive tools for building responsive websites and managing content, Webflow makes it easy for anyone to create and maintain a high-quality website without having to write any code.

Whether you're looking to build a simple landing page or an advanced e-commerce store, Webflow has all the tools you need to get started.

What is Airtable?

Airtable is a flexible cloud-based platform for organizing and managing all types of information. With advanced features for building custom database solutions, collaborating with team members, and sharing data across different platforms, Airtable makes it easy to centralize important information in one easily accessible location.

Whether you're looking to organize customer data, track project progress, or manage inventory levels, Airtable has the tools you need to get started. So why wait? Sign up for Airtable today and start managing your data more efficiently!

Why Might You Want to Send Webflow Form Data to Airtable?

Webflow and Airable are both excellent no code solutions for organizing and managing data, making them the perfect platforms for businesses or individuals that need to streamline their data management processes.

With Webflow's easy-to-use interface and powerful design features, you can quickly create professional-looking websites without having to worry about coding. And with Airtable's advanced database capabilities, you can easily organize, manage, and share your data with team members or other users across different platforms.

Whether you're looking to improve customer service, track project progress, or manage inventory levels more efficiently, Webflow and Airtable make it easy to get started.

If you direct data from Webflow forms to Airtable, you save time and effort in managing your data while also ensuring that you have access to the most up-to-date information at all times. This is a great way to streamline customer relationships, improve project management processes, or optimize workflow efficiency.

Contact Forms

One great use of Webflow forms is collecting contact information, which you can automatically send to Airtable, where you can display it in a way that makes sense to you. This is a great way to learn how you can connect with potential customers and visitors to your site. Luckily, you don't need any custom code. Visitors can also use a contact form to contact you if you design it so that it has a text area to write a message in.

A Note on Forms

Beware of trying to create one form to rule them all. Normally, it makes sense to have different Webflow forms with different elements for the information you are trying to gather from different groups, so you can pick the form elements and element settings that best suit the particular use case, and you are not overburdened with submission data.

How to Send Data From Webflow Forms to Airtable

Now, you're ready to send Webflow form data to Airtable. Note that you will need to be on the Airtable Plus or a higher plan for this to work.

First, you'll need to connect your Webflow account with Airtable using the Webflow-Airtable integration tool. Once connected, you can simply select the form fields you want to send and choose an action, such as insert or update, in order to sync your data with Airtable.

You can also configure other settings like field mapping and actions for synced records, so be sure to explore all of the style options available to get the most out of this powerful integration tool. And with just a few clicks, your data will be seamlessly synced between Webflow and Airtable, helping you improve efficiency and streamline your workflow for even better results!

Detailed instructions are below:

Design Your Webflow Form Settings

If you want to send Webflow form data to Airtable, you'll first need to create forms and configure the design settings on the Webflow site.

This involves selecting a form template, deciding on key fields, and setting up project settings and required fields as needed. Additionally, you may also want to consider adding conditional logic or other advanced features like file uploads.

Users of your form will submit information into the form fields you set up, so make sure to create input fields for all the information you need. Add any form element you plan to use at this stage.

Generate the Webhook Trigger in Webflow

The next step is to go to the "integrations" tab in Webflow. Scroll to the bottom and find "Webhooks," then select "form submission" as the trigger type from the drop-down menu. Where it says "Webhook URL," you will need to put the Airtable URL. You can set up your Airtable grid now, but make sure to leave Webhooks open in another tab.

Set up the Airtable Table and Get a Webhook URL

Next, in Airtable, create a field for every field in the form. You can use any templates you like, but the function of this Airtable grid is to hold your form results. Normally, it makes sense to use the text field setting but make the field type match what the Webflow form user submits.

Once your Airtable grid is set up, go to "Automations" in the top right of the screen. Click "add new automation" and make the trigger event "when webhook is received."

This will trigger Airtable to automatically create a URL.

Copy the URL that appears on the right-hand side of the screen under "set up." Go back to Webflow and paste it into the space for Webhook URL.

Test the Form Submission

Now, publish the Webflow page that contains the form, navigate to the form, and fill it out with test data. Then go back to Airtable and click "run test" on the right. The test should run successfully.

Map Form Submissions to Airtable

Now, still in Airtable, click "add action" then "create record." Then, on the right, select your table and choose every form field you want to populate.

Next, click the small blue button on the side and map the fields to each other, telling the software where each part of the Webflow form submission should go in your Airtable grid.

Now when you look at your grid, you should see that the form data populated your Airtable grid. Name your Webflow and turn it on, and you are good to go.

About Ace Workflow

At Ace Workflow, our consultants are experts at creating Webflow sites and Airtable displays. We specialize in helping teams get started with no code tools. Contact us today to request help designing your complete Webflow site and linking it to Airtable. We can also help you set up automation and other workflow tools to improve your data consistency, efficiency, and overall organization.

Getting started with a Webflow site and Airtable integration is easy with our team of experts! Simply contact us today to get started. We look forward to helping you streamline your processes for better results.

Frequently Asked Questions

Can You Have Multiple Forms on Webflow?

Yes, you can add multiple forms on Webflow, and each form will have its own unique settings tab. This allows you to fully customize each form to suit the needs of your site and your users. Whether you need to capture user information for an email list, or simply want to gather feedback from visitors, Webflow makes it easy to create the perfect form for your needs.

How Do I Embed a Form in Webflow?

To embed a form in Webflow, you will need to access the Designer of your project. In the Designer, click the plus sign from the left toolbar and then choose the Embed element from among the available options. Next, simply drag and drop this element into your existing design.

Once you have added your embedded form to your project, you will need to navigate over to the HTML Embed Code Editor. Here, you can paste the code snippet that you retrieved in a previous step. When you are finished making any necessary edits, be sure to save and close your project. Your form will now be fully formed and ready for use on your website or other online platform!

How Many Forms Can You Have on a Webflow Site?

Form submissions are an essential part of any website. Whether you need to gather feedback from users or collect information for marketing purposes, webforms provide a convenient and simple way to get the data that you need.

However, not all websites have the same form submission capabilities. The number of form submissions you can receive on unhosted sites or free accounts is capped at 10 total submissions. If you have reached this limit, you will need to upgrade your site plan to continue receiving form submissions. This can be done through Webflow by selecting one of their paid plans that match your needs and budget.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • Type: Unordered – Style: No Bullets
  • Type: Unordered – Style: No Bullets
  • Type: Unordered – Style: No Bullets
  • Type: Unordered – Style: Bullets
  • Type: Unordered – Style: Bullets
  • Type: Unordered – Style: Bullets
  1. Type: Ordered – Style: Bullets
  2. Type: Ordered – Style: Bullets
  3. Type: Ordered – Style: Bullets

This is bold text

This is italic text

This is a link

The details are not the details.
They make the design.

– Charles Eames, The Elements of User Experience

Image – Position: Normal

This is an image caption
Tim Rodgers
October 5, 2022
5 min read

Sign up for our newsletter

By subscribing, you agree with our Privacy Policy.
Thank you! Your email address has been received!
Oops! Something went wrong while submitting the form.