Create multi-step form link form submissions to Webflow CMS collection

Community resources General
1

Hi fellow experienced webflow users,

I need some help here. I would like to develop an app using Webflow. In my app, I will have multi-step form that captures data from my users. I would like this data to be captured (my understanding is default they will email you the form submissions, and I have to manually download into csv and import into CMS collection). How can I make this easier such that all form submissions will be automatically added onto the CMS collection?

Can anyone advise me on how I can link up the form submissions directly as an entry on the CMS collection or direct me to the resource to watch this on Webflow University?

Appreciate the help.

2

Welcome @fbc89 :wave:

Oh gosh, run (very fast) away from that idea :smile:

So you have 2 distinct issues here:

  1. How to setup a multi-step form in Webflow.
  2. How to get form submissions into the Webflow CMS.

For issue number 1, there are many solutions, I’ll briefly outline one of them at the end. Let’s start with issue number 2.

If you use native Webflow forms unaltered, yes, they capture form submissions for you. But Webflow is awesomely flexible in that you can very easily bypass that.

How to get form submissions into the Webflow CMS.

The simplest way is to handle the form submissions yourself:

Screen Shot 2023-05-19 at 8.34.13 AM
Screen Shot 2023-05-19 at 8.34.13 AM2632Ă—1558 230 KB

Adding a url into the action field bypasses all of that and you get to capture that form submit.

The simplest way to capture the form submit and add it to the Webflow CMS is through Make (Integromat).

  1. Setup a native Webflow form.
  2. Submit the form to Make.
  3. Make takes the form submission and creates a CMS item via the Webflow API.
  4. You respond with a success message to the user.

Here’s a screencast walking through exactly that:

What’s missing is the module to submit the form submission into the Webflow CMS.

Here’s a screencast walking through how to do that with Webflow + Zapier:

I’d suggest Make instead, but that’s a good example. In Make, just search for “Webflow” and choose the create cms item option.

How to setup a multi-step form in Webflow.

So many approaches!

The simplest is to build off of the above approach.

When Make (Integromat) sends a success response back to the users web browser, you tell the web browser to redirect to a new page.

That new page has step 2 of multi-step form. That form submits exactly like above, it stores the data in the CMS and if you have a step 3, Make tells the browser to redirect to it.

Hope that helps!

1 Like