[Code] Prefill Email from a Lead Capture Form to a Memberstack Signup Form

Some companies, like Netflix, use a nifty UI flow to quickly capture emails. A simple landing page collects the email address. After the user clicks the Get Started button, the site displays the Signup page with the email address field auto-filled.

In this article, I'll show you how to build the same flow. You'll add an email form to your Home page, and then redirect to a Memberstack signup form with the email field prefilled.

Configuring the Email Form

The first step is to configure an email form on the Home page.

1. Log in to your Webflow account and open a project.
2. Place a field on the Home page.

Now go to the top right corner of the canvas and:

1. Click the gear icon.
2. Go to the Create component heading.
3. Set the ID to email.

Adding Custom Code

Next, add custom code to the page.

1. Go to the left menu and open the Pages panel.
2. Locate the Home page and click the gear icon.
3. Scroll down to the Before </body> tag.

• Add the following script to the </body> of the page where your lead capture form is:

<script>
const form = document.querySelector('email-form');
form.addEventListener('submit', (event) => {
  const email = document.getElementById('email').value;
  const actionUrl = '/signup?email=' + encodeURIComponent(email);
  form.action = actionUrl;
});
</script>

• And add the following script to the </body> of the page where your signup form is:

<script>
window.onload = function() {
  // Get the value of the "email" parameter from the URL
  const urlParams = new URLSearchParams(window.location.search);
  const email = urlParams.get('Email');

  // If the email parameter is not empty, set it as the value of the email field in the signup form
  if (email) {
    console.log('Pre-filling email field with value:', email);
    const emailField = document.getElementById('email');
    if (emailField) {
      emailField.value = email;
    } else {
      console.log('Could not find email field with ID "email"');
    }
  } else {
    console.log('No email parameter found in URL');
  }
};
</script>

That's it.

Now you know how to create a UI flow that captures an email on the Home page and auto-fills the email field on the Signup page.