How to auto fill the email field with an email asked in a form before the checkout

Design help Ecommerce
1

Hey,

First post ever on a forum i hope i will find help here :slight_smile:

I am building a website where the customers has to fill a form with his informations to personnalise a product.

In order to be able to identify which customer submitted which form, we have to collect their email address.

But at the checkout, the email address is mandatory, and it’s adding a lot of friction to ask for the email 2 times.

So i am trying to auto fill the email field in the checkout using the value of the email that the customer have filled in the form. I hope you understand what i mean.

Thank you so much for your help !!

2

HI Gautier, welcome to the forum.

Where are you saving the data from the first form?

It’s best to assume that the user will navigate around a bit between filling in the first form, and doing their final checkout. Therefore your best approach is to store that data somewhere you can retrieve it, and then retrieve it on the checkout page.

The simplest way to do this may be to use a script with a session-duration cookie. On submitting the first form, you’d save that value (or some key to retrieve it with), into the cookie. On loading the checkout page, you’d retrieve it and set the field.

That’s the basic process you’ll want to start with. If you get stuck, you can share a readonly link to your site and we can have a look.

3

I have a similar problem. I want to autofill a form email field on the user account page of my membership site with the email of the logged in user. Can you tell me how to go about it?

4

Hi @Kalsify , this is what you need.

5

Hi there,
Thank you so much for sharing this! :star_struck:

I’ve just tried using your attributes for pre-filling the user email in the checkout form.
However, the code starts working when I reload the page and then stops. So I can see the user email pre-filled for a second, and then it disappears. Here’s my screen recording link New Recording - 9/1/2023, 8:37:38 PM and the link to my project TradeDork

Is that possible to fix?

Thank you! :pray:

6

Hi Anastasiia, you have another script running that is clearing that field out. If this is the Webflow checkout page, then it may be webflow.js resetting the input values itself.

Check your own scripts first if you have any, but if it’s webflow.js doing the reset, you’d need to set the field manually again after the reset happens. That’s more complicated to detect than it sounds, so one crude way to force it with a timer.

On that page only, you’d do something like this in the before-HEAD custom code;

<script>
function forceEmail(email) {
    let checkCount = 0;
    const interval = setInterval(function() {
        const inputField = document.getElementById('wf-ecom-email');

        // If the input field is empty and email is available
        if (inputField.value === '' && email) {
            inputField.value = user.email;
        }

        // Increment the check count
        checkCount++;

        // Keep checking for 4 seconds after page load
        if (checkCount >= 20) {
            clearInterval(interval);
        }
    }, 250);
}

window.sa5 = window.sa5 || [];
window.sa5.push(['userInfoChanged', 
  (user) => {
    forceEmail(user.email);
  }]); 
</script>

This is untested, but pretty close to what you need. If you need help implementing a solution for this you can DM me here or on the SA5 forum.