Streaming live at 10am (PST)

Creating a dynamic form from scratch

So.
You have a need for your form to take in dynamic information from your CMS, such as but not limited to, making the send button send to a specific email (and not the email that you put in under project settings - forms).

Well, I hope the information below will help you solve that nasty problem. I have pasted the code I used in my solution at the bottom of this post. I recommend using it for reference.

This solution only works if you are in a CMS-created page.

Step One -

Generate the form you want using the pre-built form tool in Webflow. Edit everything as if the form was completely finished (including hovers, success messages, fail messages, etc).

Once you have the form you want, publish your site to the staging domain (.webflow.io).

Step Two -

Head over to your newly staged domain and enter your developer tools (apple: Inspect Element // Google Chrome: Inspect).

Screen Shot 2021-02-18 at 7.12.13 PM
Head down to your specific section where the form is and copy the div that highlights the entire form section.

Step Three-

You now have all the code you need to make your dynamic form. Head back into your Webflow designer and hide your current form and place a new embed element. You can then paste the code you have copied.

You should see the full form now. Here is where you can begin to add your CMS elements. You can add your CMS elements by using the (+add field).

If your main goal was just to create a dynamic submission button, you can go to your code section “submit” (should be at the bottom of your copied code). After the “button-submit-w-button” section you can add:

mail(YOUR_CMS_EMAIL_ELEMENT)

You can create a dynamic email element from your CMS dashboard.





My Solution
Do not just copy and paste this code expecting it to work. There are two elements where I added my CMS inputs (these are both in all caps, and use the BEM format).

<form id="email-form" name="email-form" data-name="Email Form">
<input type="hidden" name="property-name" value="YOUR_CMS_ELEMENT"/>
<input type="text" class="text-field w-input" maxlength="256" name="name" data-name="Name" placeholder="Name" id="name">
<input type="tel" class="text-field w-input" maxlength="256" name="Phone" data-name="Phone" placeholder="Phone" id="Phone" required="">
<input type="email" class="text-field w-input" maxlength="256" name="Email" data-name="Email" placeholder="Email" id="Email" required="">
<textarea placeholder="Hello, I am interested in…" maxlength="5000" id="Message" name="Message" data-name="Message" class="text-field-large w-input">
</textarea><input type="submit" value="Submit" data-wait="Please wait..." class="button-submit w-button" mail(YOUR_CMS_EMAIL_ELEMENT)>
</form>