How To Create Dynamic Form Content

Community resources Webflow Tips
1

Hello everyone. I will show you how to insert dynamic content from a CMS collection anywhere in a form using Webflow’s Embed element. In this example, I show you how to create a post method with a dynamic action URL (pulled from CMS). This specific example was used to send form data to Pardot, but you can use the code in your own way to insert dynamic CMS data into your for

  1. Drag and drop a Form Field element into your site.

  2. Assign class, id, and names to the Form, the Field Label, Text Field, and the Submit Button.

  3. Style these four elements however you want your final form to look.

  4. Delete the form (Yes delete it, don’t worry - you are about to embed a new custom one with the same style).

  5. Now drag and drop an Embed element where you want your form to appear on your site.

  6. Paste the following code into the embed element, replacing the bold items with the Class names you assigned in step 2:

     <script type="text/javascript" language="JavaScript"><!--

 //Creates the form wrapper that will hold the form contents
 document.write('<form ');
 document.write('   class="YOUR-FORM-CLASS-NAME-HERE" ');
 document.write('   name="YOUR-NAME-HERE" ');
 document.write('   data-name="YOUR-NAME-HERE" ');
 document.write('   id="YOUR-ID-HERE" ');
 document.write('   method="post" ');
 document.write('   action="URL_FROM_CMS_HERE">');

 //Creates a label
 document.write('<div ');
 document.write('   class="YOUR-LABEL-CLASS-NAME-HERE">');
 document.write('<label> ');
 document.write('   Label');
 document.write('</label> ');
 document.write('</div> ');

 //Creates a form input field
 document.write('<input ');
 document.write('   type="text" ');
 document.write('   class="YOUR-INPUT-CLASS-NAME-HERE" ');
 document.write('   name="YOUR-NAME-HERE" ');
 document.write('   id="YOUR-ID-HERE" ');
 document.write('   required>'); //remove this if the field doesn't need to be required, and move the > to the line above in the same spot

 //Creates the button to submit
 document.write('<input ');
 document.write('   type="button" ');
 document.write('   class="YOUR-BUTTON-CLASS-NAME-HERE" ');
 document.write('   onclick="submitButton()" ');
 document.write('   value="Submit">');

 //Closes the form
 document.write('</form> ');
 //--></script>

  7. Go to the custom code of the current page and insert this code into the Head section:

     <script>
 function submitButton() {
     document.getElementById("YOUR-FORM-CLASS-NAME-HERE").submit();
 }
 </script>

  8. Publish your site and test your form.

You can now use this custom code to insert CMS elements into any part of a form, including anything from a simple label name to the button method.

Best,
Christopher

4 Likes
2

Hi there,

I am trying to follow these instructions because I’d love to be able to do this but I don’t know enough about embeds and the class, name and ID fields to figure it out. I’m confused what the name, data-name and id means. When you say add a name, do you mean like a class? or something different?

Also trying to figure out how exactly the cms data gets put in the form, and then the most important part for me is actually when it is posted to know which page the form was submitted on.

Thanks!

Read only link: Webflow - Kill the Bill

1 Like
3

Did you figure this out?