Prefilling Form on Redirect with URL Params & Google Analytics Params
Spencer Taylor
Posted on January 17, 2019
Hello there! I really hope you can help me out. I have created a landing page which has a simple "form" to get a potential user's email and password.
<input id="email" type="email" name="email" placeholder="E-mail Address" style="width:100%; border: 1px solid #eaeaea">
<input id="password" type="password" name="password" placeholder="Password" style="width:100%; border: 1px solid #eaeaea">
<a onclick="redirect()" class="custom-link btn btn-sm startscreening-btn btn-default btn-icon-left btn-shadow" data-title="Sign Up Now" title="Sign Up Now" style="margin-top: 1rem">Create Account</a>
The Create Account button has an onclick
event listener which calls the function redirect
:
<script>
const redirect = () => {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
let param = '';
if (email || password) {
const tempParam = "email=" + encodeURIComponent(email) + "&password=" + encodeURIComponent(password);
param = "?" + window.btoa(tempParam);
}
window.location = "https://app.naborly.com/signup" + param;
}
</script>
On redirect, the values that were encoded in param
are used to prefill a signup form. This code works as intended so far. The issue is that once I try to add utm_source
and utm_campaign
parameters onto the redirect URL I encounter some issues.
- If I append
&utm_source=some_source&utm_campaign=some_campaign
onto the end of the assignment ofwindow.location
The signup form is populated with garbage values
*If I append &utm_source=some_source&utm_campaign=some_campaign
onto the end of the tempParam
assignment the password value is shortened to 4 characters.
Is there anyway to prefill the form and have GA campaign parameters on the same link, or is this a futile effort?
Posted on January 17, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024