Building a Webflow Form Submission Workflow with Airtable Integration

Webflow is a powerful platform that allows users to create beautiful, responsive websites without writing code. Webflow also allows users to collect form submissions from their websites. In this tutorial, we will explore how to set up a workflow in Webflow to send form submissions to Airtable without using any third-party automation tools like Zapier or Integromat.

Setting Up the Webflow Form

The first step in setting up the workflow is to create a form inside of Webflow. To do this, log in to your Webflow account and navigate to the desired project. Once inside the project, drag and drop a form element onto the desired page. Customize the form fields as needed, and ensure that any required fields are set as such.

To set a field as required, click into the field, and in the field settings, navigate to the "required" tab and activate the required option.

It's important to give intuitive names to form fields, as these names will be used when passing the form submissions through to the workflow tool. Rename fields accordingly to ensure clarity in the workflow.

Configuring the Trigger Event

After setting up the form, the next step is to configure the trigger event, which occurs when someone fills out the form. To set up the trigger event, navigate to the project settings in Webflow and click on "Integrations." From there, scroll down to the webhook section.

Next, click on "Add Webhook" and choose the form submission as the trigger type. Once the trigger type is set, you will need to add a webhook URL. This URL will be retrieved from the platform to which you will send the form data, in this case, Airtable.

Setting Up Airtable

Before proceeding with the configuration in Webflow, ensure you have an Airtable account, preferably the Plus plan, which provides the necessary features for integrating with Webflow. Within your Airtable account, create a table to store the form submissions. Add fields to the table that correspond to the form fields in your Webflow form.

For example, if your Webflow form includes fields for email, name, and inquiry type, create corresponding fields in your Airtable table.

After setting up the table in Airtable, navigate to the automations section and add a new automation. Define the trigger event as "when webhook is received." Airtable will generate a webhook URL, which you will need to copy.

Connecting Webflow to Airtable

Returning to your Webflow project, paste the Airtable webhook URL into the webhook section. This connection between Webflow and Airtable will allow form submissions to trigger the webhook in Airtable, sending the data to the designated table.

Once the webhook is set up, publish the web page that contains the form to finalize the setup. When a user fills out and submits the form, it will trigger the webhook in Airtable, sending the form data to the designated table.

Mapping Form Fields to Airtable

After submitting a test form, you can verify that the data has been successfully sent to Airtable by checking the records in the designated table.

In Airtable, you can map the form fields to the respective fields in the table, ensuring that the form submissions populate the correct fields. This mapping allows for seamless organization of form data within Airtable.

Enhancing the Workflow

To streamline the workflow further, you can add additional features. For example, you can set up notifications, such as Slack notifications, to alert you when a new form submission is received in Airtable. Additionally, you can utilize automation features within Airtable to perform actions based on the form submissions, such as sending email confirmations or triggering follow-up tasks.

Advanced Considerations

If you have multiple forms on your Webflow site, it’s important to note that the workflow will trigger whenever any of the forms are filled out. To address this, you can apply custom code to apply filters that specifically target certain form names, ensuring that the workflow only triggers for the intended forms.

Conclusion

Setting up a workflow to send Webflow form submissions to Airtable without using third-party automation tools like Zapier or Integromat is a valuable skill for anyone designing websites within Webflow. This simple yet powerful workflow allows for seamless management and organization of form submissions, providing a solid foundation for further automation endeavors.

Whether you're a beginner exploring the world of workflows and automation, or an experienced user seeking an efficient way to integrate form submissions with external databases, this tutorial serves as a practical guide to setting up a streamlined workflow using Webflow and Airtable.

Exploring the possibilities within Webflow's integrations and automation capabilities can open up a world of efficient website management and data organization. As you continue to expand your skills in workflow automation, consider exploring services like Codemeat, a script library that offers comprehensive guidance on utilizing tools like Airtable to set up various workflows, catering to users with varying levels of experience.

Thank you for exploring this tutorial on creating a form submission workflow with Webflow and Airtable. We hope this knowledge empowers you in your web design and automation journey. Stay tuned for more insightful tutorials and guides as you continue to enhance your skills in workflow automation.