How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
- Store the email in localStorage after the first form's submission using JavaScript and accurate ID selectors.
- On the later form page, retrieve the stored email from localStorage and pre-fill the input field using DOMContentLoaded to ensure elements are available.
You're trying to capture a visitor’s email from the first Webflow form submission and automatically pre-fill it in a later form. If your current script is returning "undefined," the issue is likely due to incorrect variable storage/retrieval or that the script is running before the value is available.
To fix this, follow these steps:
1. Use Local Storage to Save the Email
- After the first form is submitted, you need to store the email in the browser's localStorage. This preserves the value even across page reloads or visits to other pages.
- Add a small script at the bottom of your first form’s page, just before the closing
</body>tag (inside an Embed element):
Example:
```javascript
<script>
document.addEventListener("DOMContentLoaded", function () {
var form = document.querySelector("#emailCaptureForm"); // Replace with your form’s ID
if (form) {
form.addEventListener("submit", function (e) {
var emailInput = form.querySelector("input[type='email']");
if (emailInput && emailInput.value) {
localStorage.setItem("storedEmail", emailInput.value);
}
});
}
});
</script>
```
- Important: Make sure the
#emailCaptureFormmatches the ID of your form element in Webflow.
2. Retrieve and Pre-Populate the Email Field on a Later Page
- On the second form page (e.g., sign-up page), place this script at the end of the page using an Embed element:
```javascript
<script>
document.addEventListener("DOMContentLoaded", function () {
var savedEmail = localStorage.getItem("storedEmail");
if (savedEmail) {
var emailField = document.querySelector("#emailFieldLater"); // Replace with your field’s ID
if (emailField) {
emailField.value = savedEmail;
}
}
});
</script>
```
- Be sure the
#emailFieldLatermatches theidof your email input on the second form. - Webflow often uses autogenerated IDs unless you manually set them. Use the Custom Attributes section in the element settings to assign a consistent
id.
3. Common Reasons Why "undefined" Appears
- Incorrect selector: If the script can’t find the input field,
emailInput.valueoremailField.valuereturnsundefined. - Script runs before form/input loads: Use
DOMContentLoadedto delay script execution until the DOM is fully available. - Value not stored: Make sure the email is actually entered and the first form is submitted before testing the second form page.
4. Test Your Forms
- Fill out and submit the first form with a working email address.
- Navigate to the page with the second form.
- Make sure the email field is filled automatically with the entered value.
Summary
To transfer an email from one Webflow form to another, store the value in localStorage on the first form’s submission and then retrieve it on the second form page using JavaScript. Double-check that your form and input field selectors (#id) are accurate and that the email value is properly submitted before testing on the next form page.
