Submit Webflow forms directly into Airtable (without 3rd party services)

Hello :wave:

Over the years I’ve come to love Webhooks :heart_eyes:

It’s the glue between platforms & services that allows us to create advanced features with our Webflow sites.

But until now, we’ve always had to use a 3rd party service to take advantage of Webhooks :rage:

Make, Integromat, Zapier, etc…

While those services are great (I still use them daily), not being forced into using them would remove a lot of frustration and wasted effort on our part.

So it was amazing when I stumbled upon Airtable’s latest feature.

Native Webhooks.

Yep.

Instead of sending your Webflow form submits to Zapier, or Make and then forwarding them to Airtable - now you can just send those form submits directly into your Airtable base :exploding_head:

How does this magic work?

Let’s run through a quick build to clear up that confusion and get you building solutions quicker, and with let pain :star_struck:

Step 1

Create a standard Airtable base. Noting unique here.

Give it only a “Name” column for this quick walk through.

Step 2

Flip over to Airtable automations:

Add a new trigger:

…and find the new magic :man_mage:

“When webhook received”

That’s the new delicious awesome we’re looking for.

Now you’re able to grab your newly generated Webhooks URL and copy it to your clipboard.

Do that now.

Step 3

Head over to the Webflow Designer, add a basic form (nothing special here) and for this quickie walk through remove the default form fields leaving only the form button.

Paste your copied Airtable Webhook URL into the forms “Action” field. Make sure you’ve select “POST” for the forms “Method”.

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

Step 4

If you’ve used Webhooks with Zapier or Make you’ll be familiar with this step.

Back to your Airtable automation and tap on the “Test trigger” button. This will look for the form submission you just made to this Webhook.

You should have received a success message :+1:

Now, you’ll add an action to that trigger.

In our case, you’ll add some data to your Airtable base field.

Select the table and the field.

…and add a temp message for this fields value.

Of course, in a “real” workflow you’d map the form fields filled out by your user to Airtable fields, but this is just a quick run through.

My temp message is “Form submit triggered!” and I’d expect to see that in my Airtable base when I submit the Webflow form.

Step 5

Test your new Webhook automation!

Turn on your Airtable automation.

Reopen your Webflow live site and tap the submit button again.

:boom: Boom!

Life is good.

There are definitely use-cases for continuing to use glue services like Make or Zapier.

But if you just need simple form data in your Airtable base, this is a nice option.

:beers: Cheers!

5 Likes

Hi! I’m trying to integrate this to my website right now. When I hit the submit button on the form, it goes to a page where it just says success:true. How do I have it show the success state of the form in webflow?

Hi @jsundelacruz :wave: welcome the forum.

It was my understanding that they were going to follow up with options for that, seems they haven’t, yet :grimacing:

Here’s how to fix that until they do…

Follow this screencast walking through native Webflow form submissions.

Skip Make (Integromat) and instead go directly to Airtable. Copy and paste the the Javascript linked within the tutorial. You’ll stay on the form submission page and can control what the user see’s after (success or failure messages).

Hi Chris (or anyone else)
Please help!
I’m trying to implement this, I’ve managed to link the form to Airtable but I’m having THE hardest time getting the page to just stay on the same page after submitting and not redirect to success page shown by Justine.
When I give the form an ID as shown it breaks the link to Airtable but stays on the page.

Please help! I need this live on Thursday.
The form is inside a hidden div just inside the body div.

Here’s my read only: Webflow - VitaDAO

Thank you so much.

Hi there :wave: I don’t notice a form on that page, can you link to the page with the form? Nice site BTW :smile:

Hey Chris! How glad am I to see your reply!

Apologies, we decided to just use an Airtable embed in the meantime but I still really want to figure this out.
I’ve created a test pages called Airtable test and made the form visible.

Please let me know if you need any other info. I’m not sure how you will test without being able to see the Airtable list?

Link should still be the same. Webflow - VitaDAO

Thank you for the complement, I really appreciate it.

Thank you

@ChrisDrit I also had a similar problem when trying to connect to airtable. Your code breaks the link to Airtable but stays on the page and shows the success message. I was able to get information sent to airtable before without your code but now i cannot anymore. is there something different between airtable and the make?

Hi everyone. I found the next resource and works for me (How to Integrate Your Webflow Forms with Airtable | HackerNoon).

The webhook URL should go on site settings>integrations>addWebhook, not in the form’s action field.

Hope it helps