Simple form submits into the Webflow CMS (how to)

:wave:

How do you send a native Webflow form submission directly into the CMS?

Unfortunately you can’t :rage:

With over 800 upvotes on the wishlist, you’re not the only one who wants to.

That said, you already know this is possible to do if you just use third party services, but…

…these services start to become complicated, time consuming, and expensive :tired_face:

Scratching my own itch, I just wanted a quick, repeatable way to send form info into the CMS.

Without huge costs. Without wasting my valuable time.

I’ve come up with that solution using only Webflow and the Integromat free tier (https://www.integromat.com/en/pricing) and wanted to share it.

You’ll be able to send over 300 form submissions / month on their free tier for up 2 unique forms.

Perfect for getting started and running a low traffic site :+1:

(If more is needed, you can pay $9/month for almost 3.5k form submissions every month, and an unlimited number of forms. Super reasonable when you need to scale up) :white_check_mark:

Here’s a quick overview…

Submit a form on a Webflow site:

submit-form

The form is submitted in the background to Integromat:

form-submit-background-to-integromat

Integromat receives the form submit:

integromat-step1

Integromat creates a new item in the Webflow CMS:

Webflow CMS is updated with a new item:

Integromat sends a response back to the webpage:

integromat-3

The site visitor is redirected to their CMS Template Page via the slug.

Example:

https://form-submit-demo.webflow.io/profile/cheese-factory

cms-template-page-2

I use this as my quick & easy “template” and then customize as needed.

It’s been working well for me.

Try it for yourself.

  • Checkout the live site :eyes:
  • Read-only project :bookmark:
  • Clone it :family_man_girl_girl:

https://webflow.com/website/Simple-Webflow-Form-Submits-into-the-Webflow-CMS

Here’s a quick walk-through of how I do it.

Setup the Webflow site as I’ve done. Review the read-only link above.

Pay special attention to 3 areas within the form, on the Home page:

  1. Forms ID (profile-form)
  2. Error Message ID field (error-message)
  3. Success Message ID field (success-message)

Those 3 fields :point_up_2:need to have the exact same name as shown in my read-only link for this to work out of the box (you can customize this later).

Next…

Create a free Integromat account.

Create a new Scenario.

Search for and add a “Webhooks” module:

webook-module

Select “Webhooks” within the Scenario:

webhook-module-in-scenario

Select “Custom webhook” for the trigger:

custom-webhook-trigger

To get started quickly, just set it up like this:

You’ll see this next, but just ignore:

integromat-determine-data-structure

This gives you a URL endpoint:

Copy and paste that into the Webflow Forms “Action” field and then tap the “OK” button on the above “Webhooks” popup:

Copy the Profiles CMS Collection url into the “Redirect URL” field shown below:

Example:

https://form-submit-demo.webflow.io/profile/

(make sure you add the trailering slash / after profile)

Next…

On your Integromat Scenario, tap the “Run Once” button.

Publish the site, visit the live site, submit the form.

The form submission should have shown up in the Integromat Scenario, now you have some data to populate the next Module with.

Back to Integromat, add another Module.

Search for and select “Webflow”, then select “Create Item”, and connect your account.

Setup it up as shown here:

integromat-webflow-setup-2

Add another Module in Integromat.

Search and select “Webhooks”, select “Webhooks Response” and add the Status, Body, and Custom headers as shown here:

Tap on “Save” button within Integromat, and turn on the Scenario.

Back to Webflow.

Open the Home page “settings”.

Scroll down to the Inside <head> tag field under the Custom Code section.

Add: <script></script>

Copy and paste this Javascript code inbetween the 2 <script></script> tags.

Tap the “Save” button

Open the “Profiles Template” under “CMS Collection Pages”.

Follow how I set it up via the read-only link.

Be sure to bind the Profiles CMS Collection’s Company field to the Text Block element.

Publish the site.

Open the live site.

Fill out the form.

:fire:

That may have appeared a bit long and arduous. But the reality is when I set this up I simply…

  1. Have Integromat duplicate this scenario for me.
  2. Copy & paste the Webflow form to a new project.
  3. Copy & paste the Javascript code to a new project.
  4. Then customize for its new needs. This is fast.

It’s super simple once you get going with it :sunglasses:

Also have a step-by-step video screencast:

10 Likes

This is rad, thanks for taking the time to put this together :metal:

2 Likes

Thanks @mikeyevin! Hope this helpful, always love feedback :nerd_face:

1 Like

Quick follow up on this. I added a video walking through, in more detail, how to do exactly this. Find the forum post with video here:

2 Likes

Hi Chris, you’re the best, as always with your detailed advice and videos! One thing that has me stymied (and also this group of folks on another forum thread) is: if you DO use Jotform or Airtable to create a form, it’s somewhat easy to get the data into Webflow’s CMS if you use Integromat / Zapier.

However: a lot of people, myself incl., can only get text fields to import and not images. Any suggestions? If you’re curious for more detail, here’s the forum thread that has not been answered but several people have had the same issue using different tech stacks.

1 Like

I’ll take a peek at that thread and see if I can figure out anything out @misterpibb

Thanks so much, Chris!

1 Like

Thank you SO SO MUCH Chris!! You’re the man!

1 Like

Followup: I was able to use an Airtable form < Integromat to upload multiple images to a single “multi-image” field in my Webflow CMS!

Jotform was complicating things, though I’m still considering Jotform because its form design is way more sophisticated and elegant than Airtable’s. If I can’t figure this out directly from Jotform < Integromat < Webflow CMS I may instead try to have my Jotform results go to Airtable, then Integromat, then Webflow CMS…

1 Like

Hey Chris!

Thanks so much for this. I’m noticing that in my own tests, and in the live demo the redirect isn’t working.

I’m getting an “uncaught” error in the console at this line of code:

let data = JSON.parse(xhr.responseText);

Any ideas?

The live demo isn’t hooked up to an Integromat Scenario, that’s for you to do as per the tutorial above :smirk:

‘Copy and paste that into the Webflow Forms “Action” field…’

Go back through the tutorial above and change that “Action” field from “https://example.com” to your Integromat endpoint and you should be good to go!

Let us know how it works for you…

1 Like

Hello, do you need a webflow site hosting plan like a cms plan or business plan in order to do this?

You can checkout their pricing page: https://webflow.com/pricing

This tutorial is using the Webflow CMS, I don’t know if their free plan comes with the CMS or not.

If it doesn’t you could submit the forms into Google Sheets or Airtable. Then all the services would be 100% free.

Here’s a walk through of that:

Hi @ChrisDrit ,

Thanks for this detailed tips! Do you know how to map Reference fields ?
I am trying to map a Select input but Integromat keeps returning 400

Thanks

hey chris thanks for sharing. But i am facing this error everytime i try this to my client’s project
error
Can you help me with this?

This is fantastic. Thank you for the solution!

1 Like

Thanks @pochat :smile:

I’d forgotten all about this tutorial of mine :grimacing:

So I revisited it and updated it to now work with the new Make (versus Integromat). I’ve hooked up the live demo to a live scenario so you can use it now:

The existing cloneable is also now updated and comes with the live Make scenario hooked up:

https://webflow.com/made-in-webflow/website/Simple-Webflow-Form-Submits-into-the-Webflow-CMS

I’ve also exported the Make (Integromat) blueprint for you so you can drop that into your account and get running with this quickly, download the Make blueprint here.

To import the Make blueprint into your own account…

  1. Create a new Make scenario (a free Make account will work great).

  2. Download the blueprint file from above.

  3. Import it into your Make scenario:

Enjoy!

Your Step-by-Step guide is awesome! It helped me implementing a simple form.
However I have issues when using multiple fields (from a select item). I basically tried your approach using a Webhook in make to watch for a form submission, as well as the Webflow module (which is used here for multiple fields) . Both seem to only receive the last field (called “Teilnehmergruppe” in the screenshots below). The browser however seems to send all four selected fields in the payload.
Any idea what might be wrong here?