How to put a phone mask on an Elementor form

How to Add a Phone Mask in Elementor: A Practical Guide

To add phone mask in elementor form is a simple and efficient solution to improve the usability of your forms. With a small amount of JavaScript code and a quick configuration in the form field, you can avoid errors while filling it out and ensure a more professional appearance.

In this article, we'll show you step-by-step how to apply a phone mask in Elementor using jQuery. The process is quick, secure, and can be done without installing additional plugins.

Why use phone masking in Elementor?

When adding a phone mask in Elementor, you ensure that users fill in the number correctly, following the standard Brazilian format, such as (11) 91234-5678This helps avoid errors and increases conversion rates on contact forms, WhatsApp, registrations, and more.

In addition, the mask provides:

• Immediate visual validation
• Better user experience
• Greater reliability in the data collected

Prerequisites before applying the mask

Before you begin, make sure you:

• Are you using the Elementor Pro (recommended, but also works on free with limited features)
• You have a form created in Elementor with a phone or WhatsApp field
• You can insert scripts through an HTML widget

Step by step guide to applying phone mask

Now that you understand the benefits, let's get down to business: applying the phone mask in Elementor with jQuery.

1. Insert the script into the HTML widget

The first step is to add the necessary scripts inside a HTML widget in Elementor.

Follow the steps:

1. Open the page with the form in Elementor.
2. Drag a widget HTML to any part of the page (it can be at the end).
3. Paste the following code:

This script loads the jQuery and the mask plugin, applying the Brazilian format to the phone field with the ID form-field-whatsapp.

2. Configure the form field

After inserting the script, it's time to adjust the field on your form where the script will be applied. phone mask in Elementor.

Follow the steps:

1. Click on the Elementor form.
2. Select the field that will be used as the phone number (usually called telephone or WhatsApp).
3. Go to the tab Advanced in the field settings.
4. In Field ID, enter the following:

whatsapp

This will cause the field to receive the ID form-field-whatsapp, which is exactly what the script expects to apply the mask correctly.

This setting is essential. Without the correct ID, the mask will not be applied.

How to Hide HTML Widget in Elementor

You may have noticed that adding the HTML widget creates a small blank space in your layout. To fix this:

1. Click the HTML widget with the script.
2. Go to the tab Advanced.
3. In Responsive, mark the three options:
   • Hide on desktop
   • Hide on tablet
   • Hide on mobile

This way, the widget will continue to function normally (applying the mask), but will not take up any visual space on the page.