Create an Email Confirmation Field in Your Gator Form

Often, the most important information in a form submission is the email address of the user who’s trying to contact you through the form on your site.

It’s a good practice to include an email confirmation field in the form. By typing the email address twice, the users minimize the risk of providing a wrong email address.

If both email addresses differ from each other, the email confirmation field will get a red border, that way the user is aware of the problem.

In this tutorial, we’re going to add an email confirmation field to the form we created in this tutorial.

Step #1 – Check the email field of the form

  • Click the Gator Forms link on the left and edit the form.
  • Click the Fields tab.

  • Click the Edit icon of the Email field and make sure this value is marked as required.

Step #2 – Create the email confirmation field

  • Click the +Add row button on top of the form builder.
  • Drag and drop a Text input field inside it.

  • Position this field under the Email field.
  • Click the Edit icon for this field.
  • Add a proper label and an alias.
  • Click the blue Save on top of the screen.

  • This alias will be the selector within the JavaScript code, so always pay close attention that this alias matches the selector in the JavaScript code.

Step #3 – Add the JavaScript Code

  • Click the Location tab.
  • Scroll down until you find the Advanced button and click on it.
  • Keep scrolling until you find the JavaScript events.
  • Paste this code in the “on load event” textbox.

$(this.options.selector+”_field-email_confirm”).attr(“equalto”, this.options.selector+”_field-email”);
$(this.options.selector+”_field-email_confirm-lbl”).append(‘<span class=”pweb-asterisk”>*</span>’);

The first line checks if the value of email confirmation field matches the value of the email field, while the second line adds an asterisk to the label of the email confirmation field.

  • Click the Save button on top once again.

Step #4 – Test the form

  • Go to your website and test the form.
  • Type a random email address in the email field and a different one in the email confirmation field.
  • The email confirmation field gets outlined in a shade of red.

  • This is all handled through JavaScript. There is no need for a server request.
  • The red outline goes away if you correct the address and make them match.

Conclusion

The most important piece of data in a submitted form is the email address. You should always include this type of confirmation method in your forms. Thanks for reading!

in EmailsFields

Related Articles

Start today!

[i]
[i]