I’ve got a site with articles (~ blog posts) built with CMS, and there is a Submission Form below EACH article.
So, people can submit an inquiry that may relevant to that specific article they are currently visiting.
How to allow Webflow Forms to get the current article’s URL? The goal is to let our side being able to receive emails with that URL, so that we can better follow-up the case.
Thank you very much!
Custom code is the solution. Look at this post for guidance. There are others available as well.
you could use a little bit of javascript to capture the current URL and inject it into a hidden input field which would be in your Webflow form.
the HTML input field could look like this:
<input type="hidden" id="url" name="url" value="">
The JavaScript could look like this:
(function getURL() {
let input = document.getElementById("url");
let url = window.location.href;
input.value = url;
})();
Codepen:
https://codepen.io/anthonysalamin/pen/xxbVONw?editors=1010
Thanks a lot for the codes.
Where should the Javascript be placed? Setting > Custom Code > Header Code?
And how about the HTML? Place inline?
The javascript should be wrapped within its tags and placed I would say at page level, inside the custom code section and before the end of the tag.
The HTML should simply be an Webflow embed, placed somewhere inside your form. It wont be visible since the input has a type “hidden”.
Hey! I found an easier solution.
<select id="Post-Name" name="Post-Name" data-name="Post Name" class="w-select">
<option value="[YOUR-DYNAMIC-POST-NAME]">Post Name</option></select>
Replace [YOUR-DYNAMIC-POST-NAME] with your dynamic content.
Example:
Make sure you hide the Embed element (display: none;)
The following code is bad practice (having multiple IDs with the same name) but this code will work for either IDs or classes on your inputs.
<script>
(function getURL() {
const inputs = document.querySelectorAll('#url')
for (var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
let url = window.location.href;
input.value = url;
};
})();
</script>
You can paste this is in the footer code from your website dashboard…because you’ll want to make sure the elements exist before attempting to iterate through them.