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

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.

Masks Form Fields vs Form Input Masks For Elementor Forms