Webflow Form: double checking email

Design help Custom code
1

Hi there !

Is there a way within webflow or via custom code, to check if a user entered his email adress correctely ?
My idea is to put two webflow email fields, so that the user needs to enter twice the right email address.

I know it’s kind of stupid but I set up a website for my local town theater, and I have over 300 reservations a month made through my dynamic contact form. And some of the client successfully typed their email address wrong… resulting in not getting their confirmation email… :slight_smile:

Thank you as always for your help !
Anthony :sunny:

2

Hi Anthony, I have the same requirement - did you resolve this?

3

Hello @Stones ,

Yes you could do it with javascript. Either hookup a keyup listener that verifies every time the user types the second email checker if it matches with the first email input field. Or you could hookup the check on the submit event.

Here is a quick codepen for you.

HTML:

<input type="email" id="email" name="email" placeholder="your email"><br>
<input type="email" id="email-check" name="email" placeholder="your email again"><br>
<span class="email-feedback"></span>

Javascript:

document.addEventListener("DOMContentLoaded", () => {
  // globals
  const log = console.log,
    email = document.getElementById("email"),
    emailCheck = document.getElementById("email-check"),
    emailFeedback = document.querySelector(".email-feedback");

  // on "emailCheck" keyup check if it matches "email" input
  emailCheck.addEventListener("keyup", (event) => {
    let emailValue = email.value,
      emailCheckValue = emailCheck.value;
    
    if (emailCheckValue !== emailValue) {
      log("email doesn't match");
      emailFeedback.textContent = "email doesn't match"
    } else {
      log("yay, email matches");
      emailFeedback.textContent = "yay email seems legit"
    } // end if
    
  }); // end keyup listener
}); // end DOM loaded

PS: this script doesn’t prevent the form from sending, it just shows the user if the emails matche or not. To prevent the form from sending, we’d have to hookup the emails input values on “submit” event listener.

4

Hey @anthonysalamin Anthony, this works great. Thanks for sharing. I wonder if you could tell me how to change the colour of the text in email-feedback depending on the result. i.e red if they dont match, green if they do? IS there also a way to change the opacity of another element wrapping this text element to make it hide and show a tick or cross icon for example.
Thanks

5

Hi @Lukas_Stewart ,

sure, you just need to specify an emailFeedback.style.color statement for each case.

Here is the javascript code:

document.addEventListener("DOMContentLoaded", () => {
  // globals
  const email = document.getElementById("email"),
    emailCheck = document.getElementById("email-check"),
    emailFeedback = document.querySelector(".email-feedback");

  // on "emailCheck" keyup check if it matches "email" input
  emailCheck.addEventListener("keyup", (event) => {
    let emailValue = email.value,
      emailCheckValue = emailCheck.value;

    if (emailCheckValue !== emailValue) {
      emailFeedback.textContent = "email doesn't match";
      emailFeedback.style.color = "red"; // 🔴
    } else {
      emailFeedback.textContent = "yay email seems legit";
      emailFeedback.style.color = "green"; // 🟢
    } // end if
  }); // end keyup listener
}); // end DOM loaded

Here is the codepen:

6

Anthony, a trick I’ve used with some success is that when the first email is entered, I have an input event handler which is converting that a simple regex, and applying it as the pattern attribute of the second input.

That solved a few issues for me-

  • Makes the field invalid unless it matches exactly
  • Prevents the browser from submitting the form
  • Eliminates other validation JS, unless you want it ( e.g. for your green/red indicators )
  • Has a built in message in the form of the title attribute, as in “Both emails must match exactly”

image

It’s crude, but I like the fact that it leverages the browser’s own validation mechanisms directly.

1 Like
7

Thank you! Exactly what I was looking for. Appreciate you taking the time!

1 Like