DEV Community

Spencer Taylor
Spencer Taylor

Posted on

Prefilling Form on Redirect with URL Params & Google Analytics Params

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 of window.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?

Top comments (0)