How to use a Form to collect/record data fields?

I would like to use a Webflow Form to collect and store field values for users for a SaaS application. Here are a couple of other site examples that illustrate what I’m looking to do with Webflow Forms:

Jira:

Facebook:

However, with Webflow Forms, upon submitting/saving the fields disappear and a success/error message shows. Instead, I’d like to save the values and have the fields/values to remain after saving. I.e., no success or error message. What is the best way to achieve this functionality.

This is what’s default in current state:

But this is an example of what I’m looking to do:

Hi Amir,

Webflow does not [yet] have any concept of a User, therefore you have no secure login capability, no accounts, and no way to attach saved data to a specific person. Anything you save / load will be tied to the device, and will accessible to anyone who can use that device. I’ll trust you’ve considered PII laws, and your use cases well.

That said, the mechanics of saving and loading form data are pretty straightforward.

  • Build your form, and give it a unique ID
  • Avoid a SUBMIT button, or any form destination config
  • Add a regular button, which triggers some javascript
  • Add the script needed to save the form data to the browser’s localStorage
  • On page load, the script needed to populate the form from localStorage.

Here’s a demo of that save / load script.

That’s a somewhat non-standard approach, and not just for Webflow.

If instead you’re okay with submitting the form and then redirecting the user to another page displaying everything they just submitted (without it being an actual form) then it’s fairly straightforward.

Otherwise you’ll need some coding hacks, one of which was already mentioned.

Adding further to @ChrisDrit 's notes- a solution like this MIGHT make sense for e.g. saving some complex search settings on a real-estate site, so that the user doesn’t have to keep entering them on each return visit.

Any other scenario, you’re really needing to get that data back to your SaaS server so that you can do something with it. Otherwise, your website is nothing more than a post-it note, that only your user can see.

If you want to receive that data and do something with it, that form has to post the data to you for storage. If you want the user to be able to view and update that data after submission, you need user accounts, membership, login, etc. which you’ll need to add through Memberstack or Webflow’s upcoming Membership features.

This is SUPER easy to do with Memberstack - just add some custom user fields, hook up your form, and voila!

I actually already am using Memberstack to manage users and signups. :slight_smile:

Thank you! My site does have members and I am looking at Zapier Integrations with Airtable to store data. The issue is that only Form Submissions can push data to Airtable via Zapier.

I am looking at Zapier Integrations with Airtable to store data. The issue is that only Form Submissions can push data to Airtable via Zapier.

This is very helpful. Thank you so much!

Why not simply do as Duncan suggested then and allow Memberstack to handle your form challenges for?

There are many other creative ways.

Now that it’s understood you’re using Memberstack, you should just jump on their support forums, they have their employees helping people with specific problems like yours and can get it worked out for you.

In the mean-time you can also look through some tutorials & screencasts:

Getting data into Airtable:

Using Memberstack creatively:

Plus a ton more:

You can also use webhooks to get form data into Airtable directly. We wrote a post on that here: How to (Instantly) Send Webflow Form Submissions to the CMS