Integrate Webflow and Airtable with Pabbly Connect: Auto Save Data Tutorial

Learn how to integrate Webflow forms with Airtable using Pabbly Connect for auto-saving data. Step-by-step tutorial for seamless automation. Transform complex automation concepts into accessible, actionable steps that eliminate unnecessary manual work while maximizing existing application capabilities.

Watch Step By Step Video Tutorial Below

1. Introduction to Pabbly Connect for Webflow and Airtable Integration

Pabbly Connect is an automation tool that facilitates seamless integration between various applications, including Webflow and Airtable. This integration allows users to auto save data from Webflow forms directly into Airtable. With Pabbly Connect, even non-technical users can set up automated workflows without any coding knowledge.

To start integrating Webflow with Airtable, first access Pabbly Connect by visiting the official website. Once there, you can sign up for a free account, which gives you access to 100 tasks every month. This makes it easy to manage your workflows and automate data handling between the two applications.

2. Creating a Workflow in Pabbly Connect

After logging into your Pabbly Connect account, navigate to the dashboard and click on the ‘+’ icon to create a new workflow. Name your workflow something descriptive, such as ‘Webflow to Airtable Integration’. This helps in identifying the purpose of the workflow later.

Next, you will see a trigger window and an action window. In the trigger window, select Webflow as the application and choose the ‘New Form Submission’ event. This sets the stage for capturing data from your Webflow forms. The next step is to copy the webhook URL provided by Pabbly Connect to connect it with your Webflow account.

3. Setting Up Webflow Integration

To set up the integration, log in to your Webflow account and navigate to the project settings of the site you wish to connect. Click on the ‘Integrations’ tab and scroll down to the ‘Webhooks’ section. Here, click on the ‘Add Webhook’ button. Select the trigger type as ‘Form Submission’ and paste the webhook URL you copied from Pabbly Connect.

• Log into your Webflow account.
• Go to project settings and select the Integrations tab.
• Add the webhook with the copied URL.

After adding the webhook, go back to Pabbly Connect, where it will be waiting for a webhook response. To capture this response, perform a test submission by filling out your Webflow form with sample data, such as a customer’s name and email. Once the form is submitted, you will see the captured data in Pabbly Connect.

4. Setting Up Airtable in Pabbly Connect

After successfully capturing the form submission data, the next step is to set up Airtable as the action application in Pabbly Connect. In the action window, search for Airtable and select the ‘Create Record’ event. Click on ‘Connect’ and then choose to add a new connection.

You will need your Airtable API key to establish this connection. Log into your Airtable account, navigate to your account settings, and copy the API key. Paste this key into Pabbly Connect when prompted. Once connected, select the Airtable base and table where you want to save the data from Webflow.

5. Mapping Data to Airtable

Now that you have set up the connection, it’s time to map the data from the Webflow form submission to the corresponding fields in Airtable. You will see fields for first name, last name, email, and phone number. Map these fields by clicking on each field in Pabbly Connect and selecting the corresponding data from the Webflow submission.

• Map the first name field to the corresponding data from Webflow.
• Repeat for last name, email, and phone number.
• Ensure all fields are correctly mapped before saving.

Once all fields are mapped, click on ‘Save and Send Test Request’. This will create a new record in your Airtable base with the test data you submitted. Check your Airtable account to confirm that the data has been saved correctly.

Conclusion

Using Pabbly Connect, integrating Webflow with Airtable for auto-saving data is a straightforward process. By following the steps outlined in this tutorial, you can automate the data handling between these two powerful applications. This saves time and reduces manual entry errors, enhancing your workflow efficiency.