Petermann

Add a class in the form field.
Example of use with <a href="https://wordpress.org/plugins/contact-form-7/" rel="ugc">Contact Form 7</a>:
<pre><code>[tel your-phone class:phone placeholder "Phone"]
</code></pre>
Listing of classes available for use.
<pre><code>('span.start, input.start').mff_mask('00/0000');
('span.date, input.date').mff_mask('00/00/0000');
('span.time, input.time').mff_mask('00:00:00');
('span.time2, input.time2').mff_mask('00:00');
('input.date_time').mff_mask('00/00/0000 00:00:00');
('input.date_time2').mff_mask('00/00/0000 00:00');
('input.cep').mff_mask('00000-000', { clearIfNotMatch: true });
('input.zip').mff_mask('00000');
('input.phone, input[name="phonebr"]').mff_mask(PhoneMaskBehavior, nonoOptions);
('input.phone_us').mff_mask('(000) 000-0000');
('input.taxid').mff_mask('00-0000000');
('input.ssn').mff_mask('000-00-0000');
('input.mixed').mff_mask('AAA 000-S0S');
('input.cpf').mff_mask('000.000.000-00', { reverse: true, clearIfNotMatch: true });
('input.cnpj').mff_mask('00.000.000/0000-00', { reverse: true, clearIfNotMatch: true });
('input.money').mff_mask('000.000.000.000.000,00', { reverse: true });
('input.money2').mff_mask('#.##0,00', { reverse: true });
('input.money3').mff_mask('#,##0.00', { reverse: true });
('input.money4').mff_mask('000,000,000,000,000.00', { reverse: true });
('input.money5').mff_mask('#.##0', { reverse: true });
('input.money6').mff_mask('#,##0', { reverse: true });
('input.ip_address').mff_mask('099.099.099.099');
('input.percent').mff_mask('##0,00%', { reverse: true });
('input.percent2').mff_mask('##0.00%', { reverse: true });
('input.percent3').mff_mask('990,0%', { reverse: true });
('input.percent4').mff_mask('990.0%', { reverse: true });
('input.percent5').mff_mask('#,##0%', { reverse: true });
('input.percent6').mff_mask('#.##0%', { reverse: true });
</code></pre>
<a href="https://gist.github.com/petermann/fd1a898e02ca91a0d7231a9f8ee662b4" rel="nofollow ugc">Click here</a> for more details on how to add custom mask.
Optional 
– Added option for the format of the Brazilian phone number, with attribute <code>name</code> equal to <code>phonebr</code>.
<h3>Credits</h3>
<a href="https://github.com/igorescobar/jQuery-Mask-Plugin" rel="nofollow ugc">jQuery Mask Plugin</a>

Masks Form Fields

A plugin to add masks in the form’s fields.

Satinder Singh

CoolHappy

Cool Plugins

Rodrigo Bogdanowicz

Input Mask For Elementor Form Fields is an Elementor addon that helps to add <a href="https://coolformkit.com/features/input-mask-for-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=features&utm_content=top_name" rel="nofollow ugc">input masks</a> on Elementor form fields. It helps you control how users enter data into form fields, ensuring properly formatted entries for phone numbers, credit cards, dates, Brazilian IDs, and more.
Originally developed by <a href="https://profiles.wordpress.org/rodrigo-bogdanowicz/" rel="nofollow ugc">Rodrigo Bogdanowicz</a>, this plugin is now actively maintained and supported by the <a href="https://coolplugins.net/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=author&utm_content=author" rel="nofollow ugc">Cool Plugins team</a>, who continue to add new features, bug fixes, and compatibility updates.
This plugin works with Elementor Pro and the Hello Plus form widget. Simply edit your Elementor form, select a text field, and apply the desired mask.
👉 <a href="https://coolplugins.net/add-input-masks-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=demo&utm_content=view_demo" rel="nofollow ugc">Check Live 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>
Need more advanced Elementor form fields? Extend your forms with <a href="https://coolformkit.com/?ref=mask&utm_source=mfe_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 add:
<ul>
<li><a href="https://docs.coolplugins.net/doc/range-slider-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=docs&utm_content=faqs" rel="nofollow ugc">Range Sliders</a> </li>
<li><a href="https://docs.coolplugins.net/doc/calculator-field-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=docs&utm_content=faqs" rel="nofollow ugc">Calculator Fields</a> </li>
<li><a href="https://docs.coolplugins.net/doc/signature-field-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=docs&utm_content=faqs" rel="nofollow ugc">Signature Fields</a> </li>
<li><a href="https://docs.coolplugins.net/doc/rating-field-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=docs&utm_content=faqs" rel="nofollow ugc">Rating Fields</a> </li>
<li><a href="https://docs.coolplugins.net/doc/apply-conditional-logic-on-elementor-form-fields/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=docs&utm_content=faqs" rel="nofollow ugc">Conditional Logic</a> </li>
<li>Spam protection with <a href="https://docs.coolplugins.net/doc/add-hcaptcha-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=docs&utm_content=faqs" rel="nofollow ugc">hCaptcha</a> and <a href="https://docs.coolplugins.net/doc/add-cloudflare-turnstile-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=docs&utm_content=faqs" rel="nofollow ugc">Cloudflare Turnstile</a> </li>
</ul>
<h3>Supported Input Masks</h3>
Phone Masks: Add common phone number formats such as 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 card numbers and expiry dates.
<ul>
<li>Card: 0000-0000-0000-0000 </li>
<li>Expiry: 00/00 </li>
</ul>
Date & Time Masks: Keep date and time inputs consistent.
<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: Enforce correct money formats.
<ul>
<li>Comma style: 00,000.00 </li>
<li>Dot style: 00.000,00 </li>
</ul>
Brazilian Formats (CPF, CNPJ, CEP): Capture accurate Brazilian IDs.
<ul>
<li>CPF: 000.000.000-00 </li>
<li>CNPJ: 00.000.000/0000-00 </li>
<li>CEP: 00000-000 </li>
</ul>
<h3>More Addons for Elementor Forms</h3>
<ul>
<li>
<a href="https://coolplugins.net/product/conditional-fields-for-elementor-form/?ref=mask&utm_source=mfe_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 show, hide, enable, or disable fields dynamically.
</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 dropdown with country codes and flags for phone fields.
</li>
<li>
<a href="https://coolformkit.com/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=elementor_form_addons" rel="nofollow ugc">Cool FormKit</a> – A complete Elementor form builder addon that extends Pro forms and adds a full widget for Elementor Free.
</li>
</ul>
<h3>Other Popular Elementor Addons by Cool Plugins</h3>
<ul>
<li><a href="https://cooltimeline.com/plugin/timeline-widget-pro/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">Timeline Widget for Elementor</a> – Create stunning vertical and horizontal timelines inside Elementor editor easily. </li>
<li><a href="https://eventscalendaraddons.com/plugin/events-widgets-pro/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">Events Widgets for Elementor</a> – Add The Events Calendar in Elementor pages easily via using these events widgets. </li>
<li><a href="https://coolplugins.net/product/autopoly-ai-translation-for-polylang/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">AutoPoly – AI Translation for Polylang</a> – Translate Elementor websites automatically via AI and Polylang plugin. </li>
<li><a href="https://wordpress.org/plugins/loop-grid-extender-for-elementor-pro/" rel="ugc">Loop Grid Extender for Elementor Pro</a> – Add ACF repeater support and advanced taxonomy filters in Elementor loop builder. </li>
<li><a href="https://locoaddon.com/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=other_addons" rel="nofollow ugc">LocoAI – Auto Translate for Loco Translate</a> – AI-powered string translation for plugins and themes inside Loco Translate. </li>
</ul>
Disclaimer: This plugin is not affiliated with or endorsed by the official Elementor team. Some links provided may be affiliate links, which means we could earn a small commission at no additional cost to you if you make a purchase.
👉 Get <a href="https://coolformkit.com/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=bottom_name" rel="nofollow ugc">Cool FormKit – Advanced Elementor Form Builder</a>

Input Mask For Elementor Form Fields

Apply input masks in Elementor form widget fields - phone, date, time, credit card, CPF, CNPJ, CEP & more for valid and error-free entries.

Masks Form Fields vs Input Mask For Elementor Form Fields