Streaming live at 10am (PST)

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

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:

7 Likes

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

1 Like

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

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:

1 Like

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