{"id":22940,"date":"2025-07-14T15:49:53","date_gmt":"2025-07-14T18:49:53","guid":{"rendered":"https:\/\/packdesites.com\/?p=22940"},"modified":"2025-07-14T16:16:27","modified_gmt":"2025-07-14T19:16:27","slug":"how-to-put-phone-mask-on-elementor-form","status":"publish","type":"post","link":"https:\/\/packdesites.com\/en\/how-to-put-phone-mask-on-elementor-form\/","title":{"rendered":"How to put a phone mask on an Elementor form"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"como-colocar-mascara-de-telefone-no-elementor-guia-pratico\">How to Add a Phone Mask in Elementor: A Practical Guide<\/h2>\n\n\n\n<p>To add <strong>phone mask in elementor form<\/strong> 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.<\/p>\n\n\n\n<p>In this article, we&#039;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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#como-colocar-mascara-de-telefone-no-elementor-guia-pratico\">How to Add a Phone Mask in Elementor: A Practical Guide<\/a><\/li><li><a href=\"#por-que-usar-mascara-de-telefone-no-elementor\">Why use phone masking in Elementor?<\/a><\/li><li><a href=\"#pre-requisitos-antes-de-aplicar-a-mascara\">Prerequisites before applying the mask<\/a><\/li><li><a href=\"#passo-a-passo-para-aplicar-a-mascara-de-telefone\">Step by step guide to applying phone mask<\/a><ul><li><a href=\"#1-inserir-o-script-no-widget-html\">1. Insert the script into the HTML widget<\/a><\/li><li><a href=\"#2-configurar-o-campo-do-formulario\">2. Configure the form field<\/a><\/li><\/ul><\/li><li><a href=\"#como-ocultar-o-widget-html-no-elementor\">How to Hide HTML Widget in Elementor<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"por-que-usar-mascara-de-telefone-no-elementor\">Why use phone masking in Elementor?<\/h2>\n\n\n\n<p>When adding a <strong>phone mask in Elementor<\/strong>, you ensure that users fill in the number correctly, following the standard Brazilian format, such as <code>(11) 91234-5678<\/code>This helps avoid errors and increases conversion rates on contact forms, WhatsApp, registrations, and more.<\/p>\n\n\n\n<p>In addition, the mask provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Immediate visual validation<\/li>\n\n\n\n<li>Better user experience<\/li>\n\n\n\n<li>Greater reliability in the data collected<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pre-requisitos-antes-de-aplicar-a-mascara\">Prerequisites before applying the mask<\/h2>\n\n\n\n<p>Before you begin, make sure you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Are you using the <strong>Elementor Pro<\/strong> (recommended, but also works on free with limited features)<\/li>\n\n\n\n<li>You have a form created in Elementor with a phone or WhatsApp field<\/li>\n\n\n\n<li>You can insert scripts through an HTML widget<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"passo-a-passo-para-aplicar-a-mascara-de-telefone\">Step by step guide to applying phone mask<\/h2>\n\n\n\n<p>Now that you understand the benefits, let&#039;s get down to business: applying the <strong>phone mask in Elementor<\/strong> with jQuery.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-inserir-o-script-no-widget-html\">1. Insert the script into the HTML widget<\/h3>\n\n\n\n<p>The first step is to add the necessary scripts inside a <strong>HTML widget<\/strong> in Elementor.<\/p>\n\n\n\n<p>Follow the steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the page with the form in Elementor.<\/li>\n\n\n\n<li>Drag a widget <strong>HTML<\/strong> to any part of the page (it can be at the end).<\/li>\n\n\n\n<li>Paste the following code:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code>\n<\/code><\/code><\/pre>\n\n\n\n<p>This script loads the <strong>jQuery<\/strong> and the mask plugin, applying the Brazilian format to the phone field with the ID <code>form-field-whatsapp<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-configurar-o-campo-do-formulario\">2. Configure the form field<\/h3>\n\n\n\n<p>After inserting the script, it&#039;s time to adjust the field on your form where the script will be applied. <strong>phone mask in Elementor<\/strong>.<\/p>\n\n\n\n<p>Follow the steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on the Elementor form.<\/li>\n\n\n\n<li>Select the field that will be used as the phone number (usually called <em>telephone<\/em> or <em>WhatsApp<\/em>).<\/li>\n\n\n\n<li>Go to the tab <strong>Advanced<\/strong> in the field settings.<\/li>\n\n\n\n<li>In <strong>Field ID<\/strong>, enter the following:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code>whatsapp\n<\/code><\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This will cause the field to receive the ID <code>form-field-whatsapp<\/code>, which is exactly what the script expects to apply the mask correctly.<\/p>\n<\/blockquote>\n\n\n\n<p>This setting is essential. Without the correct ID, the mask will not be applied.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"como-ocultar-o-widget-html-no-elementor\">How to Hide HTML Widget in Elementor<\/h2>\n\n\n\n<p>You may have noticed that adding the HTML widget creates a small blank space in your layout. To fix this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the HTML widget with the script.<\/li>\n\n\n\n<li>Go to the tab <strong>Advanced<\/strong>.<\/li>\n\n\n\n<li>In <strong>Responsive<\/strong>, mark the three options:\n<ul class=\"wp-block-list\">\n<li>Hide on desktop<\/li>\n\n\n\n<li>Hide on tablet<\/li>\n\n\n\n<li>Hide on mobile<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This way, the widget will continue to function normally (applying the mask), but will not take up any visual space on the page.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Add Phone Number Mask to Elementor Form\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/oY917_qUHVo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"<p>How to Add a Phone Number Mask in Elementor: A Practical Guide Adding a phone number mask to your 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 out the form and ensure a more [\u2026]<\/p>","protected":false},"author":1,"featured_media":21117,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jf_limit_responses":"","iawp_total_views":220,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-22940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais"],"jetpack_featured_media_url":"https:\/\/packdesites.com\/wp-content\/uploads\/2025\/05\/Mascara-de-Telefone.webp","_links":{"self":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/posts\/22940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/comments?post=22940"}],"version-history":[{"count":3,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/posts\/22940\/revisions"}],"predecessor-version":[{"id":22953,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/posts\/22940\/revisions\/22953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/media\/21117"}],"wp:attachment":[{"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/media?parent=22940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/categories?post=22940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/packdesites.com\/en\/wp-json\/wp\/v2\/tags?post=22940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}