How to create an Edit Form: Populating Webflow form fields from the CMS

This part 4 of submitting a Webflow Form into the CMS
 

“A question that is hurting my brain. It’s about the Webflow CMS and Webflow forms… I can’t get my head around solving this. I hope someone is able to shine some light on it.”

Considering this the walk through shining light on a solution to your problem 😄

For this screen cast, I’ll pick up where we left off on part 3 and show you how to create a full-blown Edit Form. We’ll pre-populate Webflow form fields with data from your Webflow CMS and then update the CMS with your edits.

These are all things you CANNOT do natively within Webflow

Before getting started, you may want to review the entire series. It’ll go over the basics of setting up a Webflow form, submitting it to the CMS (part 1), layering in member logins on top (part 2), and referencing the logged in member with each new form submission (part 3).

 

Let’s build it now:

 

Videos can be hard to follow…

If you add your you'll get my infrequent newsletter and I'll include access to:

  • All of the sharable Zapier zaps
  • The url for the live site (give it a test drive, see how it works)
  • This webflow project (click through it yourself to see my settings)
  • The step-by-step PDF cheat sheet I used to create this video (it details each and every step in the process in writing)
If you've already subscribed in the past,
I'll just send you instant access 😉
 

 

Grab the Comments Template code:

<input type="hidden" name="Member Id" ms-data="id">
<input type="hidden" name="Comment Id" value=''>

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
    $('#Name').val('');
    $('#Comment').val('');
  });
</script>

 

Grab the Members Template code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $(document).on('submit', 'form', function() {
    setTimeout(function() { window.location.replace("/"); }, 3000);  
  });
});
</script>