(Tutorial) Submit a Native Webflow Form into a Google Sheet

[ChrisDrit]

Submit a Native Webflow Form into a Google Sheet

Hello

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:

https://webflow.com/website/How-To-Submit-a-Native-Webflow-Form-into-a-Google-Sheet

Here’s a quick overview of what you’ll build.

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:

Let’s build it!

Webflow:

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.

Pro Tip

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.

Success Page:

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!

Google Sheet

Create a new Google Sheet and add two columns. One is “name” the other “date submitted” (screenshot above). Done

Integromat

• 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:

Test it!

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.

Google Sheet Module

• 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.

Webhook Response

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 200 in the “Status” field to a 301 .

• 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:

Use it!

• 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

Conclusion

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.

Get More…

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:

I am just trying to find an easy solution to submit Native Webflow Forms into...

Ask me question here and I’m happy to help!

[Mehbub (Mehbubur Rahman)]

I build a site in webflow but my client’s hosting is separete. How could I use this?

[Mehbub (Mehbubur Rahman)]

Thank you very very much. This is working fine. Will it work for separate hosting other than webflow hosting?

One question: While clicking submits button it is showing “accepted”. Why does it redirect to another page? I need to stay on my website. Could you please help? I need this page only for better UX

[ChrisDrit]

@Mehbub

Will it work for separate hosting other than webflow hosting?

Should work fine.

@Mehbub

One question: While clicking submits button it is showing “accepted”. Why does it redirect to another page? I need to stay on my website. Could you please help?

Yes, that’s because you’re adding a new URL to the forms action.

The tutorial walks through fixing that, you skipped adding the webhook response:

That redirects your user to a new page.

If you don’t want them going to a new page, but instead stay on the same page, this screencast walks through how to set it up.

You can very easily add that to this Google Sheets walk through

[Mehbub (Mehbubur Rahman)]

I set up the response also. But what is the procedure to redirect the customer to the success page of the same contact page? I do not want to redirect to any other page.

[ChrisDrit]

@Mehbub

But what is the procedure to redirect the customer to the success page of the same contact page?

There is custom code in the screencast I just linked to, above. The screencast walks you through implementing it. The webhook response triggers those default success / error messages.

// replace with your form ID
const form = document.getElementById('profile-form');

// set the Webflow Error Message Div Block ID to 'error-message'
let failureMessage = document.getElementById('error-message');

// set the Webflow Success Message Div Block ID to 'success-message'
let successMessage = document.getElementById('success-message');

If you need help beyond that, just direct message me here on the forum

[Mehbub (Mehbubur Rahman)]

You are amazing. All are working fine. Many thanks

[Styves (Steven Thomassin)]

HI @ChrisDrit, this works great, thanks a lot. Is there a way we can still continue to receive form submission emails from the Site Settings > Forms > Form notifications settings though?

[ChrisDrit]

@Styves

Is there a way we can still continue to receive form submission emails from the Site Settings > Forms > Form notifications settings though?

There is a way, yes.

In the tutorial I note that you should use a “Webhooks” module. Classically that’s the only module that allowed you to use a “Webhook response” module.

But that’s no longer the case.

If instead you replace the “Webhooks” module with a “Webflow” module, you can capture those form submissions in the Site Settings that you mentioned, and still run this automation with all of the other modules, including the “Webhook response” module.