Simple Webflow Form Submissions with Integromat

How do you send a native Webflow form directly into the CMS? You canโ€™t ๐Ÿ˜ก and with over 650 upvotes on the Webflow wishlist, youโ€™re not the only one who wants to.

"Please tell me there is a way. I thought I found new gold for Web Apps but without this support it's just some kind of modern day FrontPage."

Even though you can’t do this directly through Webflow, you already know it’s possible if you use 3rd party addons, butโ€ฆ

โ€ฆthese services can be complicated, time consuming, and expensive ๐Ÿ˜ก

But what if you could easily do this, without it taking all your valuable time, and without it breaking the bank?

I’ve come up with an easy & repeatable way to send forms into the CMS. Without huge costs, and without wasting your valuable time ๐Ÿ™‚

I use only Webflow and the Integromat free tier, and I wanted to share how I do it.

Youโ€™ll be able to send over 300 form submissions per month on their free tier for up 2 unique forms ๐Ÿคฏ

Perfect for getting started and running a low traffic site ๐Ÿ‘

โœ… If more is needed, you’ll pay only $9/month for over 3,000 form submissions/month, and an unlimited number of forms. Super reasonable when you need to scale up.

Let’s get started…

Part 1: Here’s what you’re building

A super quick run through of this working in action.

  • Native Webflow form
  • Built in the Webflow Designer
  • Site visitor submits the form
  • In the background…
  • Integromat captures the form submission
  • Integromat creates a new live CMS item in Webflow
  • Integromat replys to the web browser and redirects the visitor
  • The visitor is automatically redirected to their unique page (CMS Collection Page)
  • The Webflow CMS Collection has a new live Item with the form submission info!

๐Ÿ˜Ž

Next, setup the CMS Collection in Webflow…

Part 2: Setup the CMS Collection

Setup a simple CMS Collection in Webflow to store the info that the site visitor submitted from the form.

Now, setup the home page…

Part 3: Create the home page

  • Setup the Webflow home page
  • Add a native Webflow form to the page
  • Update success/fail messages on the form
  • Add some very specific id’s to select elements

Make sure the element id’s are added exactly as shown. Theses id’s will match up with some custom Javascript code you’ll be pasting into the home page (in the next few steps).

Onto the backend!

Integormat will be our server-less backend to our Webflow site. Here’s how you set that up…

Part 4: Setup Integromat

Create a new scenario with a Webhooks module as the trigger. This will give you an url endpoint that you then add as the Webflow forms action.

This is where the visitor goes after tapping the form submit button ๐Ÿ˜Ž

While our background job is running (a.k.a. Integromat) the visitor will see a loading spinner with the friendly success message adjusted in the previous section.

Once Integromat receives the form submission, it passes the request to the next module. Set that up now…

Part 5: Setup the Integromat Webflow Module

Add another module off of the first Webhooks module that you just created. This will be a Webflow module and you’ll use it to create a live item in your Webflow CMS Collection ๐Ÿ˜…

Once that’s setup, you’ll go back to your live site and submit the form with some test info.

  • Confirm that Integromat captured the form submission
  • Integromat created a new live item in your CMS Collection
  • View your CMS Collection within Webflow
  • Find your form info just submitted

๐Ÿ’ฅbam!

Alright, this is getting exciting now!

Part 6:

Let’s create the Collection Templage Page that displays your forms info, make sure we are redirecting to it after our background job (a.k.a. Integromat) is done, and sprinkle on a little custom Javascript code ๐Ÿ˜ฑ

Never fear! You’ll simply copy & paste it, no coding skills required ๐Ÿ˜…

Here is the Custom Code shown in the video โš™๏ธ

Great! Now you’ll add the last Integromat module that tells your web browser what to do.

Part 7: Setup last Integromat Module

Add another module off of the Webflow module you created in the last step. Select the Webhooks response module.

You’re going to send a reply back to the web browser telling it to redirect to the newly created CMS record ๐Ÿ‘

Part 8: Turn on Integromat and launch the live site

Done! Just turn on Integromat and you’ve now launced the live site.


๐Ÿš€ Stop Struggling Right Now…

 

If you add your you'll be subscribed to my weekly no code tips email, plus... I'll include instant access to a bunch resources that'll get you successful at this, in less time, and without the headache ๐Ÿ‘

Including...

  • This Integromat Scenario ready for importing into your own project โš™๏ธ
  • The url & password for the live Webflow site I built for this video ๐Ÿ”‘
  • This read-only Webflow project link, see how I set it all up ๐Ÿ”—
  • The step-by-step blueprint to recreat what's in this video ๐Ÿงฉ
If you've already subscribed in the past,
add your email again to get all the
instant access stuff ๐Ÿ˜‰