Auto-fill form values based on URL querystring

[samliew (webflowexpert.com)]

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?

• Google Chrome
• Internet Explorer
• Firefox
• Safari

---

Also, feel free to contact me for further code help and/or customization of third-party plugins

[aaronocampo]

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.

[samliew (webflowexpert.com)]

@aaronocampo

Is there anyway to apply the values on the special URL to a specific text element inside the page instead of form values?

Of course. JavaScript can do a lot of things.

[exponent42 (Will Walsh)]

Hi @samliew,

Thanks so much for this.

Is there a way to generate an email URL based on form submission (on another page), then after submission divert to “/trial” page where the email field is already pre-populated based on the URL querystring obtained from the previous page…?

I have tried to accomplish this with Google Tag Manager JS variable looks like this:

But unsuccessfully “defined”:

Essentially, do you know how to catch the email from your tutorial on here and post it on another page email field?

Thanks
Will

[samliew (webflowexpert.com)]

http://sandbox-666666.webflow.io/form-success-url-with-querystring

[exponent42 (Will Walsh)]

Thanks @samliew.

Having trouble directing the user to /trial page after inserting the script into custom code.

I have input the correct link into custom code like your example on the designer.

Any advice?

https://preview.webflow.com/preview/seen-2-0-website-dev-4-5-obsession?utm_source=seen-2-0-website-dev-4-5-obsession&preview=94b5ce633a949e40231f300914bff822

https://www.useseen.com/

[samliew (webflowexpert.com)]

Redo. You either need to change the ID in the code to match your field’s ID or use my latest code

[exponent42 (Will Walsh)]

It’s still not working unfortunately - I have tried all different combinations on the script to match the field and code IDs… Can I pay you to take a look? Thanks

[samliew (webflowexpert.com)]

You only need to change the email part at $('#email').val(). The rest remains the same.

Check the link again…

[exponent42 (Will Walsh)]

Still nothing @samliew, here’s what the script looks like:

<script>
$(document).ajaxStop(function() {
  location.href = 'https://useseen.com/trial?email=' + $('#trial').val();
});
</script>

“trial” is the name of the email field - I renamed it

[samliew (webflowexpert.com)]

Looks correct to me now. Probably an error caused by another script. Can you click on the link and try the new code?

[exponent42 (Will Walsh)]

@samliew Sorry I only just realised you updated it - I will try that now, one moment.

<script>
// This ensures the form has been received by the server
$(document).ajaxStop(function() {

  // Get all form values and convert them to URL-safe key-value pairs
  var string = '?' + $('form').find('input, select, textarea').map(function() {
var key = encodeURIComponent((this.name || this.id).trim());
return key ? key + '=' + encodeURIComponent($(this).val()) : null;
  }).get().join('&');

  // Redirect to this URL with the value of the form fields appended to the end of the URL
  location.href = 'https://useseen.com/trial' + string;
});
</script> 

I have input this and still no luck unfortunately Sam… IDK - is the above correct?

Love the form-find solution…

[exponent42 (Will Walsh)]

Hi @samliew, Can I pay you to take a look for a moment of your time? Just to see?

Still haven’t been able to resolve. I can’t seem to figure what script is cancelling it out.

Will

[samliew (webflowexpert.com)]

I see you are including a second version of jQuery on your site. Webflow already includes the latest v3 automatically in the footer, so any other jQuery you load will conflict with what has already been set.

Simply remove all jQuery from your site (and move all custom code into the page/site footer respectively if they rely on jQuery).

[exponent42 (Will Walsh)]

Brilliant! It worked Sam!

Thanks so much.

Will

[exponent42 (Will Walsh)]

Ok @samliew almost there.

This is what my URL looks like on trial page with successful querystring:

I’ve inputted the code in your first post to pull the email and input in to form field, however it doesn’t seem to work. Am I doing something wrong?

Thanks
Will

[exponent42 (Will Walsh)]

Hi @samliew I managed to figure out a solution.

Thank you very much for your help. So valuable - if you have a Patreon account I’d love to pay forward my thanks - at least a coffee.

Thank you.
Will

[samliew (webflowexpert.com)]

Good to hear you got the issue resolved, there is no need to pay for this

[exponent42 (Will Walsh)]

Thanks @samliew I spoke too soon!

I’m not experienced with code - in your script above that pulls the email from querystring, what parts of the code do I need to replace with our field ID (or something else):

Again, thanks in advance

[samliew (webflowexpert.com)]

You shouldn’t have to do anything, the URL parameters are built from the form field names, so just ensure they are named correctly.