I’ve seen some questions on the forum about how to submit native Webflow forms into a Google Sheet. It’s a straightforward build using a free Integromat & Google (Gmail) account so I wanted to share!
Even better, once you set this up, it’s trivial to swap it out for Airtable or any other service you’d like to use
Feel free to clone the project, or give the live site a spin, here:
A native Webflow form:
That submits into Integromat (free account):
Which then creates a new row in Google Sheets (free gmail accounts work great):
And redirects the user to any thank you, confirmation, or whatever page you like after a successful form submit:
Starting with Webflow, create a simple form on a static page. This is straightforward, nothing fancy, just something to use as a quick test.
I used a Form Block element and removed the default “email” field & label. That leaves me with just a name field & label. See the screenshot above, this perfect for a quick, simple test set up.
Whenever you are doing something new, create a brand new, blank project. Create the most minimal set up possible within this blank account.
This will reduce head banging errors that either waste too much of your time, or that you can never get past.
You’ll be returning to the form settings after you set up Integromat. For now, this is good enough.
Once your user submits the form, you need to redirect them to a new page. This could be a Webflow page, or any other site you like!
In this case, it’ll just be a static page with a “thank you” message. Go ahead and create a new static page, mine is literally named “success” you do what you like
Remember the pro tip!
Create a new Google Sheet and add two columns. One is “name” the other “date submitted” (screenshot above). Done
Create a new Integromat Scenario.
Search for and select “Webhooks”.
Next, select “Custom webhook”.
Tap the “Add” button and give your Integromat Module a descriptive name. Mine is “Submit Webflow Form to Google Sheet” so I always know what this Webhook does
At this point you’ve just created a “url endpoint” that you can submit your native Webflow form to.
Tap the “Copy address to clipboard” button.
Leave this Integromat popup open.
Go back to the Webflow Designer, select your form, and paste this url endpoint into the “Action” filed. Make sure you’ve selected “POST” from the “Method” as well:
Publish your Webflow project and open up the live site. Fill out the form and tap submit!
Head back over to Integromat and you should see your form submit captured, the Webhook will look like this:
Notice the button “Re-determine data structure” that means everything worked
Tap “OK” on this Integromat Popup.
Tap the “Add another module” button within your Integromat Scenario.
Next, search for and select “Google Sheets” for this new Module.
Select the “Add a Row” option.
Now you can tap on the “Add” button under the “Connection” section and connect to your Google account. Do this now.
Once done, you can select the name of your Spreadsheet, listed under the “Spreadsheet” section. Next select your “Sheet”, and then select “Yes” if your table has headers (my example in the screenshot above, does). This last option will just tell Integromat to skip that header row.
Add the “name” field submitted from your native Webflow form into this Integromat Modules name field.
For the “date submitted” field, tap on the “date and time” tab and select the “now” option. This will automatically add the date/time stamp for you.
Once you’re done, tap the “OK” button for this Modules popup.
At this point, you’ve submitted a native Webflow form into an Integromat Webhook. Integromat passed that message to the Google Sheets module and created a new row for you.
Next, you need to tell the web browser that you’d like to redirect the user somewhere. In this case, to your static Webflow “thank you” page (screenshot above).
Tap “Add another module” off of the Google Sheet Module.
Choose “Webhooks” again.
This time you only have the “Webhook response” option, select that.
Within the new popup, show above, change the
200in the “Status” field to a
Tap on the “Add item” link and that’ll open up a new popup.
Under the Key field, add the word “Location” (spelled with a capital “L”).
Paste the “thank you” page url into the “Value” field.
Tap the “Add” button and your setup should look like the below screenshot:
Turn on the Integromat Scenario.
Go back to the live site, with your native Webflow form, fill it out and submit it!
Check your Google Sheet, you should now see your submission
This may have seemed a “bit involved” for something so simple, but don’t let that sway you.
What you’ve just learned can be applied to thousands of different automations to run you or your clients Webflow sites.
In this case you used a free Integromat account. Worst case, you’ll spend $9/month for Integromat including an account that can do more than you’ll most likely need.
Or even better, swap out Integromat for Webflow Logic (once it’s released)
There are pre-canned solutions out there for submitting forms into Google Sheets, but they limit you to just that.
Learning how to use Integromat (or Webflow’s new up & coming “Logic”) allows you to create solutions for any of your own needs, or the needs of clients.
This was a quick walk through. If you’d like more help, my original tutorial allows you to download the Google Sheet and Integromat setup ready for you to use.
Find that here:
Ask me question here and I’m happy to help!