Auto populate Webflow form from URL parameter uppercase remove %20

This code allows you to auto-populate a Webflow form on a different page with a URL parameter. It is an extension of an original code posted on the Webflow Forum that covers form email fields, text fields as well as select dropdowns and textarea. The URL parameters may be passed as lowercase variables such as ?name=glenn (becoming ‘Glenn’) and then subsequent queries to the form are followed by an &. A full URL string would be something like yourdomain.co.uk/contact?dropdown=selectoption&name=glenn&email=webflow@slickmedia.co.uk&enquiry=text%20enquiry

// auto populate form from url parameter
function getParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); }
Webflow.push(function() {
// Auto-populate form fields based on query string
$('input:text[name=name], input[type=email], select[name=treatment], textarea[name=enquiry]').each(function() {
/// take the param and make uppercase from (this.id);
var paramValue = getParam(this.id).replace(/\b[a-z]/g, function(txtVal) {
return txtVal.toUpperCase().replace(/%20/g, " "); // replace %20 with real space
}); // end make each word uppercase and remove %20
if(this.value == "" && paramValue != "") this.value = paramValue;
// show in console
console.log(paramValue);
});
});
// usage
// ?dropdown=selectoption&name=glenn&email=webflow@slickmedia.co.uk&enquiry=text%20enquiry

Remember that you must give your respective form elements the correct ID to target. For example, the ID for the email is ’email’ (case is important) and that is shown in the URL query ’email=’. Typically the best way to target a specific form element is also by its ID (aka ‘name’) such as textarea[name=fieldID].

If you have a space in your query it will automatically be replaced with a %20 and the code will, in turn, replace this with a new space.

About the Author
auto populate webflow form from url parameter Auto populate Webflow form from URL parameter uppercase remove %20 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.