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>
1 Like

@JakeP Your solution sounds too good to be true but I could not get it to work on my site. Could you please take a look? Webflow - Apostolic Faith Church.

It is set up on the Rental template page. Here it is published, RV Space.

Thank you.

Hi @iDor!

First of all, the site looks great. Good work.

Break the two form lines into two. Making the input its own.

Old:

New:

@JakeP

Is this correct for the button? This is the code after publishing the form. Should the email be between the quotes?

</div><input type="submit" value="Submit" data-wait="Please wait..." class="button white-outline w-button" mail(rmjjkjafc@gmail.com)="">

Hi @iDor ,

I have reviewed and recreated your code and have it functional. The only issue i found while testing was the date picker was not allowing me to generate anything in that field- so i tested without it.

I recommend testing the code without the datepicker & cms elements. Use whatever email you would prefer and hardcode it into the embed.

I will message you privately to set up a call if you require further assistance.

Hope this helps!
JP