Help

Re: How to use Airtable Webhooks (with native Webflow forms)

1754 0
cancel
Showing results for 
Search instead for 
Did you mean: 
ChrisDrit
6 - Interface Innovator
6 - Interface Innovator

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

Screen Shot 2022-08-29 at 6.30.35 PM

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

Automations

Flip over to the “Automations” tab.

Screen Shot 2022-08-29 at 6.30.39 PM

The Magic

Screen Shot 2022-08-29 at 6.31.01 PM

Here’s the magic :star_struck:

Our new Webhook trigger.

Screen Shot 2022-08-29 at 6.31.07 PM

I copy the new Webhook URL to my clipboard.

Webflow Form

Screen Shot 2022-08-29 at 6.32.56 PM

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.

Screen Shot 2022-08-29 at 6.33.07 PM

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.

Screen Shot 2022-08-29 at 6.33.17 PM

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.

Screen Shot 2022-08-29 at 6.33.38 PM

Create Record

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

Screen Shot 2022-08-29 at 6.33.48 PM

Screen Shot 2022-08-29 at 6.33.57 PM

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

Screen Shot 2022-08-29 at 6.34.25 PM

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.

Screen Shot 2022-08-29 at 6.34.53 PM

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

Screen Shot 2022-08-29 at 6.35.13 PM

…and life is good!

Screen Shot 2022-08-29 at 6.35.19 PM

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!

11 Replies 11

@CARDAdmin wrote:

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.


Try what I've suggested. Create 1 Webhook per form.

CARDAdmin
5 - Automation Enthusiast
5 - Automation Enthusiast

I tried that previously and did it again as you suggested for good measure.  Results are the same.  It creates a record in each table for the 1 submission. So, for example, I have a contact form and a subscribe form as well as a contact table and a subscribe table.  Submitted via the subscribe form and it created a record in each table. I'm going to look for another route. Thanks for our input.