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.
- Log in to your Webflow account and open a project.
- Place a field on the Home page.
Now go to the top right corner of the canvas and:
- Click the gear icon.
- Go to the Create component heading.
- Set the ID to email.
Adding Custom Code
Next, add custom code to the page.
- Go to the left menu and open the Pages panel.
- Locate the Home page and click the gear icon.
- 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.
Comments
0 comments
Please sign in to leave a comment.