Streaming live at 10am (PST)

Webflow Form: double checking email

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:

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

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.