marcus

Onde você deve informar no campo input uma dessas class, Exemplo:
<ol>
<li>
Faça upload dos arquivos para a pasta <code>/wp-content/plugins/</code> (mantenha a pasta original do plugin)
</li>
<li>
Ative o plugin na interface de ‘Plugins’ do WordPress
</li>
<li>
Para utilizar use as classes determinadas
</li>
</ol>
<h3>Arbitrary section</h3>
<h3>A brief Markdown Example</h3>
jQuery(‘.date’).mask(’99/99/9999′); 
 jQuery(‘.tempo’).mask(’00:00:00′); 
 jQuery(‘.date_time’).mask(’00/00/0000 00:00:00′); 
 jQuery(‘.cep’).mask(‘00000-000’); 
 jQuery(‘.phone’).mask(‘0000-0000’); 
 jQuery(‘.phone-2’).mask(‘(00) 0000-0000’); 
 jQuery(‘.phone_us’).mask(‘(000) 000-0000’); 
 jQuery(‘.mixed’).mask(‘AAA 000-S0S’); 
 jQuery(‘.cpf’).mask(‘000.000.000-00’, {reverse: true}); 
 jQuery(‘.money’).mask(‘000.000.000.000.000,00’, {reverse: true}); 
 jQuery(‘.cnpj’).mask(‘00.000.000/0000-00’, {reverse: true}); 
 jQuery(‘.wpcf7-tel’).mask(maskBehavior, options);
 Onde nesse exemplo usamos a classe wpcf7-tel que é nátiva para o formulário de contato Contact Form 7

Mask Contact Form

Onde você deve informar no campo input uma dessas class, Exemplo: Faça upload dos arquivos para a pasta /wp-content/plugins/  (mantenha a pasta orig …

Satinder Singh

CoolHappy

Cool Plugins

Eduardo Villão

Form Input Masks For Elementor Forms is the ultimate addon for Elementor that allows you to add <a href="https://coolformkit.com/features/input-mask-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=top_name" rel="nofollow ugc">input masks</a> to your Elementor form fields. By applying input masks, you ensure users enter correctly formatted data, which improves form validation, reduces errors, and creates a smoother user experience.
<ul>
<li>With this plugin, you can add phone number masks, credit card masks, date and time masks, CPF, CNPJ, CEP (Brazilian formats), and many more custom field formats. </li>
<li>It works seamlessly with <a href="https://be.elementor.com/visit/?bta=210611&nci=5383" rel="nofollow ugc">Elementor Pro</a> (aff link) and <a href="https://wordpress.org/plugins/hello-plus/" rel="ugc">Hello Plus</a> form widgets, making it an essential addon for anyone building professional forms with Elementor. </li>
</ul>
👉 <a href="https://coolplugins.net/add-input-masks-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=blog&utm_content=view_demos" rel="nofollow ugc">View Input Masks Demo</a>
<iframe loading="lazy" title="How to Add Input Masks In Elementor Form?" width="750" height="422" src="https://www.youtube.com/embed/S6kwtxizgYM?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>
If you want even more advanced form functionality, you can extend your Elementor forms with <a href="https://coolformkit.com/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=below_video" rel="nofollow ugc">Cool FormKit</a> (aka coolformkit). With Cool FormKit, you can use a <a href="https://coolformkit.com/features/range-slider-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=below_video" rel="nofollow ugc">Range Slider</a> for interactive numeric input, a <a href="https://coolformkit.com/features/calculator-for-elementor/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=below_video" rel="nofollow ugc">Calculator Field</a> to build calculators like BMI or EMI, a <a href="https://coolformkit.com/features/rating-field-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=below_video" rel="nofollow ugc">Rating Field</a> to collect reviews, a <a href="https://coolformkit.com/features/signature-field-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=below_video" rel="nofollow ugc">Signature Field</a> for e-signatures, and <a href="https://coolformkit.com/features/conditional-logic-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=below_video" rel="nofollow ugc">Conditional Fields</a> to dynamically show or hide inputs.
<h3>Supported Input Masks</h3>
Phone Masks: Add phone number formats for multiple countries like USA, Brazil, and more.
<ul>
<li>0000-0000 </li>
<li>(000) 000-0000 </li>
<li>(00) 0000-0000 </li>
<li>(00) 0.0000-0000 </li>
</ul>
Credit Card Masks: Format credit card numbers and expiry dates with validation.
<ul>
<li>Credit Card: 0000-0000-0000-0000 </li>
<li>Expiry Date: 00/00 </li>
</ul>
Date & Time Masks: Keep date and time entries consistent and error-free.
<ul>
<li>Date: 00/00/0000 </li>
<li>Time: 00:00:00 </li>
<li>Date & Time: 00/00/0000 00:00:00 </li>
</ul>
Currency Masks: Standardize money inputs with comma or dot separators.
<ul>
<li>Comma Format: 00,000.00 </li>
<li>Dot Format: 00.000,00 </li>
</ul>
Brazilian Formats (CPF, CNPJ, CEP): Capture Brazilian IDs and postal codes.
<ul>
<li>CPF (ID): 000.000.000-00 </li>
<li>CNPJ (Company ID): 00.000.000/0000-00 </li>
<li>CEP (Postal Code): 00000-000</li>
</ul>
<h3>More Addons for Elementor Forms</h3>
Make more advanced forms inside Elementor by using these powerful Elementor form addons developed by the Cool Plugins team.
<ul>
<li>
<a href="https://coolplugins.net/product/conditional-fields-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=elementor_form_addons" rel="nofollow ugc">Conditional Fields for Elementor Form</a> 
Add conditional logic to Elementor forms so fields can appear, hide, enable, or disable dynamically based on user input.
</li>
<li>
<a href="https://wordpress.org/plugins/country-code-field-for-elementor-form/" rel="ugc">Country Code for Elementor Form Telephone Field</a> 
Add a country code selector with flags to telephone fields. Combine it with input masks for even more accurate phone number validation.
</li>
<li>
<a href="https://coolformkit.com/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=elementor_form_addons" rel="nofollow ugc">Cool FormKit</a> 
The ultimate form builder for Elementor Free & Pro. It not only extends Elementor Pro forms, but also provides a complete form widget for Elementor Free users. Popular features include:
<ul>
<li><a href="https://coolformkit.com/features/conditional-logic-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Conditional Logic</a> for smarter workflows. </li>
<li><a href="https://coolformkit.com/features/range-slider-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Range Slider</a> for interactive numeric inputs. </li>
<li><a href="https://coolformkit.com/features/signature-field-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Signature Field</a> to collect e-signatures. </li>
<li><a href="https://coolformkit.com/features/select2-field-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Select2 Dropdowns</a> with search and multi-select options. </li>
<li><a href="https://coolformkit.com/features/image-radio-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Image Radio & Checkbox Fields</a> for better visual forms. </li>
<li><a href="https://coolformkit.com/features/rating-field-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Rating Field</a> to collect user reviews. </li>
<li><a href="https://coolformkit.com/features/calculator-for-elementor/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Calculator Fields</a> to build BMI, EMI, or interest calculators. </li>
<li><a href="https://coolformkit.com/features/cloudflare-turnstile-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">Cloudflare Turnstile</a> for spam protection. </li>
<li><a href="https://coolformkit.com/features/hcaptcha-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">hCAPTCHA</a> to protect forms against spam bots. </li>
</ul>
</li>
</ul>
👉 <a href="https://coolformkit.com/features/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=features&utm_content=elementor_form_addons" rel="nofollow ugc">View All Features of Cool FormKit</a>
<h3>Other Popular Elementor Addons by Cool Plugins</h3>
Cool Plugins develops many addons that enhance Elementor and WordPress functionality. These addons integrate seamlessly with Elementor to help you build advanced websites faster, without writing custom code.
<ul>
<li>
<a href="https://cooltimeline.com/plugin/timeline-widget-pro/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">Timeline Widget for Elementor</a> 
Showcase your company history, project milestones, or events with vertical and horizontal timelines designed specifically for Elementor.
</li>
<li>
<a href="https://eventscalendaraddons.com/plugin/events-widgets-pro/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">Events Widgets for Elementor</a> 
Extend The Events Calendar plugin with Elementor widgets. Display events in list, grid, or carousel layouts that match your site’s design.
</li>
<li>
<a href="https://coolplugins.net/product/autopoly-ai-translation-for-polylang/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">AutoPoly – AI Translation for Polylang</a> 
Automatically translate Elementor pages and WordPress content with AI. Build multilingual websites faster when using Polylang.
</li>
<li>
<a href="https://wordpress.org/plugins/loop-grid-extender-for-elementor-pro/" rel="ugc">Loop Grid Extender for Elementor Pro</a> 
Unlock advanced features inside Elementor Pro’s loop builder — add ACF repeater support and taxonomy-based filters for dynamic layouts.
</li>
<li>
<a href="https://locoaddon.com/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">LocoAI – Auto Translate for Loco Translate</a> 
Instantly translate any plugin or theme strings with AI. One-click automatic translation inside the Loco Translate interface.
</li>
</ul>
DISCLAIMER: This plugin is not affiliated with or developed by the official Elementor team. Some of the links in this content may be affiliate links, meaning we may earn a commission at no extra cost to you if you make a purchase through these links.
Get <a href="https://coolformkit.com/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=bottom_name" rel="nofollow ugc">Cool FormKit for Elementor</a>

Form Input Masks For Elementor Forms

Add input masks to Elementor Pro or Hello Plus form fields - phone, date, time, credit card, CPF, CNPJ, CEP & more for accurate entries.

Mask Contact Form vs Form Input Masks For Elementor Forms