How do you send a native Webflow form submission directly into the CMS?
Unfortunately you can’t
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
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
(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)
Here’s a quick overview…
Submit a form on a Webflow site:
The form is submitted in the background to Integromat:
Integromat receives the form submit:
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:
The site visitor is redirected to their CMS Template Page via the
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
- Read-only project
- Clone it
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:
- Error Message
- Success Message
Those 3 fields 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).
Create a free Integromat account.
Create a new Scenario.
Search for and add a “Webhooks” module:
Select “Webhooks” within the Scenario:
Select “Custom webhook” for the trigger:
To get started quickly, just set it up like this:
You’ll see this next, but just ignore:
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:
(make sure you add the trailering slash
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:
Add another Module in Integromat.
Search and select “Webhooks”, select “Webhooks Response” and add the
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.
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.
That may have appeared a bit long and arduous. But the reality is when I set this up I simply…
- Have Integromat duplicate this scenario for me.
- Copy & paste the Webflow form to a new project.
- Then customize for its new needs. This is fast.
It’s super simple once you get going with it