[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

  • Comment author
    Massak Chrait

    Memberstack Team

    If the snippet doesn't work, add: 

    <script type="module">

    In your opening script :)

    2
  • Comment author
    Duncan Hamra

    Thank you Massak Chrait 🙏

    btw - how did you get the code element to appear in your comment? I've been struggling to figure that out! haha 

    0
  • Comment author
    Massak Chrait
    • Edited

    Duncan-Hamra

    I just clicked on the code block icon in the comment editor... but it seems that it doesn't work anymore somehow 
    0

Please sign in to leave a comment.