Dynamic content in forms

Hi guys

Just finished another website on Webflow, yay! The only thing that I unfortunately haven’t been able to implement, is to change the form message or content, based on the CMS item where the form is situated. This way, when the website owner gets a mail, he knows from which CMS item page the form was sent.

Is this on the development list by any chance? :smile:

Thanks!

7 Likes

This is a great idea!

Love this idea. I think custom forms and email notifications could really use some supercharging.

This is exactly what I need for my site

In addition, the ability to show different form fields as well. For example, I have a promotion list page which shows different promotions. If the user clicks on one of the items, it takes them to the promotion page with the details. In that page I have a sign up form so the user can sign up for that promotion. Some promotions require the users to enter thei phone numbers, while others might need their addresses. And there are also different options to choose from within the promotion, such as welcome gift A, B, or C, which are also dynamic.

Would love to be able to do this with Webflow CMS

Could not agree more. Forms generally need some love and dynamism!

Knowing what page the form is sent on would be great, but better still would be being able to create a single contact form page and carry some context to it from the referring page (a value from a relevant collection like a contact name or area of interest).

In the meantime, I found this elsewhere on the forum from @cyberdave that lets us hack in the page URL into the form content:

In the embed, paste this code, which will dynamically create the hidden input field called pageURL and save the current url as part of the form data submitted:

In the embed, paste this code, which will dynamically create the hidden input field called pageURL and save the current url as part of the form data submitted:

<script type="text/javascript" language="JavaScript"><!--
document.write('<input ');
document.write('   type="hidden" ');
document.write('   name="pageURL" ');
document.write('   value="' + document.URL + '">');
//--></script>

When the user submits the form, the current url will get submitted.

(From Dynamic form field)

4 Likes

Do you put that in the custom form attributes?

You add an embed component inside the form and paste it in there.

1 Like

@cyberdave Is it possible to use a variation of your script found here to dynamically set an Action URL under Form Settings?

My team uses a POST method that points to unique Pardot URLs on a bunch of duplicated pages. I am currently attempting to move all these pages to a Collection instead so that our Editors can create new pages in the future without an admin needing to go and manually duplicate them.

The only blocker is that each page has a different Action URL, so please advise if you know a way. Thanks Dave.

Best,
Christopher

Edit: Please read the edits below the post first.

I’ve been playing around with this attempting to customize the button’s Action, but I think I might be missing something.


I believe, after research, the following script would go in a custom embed (creating a button)…

Note that my desired CSS button classes are as follows:


Then in custom code for the Collection Template page I believe I need to insert the following…

<script>
function submitButton() {
    document.getElementById("email-form").submit();
}
</script>

Note that my form id is follows:


Now… I’ve done all of this, but am experiencing issues getting it to POST appropriately. The embedded button resembles the original form button I had before and even initiates some sort of submission, but something is mismatched somewhere because my form content isn’t making it to Pardot.

Any and all additional insight into this issue would be appreciated (from anyone). Thanks again.

Best,
Christopher

EDIT: Wooo it works! The issue was that my form field names were not exactly aligned with the External Field Names in Pardot. All the code in my post is correct so feel free to try building custom methods based on the above. Also, if anyone ever comes across this post and wants to know how to get a POST or GET method to work with a custom action link, just tag @ctraver2 and I’ll help you through it. :slight_smile: :100:

EDIT 2: Does not work as well as I thought! The 2.0 tutorial (with working fixes) of this can be found right here.

2 Likes

Need to provide an update correction to my last post. Creating a button with custom Method/Action is not a proper way to accomplish the goal of a dynamic form. You need to create the entire form in an embed element, which I wrote a tutorial on right here.

1 Like