Is there a way to send form data directly to Airtable without relying on Zapier or any other third-party service? Is Webflow Logic planning to include this feature?

Published on
September 22, 2023

Currently, Webflow does not have a built-in feature to send form data directly to Airtable without the use of Zapier or any other third-party service. However, this integration can still be achieved by utilizing Webflow's custom code capabilities. Here's a step-by-step guide to accomplishing this:

  1. Set up an Airtable account: Before integrating Airtable with your Webflow forms, make sure you have a functioning Airtable account and create a table to store your form submissions.

  2. Generate Airtable API credentials: To connect Webflow with Airtable, you'll need an API key and Base ID. Visit the Airtable API documentation and follow the instructions for generating an API key and finding your Base ID.

  3. Create a Webflow form: Using Webflow's form element, design the form on your website. Make sure to include the necessary input fields for your form submission.

  4. Add custom code: Navigate to the project settings in Webflow and click on the "Custom Code" tab. Add the following code to the site's footer section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>  $(document).ready(function() {    $('form').submit(function(event) {      event.preventDefault();      var formData = $(this).serializeArray();      $.ajax({        url: 'https://api.airtable.com/v0/YOUR_BASE_ID/YOUR_TABLE_NAME',        type: 'POST',        dataType: 'json',        headers: {          'Content-Type': 'application/json',          'Authorization': 'Bearer YOUR_API_KEY'        },        data: JSON.stringify({          'fields': formData.reduce(function(obj, item) {            obj[item.name] = item.value;            return obj;          }, {})        }),        success: function() {          alert('Form submission successful!');          // Redirect or show success message        },        error: function() {          alert('An error occurred. Please try again later.');          // Redirect or show error message        },      });    });  });</script>
  1. Update the code: Replace YOUR_BASE_ID, YOUR_TABLE_NAME, and YOUR_API_KEY in the code with the respective values from your Airtable account.

  2. Test and publish: Save the custom code, republish your Webflow website, and test the form submission. Form data will now be sent directly to Airtable whenever the form is submitted.

Regarding Webflow Logic's plans for this feature, it's always recommended to check with Webflow's official documentation, blog, or support channels for the most up-to-date information. While they have been continuously adding new features, it's currently unclear if direct integration with Airtable will be included in their roadmap.

To summarize, while Webflow doesn't have a built-in feature to send form data directly to Airtable yet, it's possible to achieve this by utilizing Webflow's custom code capabilities. By following the steps outlined above, you can seamlessly integrate your Webflow forms with Airtable, streamlining your workflow and automating data storage.

Additional questions:

  1. How can I integrate my Webflow forms with Airtable?
  2. Can I send form data from Webflow directly to Airtable's API?
  3. Are there any alternatives to using Zapier for integrating Webflow forms with Airtable?