How do you send a native Webflow form submission directly into the CMS?
Unfortunately you can’t
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
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 slug
.
Example:
https://form-submit-demo.webflow.io/profile/cheese-factory
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
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:
- Forms
ID
(profile-form
) - Error Message
ID
field (error-message
) - Success Message
ID
field (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).
Next…
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:
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:
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.
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.
- Copy & paste the Javascript code to a new project.
- Then customize for its new needs. This is fast.
It’s super simple once you get going with it
Also have a step-by-step video screencast: