Welcome back, my friend! In this tutorial, you’ll learn how to add mask to contact form in Divi theme. You’ll see in this post a quick way to add a mask to any field that you need inside your contact form.

All you need is a small sized jQuery plugin and a few lines of code to make it work. Ready to learn a new code trick? Follow along with this tutorial. Hope you like it!

How to add mask to contact form

Preview

Layout

First, create a row using the Divi builder and add a Contact Form Module. You’ll have 3 standard fields already set – Name, Email and Message.

Let’s try the mask in a custom Telephone field. Click Add New Field and put Telephone in the Field ID and title.

Awesome! Our layout is all set.

The important about this post is to understand how the mask with jQuery works. Then, you can use the way you need it when you need it.

HTML

Second, you’ll need to quick install a jQuery plugin – don’t worry, it’s pretty lightweight ~ 8kbs. Add the following jQuery code inside Divi > Theme Options > Integration > Add code to the < head > of your blog:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

Use CDNJS or the developer GitHub page to find the link to download files or copy the CDN URL.

JS

Third, after correctly installing the jQuery Mask Plugin add the following jQuery code inside Divi > Theme Options > Integration > Add code to the < head > of your blog:

jQuery(document).ready(function( $ ){
//Add mask to contact form
$("#").mask("+9 999-999-9999");
});

Finally, just change the # to the specific field element ID. You’ll need to use the Google Chrome Inspect tool to find the input ID of the Telephone field.

Example: $(“#et_pb_contact_telephone_1”).mask

You can target classes too. In this tutorial you used the ID, but you can target classes and IDs easily with jQuery.

Check out the YouTube video tutorial to better understand how to check the DOM to find the ID.

That’s it. You can reload the contact form page to see if the mask is working the way you expected.

Conclusion

How did you like this tutorial about how to add mask to contact form?

This tutorial helps to better understand how to install jQuery plugins inside WordPress and Divi theme websites.

And of course, using every day the Inspect tool helps understand lots of concepts and learn new skills faster.

Are you going to start using this masks in your contact forms?

Send me an email or leave a comment. I’ll gladly appreciate it.

See ya!