Auto-fill form values based on URL querystring
An example of how this could be used is if you want to personalize the URL for each customer, to auto-fill their name and email like survey forms.
Now, you can have special URLs that auto-fill form values like this:
Top Webflow Expert Web Developer
This is the original form without values in the URL:
Top Webflow Expert Web Developer
Steps:
1) Paste this in Project Dashboard > Custom Code > Footer Code:
<script>
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 (text fields only) based on query string
// For non-text fields like dropdown/radio/checkbox, please contact me for custom development (http://webflowexpert.com)
$('input:text, input[type=email]').each(function() {
var paramValue = getParam(this.id);
if(this.value == "" && paramValue != "") this.value = paramValue;
});
});
</script>
2) How to set up the URL?
Just put a question mark ? after the URL, followed by key=value pair (separated by & if more than one Key-Value pair). Any “scroll-to” IDs including the hash symbol #my-form, has to be moved to the end of the URL.
The key will be the ID of the form field (case-sensitive), value will be whatever you want it to be. For special characters that are illegal in URLs like spaces, @, etc., you have to substitute them for codes.
A simple way to ensure the value is URL-friendly, is to open the browser console, then type this:
encodeURIComponent("test@example.com")
Then use the result (excluding the quotes) as the value:
test%40example.com
Screenshot:
Here is a list of common symbols that you can’t use in URLs, and their encoded substitute:
(space) %20
@ %40
+ %2B
? %3F
# %23
2.1) How to open the browser console?
Also, feel free to contact me for further code help and/or customization of third-party plugins
