Streaming live at 10am (PST)

Auto-fill form values based on URL querystring


#1

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:

https://samliew.com/webflow-expert?Name=test&Email=test%40example.com#request-quote

This is the original form without values in the URL:

https://samliew.com/webflow-expert#request-quote

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


How to pre-fill form input fields at page load
Passing variables in a URL - (Webflow Hosting)
Pre-Populate Users Auto-Fill Information
Is it possible to create a link that populates my form's subject field?
Multi-page / multi-step signup form
#2

Hello @samliew

I was looking for something exactly like that! Is there anyway to apply the values on the special URL to a specific text element inside the page instead of form values?

Thanks in advance.


#3

Of course. JavaScript can do a lot of things.