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

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>

Alternatives to Input Mask For Elementor Form Fields

Top alternatives