[Code] Pre-fill Email Fields using Link Parameters

Article author
Memberstack Team

This feature is super handy when linking from an email to your signup, login, or password reset forms. Since you already know the member's email address it's only kind to pre-fill that email when they land on the page. 

You'll want to add this code to the Footer or <Body> section of any page with a signup, login, or reset password form. 

<script type="module">
import * as queryString from "https://cdn.jsdelivr.net/npm/native-querystring@1.1.1/+esm";

function prefillInputsByDataAttribute(dataAttribute) {
  const params = queryString.parse(window.location.search);
  const elements = document.querySelectorAll(`[${dataAttribute}]`);
  elements.forEach(element => {
    if (element.tagName === "INPUT") {
      element.value = params["ms-email"] || "";
    }
  });
}

window.$memberstackDom.getCurrentMember()
.then(({ data: member }) => {
  prefillInputsByDataAttribute("data-ms-member=email");
});
</script>

The link param should look something like this:

www.yourdomain.com/login?ms-email=email@gmail.com.

Was this article helpful?

Comments

3 comments

Please sign in to leave a comment.