▼
Streaming live at 10am (PST)

Fill field w/ Local Storage [Help]

Design help Custom code
#1

Hey everyone, on our site we store the email from the first form submitted in our sign up process, i’m trying to pull that email and input it into a field on a form later on in the sign up process.

The email is being stored just fine, i’m having issues using it though. This is what i’m trying to use:

<script>
document.forms['wf-form-username-password'].elements['email'].value = 
window.localStorage.getItem("email");    
</script>

When I test this though, “undefined” shows up in the field.

I haven’t learned Javascript, just managed to piece the script above together by searching online.

#2

You’re trying to access the email in the local storage even if that information insn’t on local storage yet. Before updating the value of that email field, you need to check if the value exists

<script>
const storedEmail = window.localStorage.getItem("email");    
if(storedEmail) document.forms['wf-form-username-password'].elements['email'].value = storedEmail
</script>

This should do the trick

1 Like
#3

Oo ok I see. Thanks a bunch.

I added your script, maybe i’m still missing something though. It still adds “undefined” in the field.

Here’s a read-only link if that helps at all to diagnose: https://preview.webflow.com/preview/socialflight-tiktok?utm_medium=preview_link&utm_source=designer&utm_content=socialflight-tiktok&preview=a526cb28bb1020dbaa200b059d074d45&pageId=5e168b55b2a3c8529a3df480&mode=preview

The field i’m trying to populate is here: https://tok.socialflight.co/success

Thanks again really appreciate the help.

#4

Now I can see that the problem is occurring when you’re saving to the local storage.

You need to fix the code that saves the email to the data storage:

It needs to be something like:

 var formElement = document.getElementById('wf-form-Name');
    formElement.addEventListener('submit', storeEmail);

    function storeEmail(e) {
        var email = document.getElementById('Email').value;
        window.localStorage.setItem("email", email);
    }

Inside the storeEmail function, you need to give the id for the Email field, not the Id for the Form element. Does that make sense?

1 Like
#5

That fixed it, thanks so much – huge help!

1 Like
#6

Hey @Jeandcc sorry to bug you again. I was wondering if you happened to know how one would show the stored email in text form.

What I want to do is on my thank you page put in something like:

“Thank you, please check your email (EMAIL HERE) to continue the set up process.”

#7

Hey Jack, no worries.

Say you have that message inside a paragraph element.

<p>Thank you, please check your email (<span id="user-email">XXXX</span>) to continue the set up process.</p>

So as you can see, you need to wrap part of that text inside a span and give it an id so it can be targeted by the script.

After that, just add this code to your page:

<script>
const storedEmail = window.localStorage.getItem("email");    
if(storedEmail) document.getElementById("user-email").innerHTML= storedEmail
</script>

Does that makes sense?

#8

Ah nice! Yeah that makes sense i’ll give that a shot! :+1:

1 Like
#9

So i’m using the above script to put in the email field automatically on some forms, but I really don’t even need the potential client to see the email is being carried over to other forms during their sign up process. If I set the display to none will it still submit the email with the form?

#10

Yes, display settings are only for visuals. The functionality will still remain. Feel free to try out out by yourself

1 Like
#11

Ok makes sense thank you. :+1:

#12

Anyone know how i’d store and get two fields? I’m wanting to store the first name and email and pass them along into fields along the process, rather than just the email. Spent about an hour researching it but couldn’t figure it out.

#13

image
image958×884 49.6 KB

It doesn’t get much better than MDN to learn about the web

#14

Yeah I actually had already read that exact page haha. I think my base coding knowledge is too low to understand it correctly. That example shows how to store and get one item.

I’m sure you’re very busy Jean! And you’ve already helped me a ton. I’m satisfied with leaving my reply here for someone that feels like helpin a little deeper.

Hopefully I don’t end up needing any more scripts for this project :stuck_out_tongue:

1 Like