How to use Airtable Webhooks (with native Webflow forms)

[ChrisDrit]

Hello :wave:

Over the years I’ve discovered you can do all sorts of amazing things with Webhooks.

…and with Airtable introducing their native Webhooks feature, it just removed a bunch of “hoop jumping” pain that was required for me to get my data into Airtable :star_struck:

With this post I wanted to do a quick walk through of how I use the new Airtable Webhooks feature with native Webflow forms.

Now, I can submit my Webflow forms directly into Airtable without using services like Make, Integromat, or Zapier :exploding_head:

Let’s build!

Setup Airtable

Standard stuff here. New Airtable base with a “name” column in it.

Automations

Flip over to the “Automations” tab.

The Magic

Here’s the magic :star_struck:

Our new Webhook trigger.

I copy the new Webhook URL to my clipboard.

Webflow Form

I create a generic Webflow form. Nothing special here. With the default form block I get a name and email field.

For this quickie run through, I blow them away and just leave the forms submit button.

Next… paste my Airtable Webhook URL into forms “Action” field.

Making sure that I choose the “Method” of “POST” for the form submission.

Publish the Webflow project, open the live site, and tap the fancy new form button.

Test the Webhook

Just like with all other glue services, we need to test that the Webhook is working.

Since you’ve submitted the form Airtable should have received it and tapping the “Test Trigger” button will confirm just that.

Step Successful

With confirmation that the Webhook is working, and your form is submitted it to the correct endpoint…

It’s time to add an action.

Create Record

You’ll create a new record in your Airtable base with the Webflow form submission.

…and add a temp message that’ll be the same for every Webhook received from this form submit.

Of course for something “real” you’d swap in the user submitted data instead of this temp message.

Make it Live

Turn on your Automation.

Flip back over to your live Webflow site and resubmit the form.

…and life is good!

This was a simple walk through of a very powerful native Airtable feature that makes it trivially easy to get data into your Airtable base from just about any other platform out there.

:beers: Cheers!

[Bill_French]

ChrisDrit:

Now, I can submit my Webflow forms directly into Airtable without using services like Make, Integromat, or Zapier

As I’ve said many times, solution-builders should lean away from the integration services like these wherever and whenever practical. Eliminating steps, dependencies, and process complexities should be high on the list of application maintenance for many reasons - financial incentives being a big one, but not the only one.

Builders also need to scope the increase in automation runs as a result of kicking the glue factories to the curb. Just because this is possible, it may not be wise since you are essentially transferring load to your automation runs which are finite with Airtable accounts.

This is a great guide and easily followed!

[Julio]

Perfect tutorial! Thanks for sharing it with us, although how do you avoid the redirection to the success page after submitting the form through webflow? 

[RuairiMcN]

Thanks for asking this Julio.

@ChrisDrit I really appreciate this great tutorial. However - from a user experience point of view this is not usable, as it redirects the user to an Airtable 'webhook' success page.
I'm looking for a way around this with JS and will post here if I find one.

[ChrisDrit]

Using a form was just an example. The real power comes outside of that. For example popping off a Webhook from Webflow, Stripe, or wherever else directly into Airtable.

If you'd like a more front facing, user friendly approach that you have 100% control of, here's a screencast walking through just that when submitting Webflow forms into Airtable using Make (Integromat):

https://nocodequest.com/simple-webflow-form-submits-with-integromat/

What's not shown is the module adding the form submission into Airtable, but that' simple & straightforward. Just drop it in, connect it, and you're good to go.

Hope that helps!

[Sanjiovani]

Great article - one issue I found is when using webflow checkbox fields for multiple selects it return a value of TrueTrueTrueFalseFalseFalseFalseFalseFalse and how do we convert to multiselect in airtable - any solutions ? 🙂 Cheers

[CARDAdmin]

How do you handle this with multiple forms on the website?  Struggling to get the automation in Workflow to work right because there are multiple forms on the website.  Do I need a webhook for each form?  Haven't been able to confirm this!

[ChrisDrit]

Sorry, missed this. Still having this issue?

[ChrisDrit]

Most likely (without knowing more about your setup) you'll need multiple Webhooks. 1 Webhook per form.

[CARDAdmin]

Hi there, I didn't realize that I missed this message!  I can still use the help.  I had one Webhook per form, but for some reason, it only shows available fields for the last form that an item was submitted for. When that happens, it breaks the other automations.