=== Input Mask Elementor Form Fields ===
Contributors: coolplugins, narinder-singh, satindersingh, rodrigo-bogdanowicz
Tags: elementor form, mask, input masks, elementor, formulario
Requires at least: 5.0
Tested up to: 6.7.2
Requires PHP: 7.2
Stable tag: 4.1.2
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Elementor tested up to: 3.28.0
Elementor Pro tested up to: 3.28.0

Elementor Form Input Mask – Add phone number formatting, date and time masks, credit card masks, CPF, CNPJ, CEP (Brazilian formats), and more.

== Description ==

**Using Elementor Form Widget and need to apply formatting to form text fields for better validation?**

Apply **input masks** to Elementor form fields, allowing users to enter data in predefined formats for better validation and user experience.

* Supports various input mask options, including phone number masking, credit card masks, date/time masks and more.
* Works exclusively with **Elementor Pro**, as the form widget is only available in Elementor Pro version.

— —————————————- —
🔗 **VIEW [INPUT MASK DEMO](https://coolplugins.net/add-input-masks-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=blog&utm_content=plugin-demo)**
— —————————————- —

https://youtu.be/S6kwtxizgYM

Additionally, you can expand Elementor form widget features with  **[Cool FormKit](https://coolplugins.net/cool-formkit-for-elementor-forms/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-cfk&utm_content=note)** that adds many advanced fields inside your Elementor form like: [Range Slider](https://coolplugins.net/add-range-slider-elementor-forms/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note), [Calculator field](https://coolplugins.net/interest-or-loan-calculator-elementor/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note), [Rating field](https://coolplugins.net/add-rating-field-elementor-form-widget/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note), [Signature field](https://coolplugins.net/add-signature-field-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note), [Conditional fields](https://coolplugins.net/conditional-fields-for-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note) and more.

### INPUT MASKS SUPPORTED BY PLUGIN
— —————————————- —

✅ **Phone Masks:** Supports various phone number formats for different regions, including the USA, Brazil, and others.

* 0000-0000
* (000) 000-0000
* (00) 0000-0000
* (00) 0.0000-0000

✅ **Credit Card Mask:** Helps to format and validate credit card details.

* **Credit Card Mask:** 0000-0000-0000-0000
* **Credit Card Expiry Date Mask:** 00/00

✅ **Date & Time Masks:** Maintain consistency for date and time inputs and ensure they follow a fixed pattern

* **Date:** 00/00/0000
* **Time:** 00:00:00
* **Date and Time:** 00/00/0000 00:00:00

✅ **Currency Mask:** Standardize input formatting for money entry.

* **Comma Separator:** 00,000.00
* **Dot Separator:** 00.000,00

✅ **CPF, CNPJ, CEP (Brazilian Formats):** Accurately capture inputs for official Brazilian IDs and postal codes.

* **CPF (Brazilian ID):** 000.000.000-00 
* **CNPJ (Brazilian Company ID):** 00.000.000/0000-00
*  **Postal Code (CEP):** 00000-000

### ABOUT PLUGIN AUTHOR
— —————————————- —

This plugin was originally published by [Rodrigo Bogdanowicz](https://profiles.wordpress.org/rodrigo-bogdanowicz/) in 2020. Now, it is **maintained by [Cool Plugins](https://coolplugins.net/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=homepage&utm_content=author)**, ensuring **regular updates and dedicated support**.  

With a team of **20+ expert WordPress developers**, Cool Plugins has developed numerous **free and premium plugins**, earning **1,000+ five-star reviews** and powering **300,000+ websites** worldwide. Explore some of their **top-rated Elementor addons** designed to enhance and extend Elementor functionality below:  

📝 **[Cool FormKit For Elementor](https://coolplugins.net/cool-formkit-for-elementor-forms/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-cfk&utm_content=more-plugins)**  

* Add advanced fields like conditional logic, range sliders, calculator fields, and country code selection to Elementor forms.

🔥 **[Conditional Fields For Elementor Form](https://coolplugins.net/product/conditional-fields-for-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-cfe&utm_content=more-plugins)**  

* An essential addon for Elementor forms that allows you to add conditional logic to input fields, enabling fields to show/hide based user input.

📞 **[Country Code For Elementor Form Telephone Field](https://coolplugins.net/add-country-code-telephone-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=blog&utm_content=more-plugins)**  

* Enhances phone fields with a country code selection feature for accurate data input.

📜 **[Timeline Widget for Elementor](https://cooltimeline.com/plugin/timeline-widget-pro/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-twe&utm_content=more-plugins)**

* Use this plugin to showcase your history in a stylish vertical or horizontal timeline layout on Elementor pages.

📅 **[Events Widgets for Elementor](https://eventscalendaraddons.com/plugin/events-widgets-pro/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-ewe&utm_content=more-plugins)**

* This plugin provides **The Events Calendar** widgets for Elementor, allowing you to easily display events in a grid, list, or carousel layout.

🌍 **[Loco Translate Addon](https://locoaddon.com/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-loco&utm_content=more-plugins)**

* Automate the translation process of WordPress plugin and theme strings within a single click via AI-powered translation resources.

🚀 **[More Plugins by Cool Plugins](https://coolplugins.net/products/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=all-plugins&utm_content=more-plugins)**

**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 [Cool FormKit for Elementor](https://coolplugins.net/product/conditional-fields-for-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-cfk&utm_content=footer)**
— —————————————- —

== Frequently Asked Questions ==

= Does this work with the free version of Elementor? =
No, this plugin requires **Elementor Pro**, as the Form Widget is only available in the pro version. This plugin enhances the Elementor Pro Form Widget by adding an input masking feature for text fields.

= How do I add an input mask to my Elementor form? =
After installing and activating the plugin, edit your Elementor form, select a text field, navigate to the **Advanced** tab, and apply the desired mask from the available options.

= Can I create a custom mask in Elementor forms? =
Currently, the plugin provides predefined masks. However, we plan to introduce an option for custom input masks in future updates based on user feedback and requirements.

= Which input masks are currently available in this? =
At present, the plugin supports:

* **USA Phone Mask**
* **Credit Card Number Mask**
* **Credit Card Expiry Date Mask**
* **Date and Time Masks**
* **Brazilian Postal Code (CEP) Mask**
* **Brazilian Company ID Masks (CPF, CNPJ)**

We will continue to expand the list of supported input masks in future updates based on user suggestions and feedback.

== Screenshots ==

1. Phone number input mask.
2. Date and time input mask.
3. Credit card number input mask.
4. Money mask.
5. Brazilian format masks.

== Installation ==

### Quick Installation

1. Navigate to **"wp-admin >> Plugins >> Add New"** on your WordPress website, search for **"Form Input Masks For Elementor by Cool Plugins"**, and install and activate this plugin developed by [Cool Plugins](https://coolplugins.net/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=homepage&utm_content=installation).
2. Install **"Elementor PRO"** to access this plugin's features, as the Form Widget is only available in the Elementor Pro version.
3. Edit a page with Elementor and create a form. In the form text field, navigate to the **Advanced** tab, where you will find the **Mask Control** option. Select the mask you want to apply to the text field.
4. Save or update the page and preview the changes.

— —————————————- —
**Get [Cool FormKit for Elementor](https://coolplugins.net/product/conditional-fields-for-elementor-form/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=get-pro-cfk&utm_content=installation)**
— —————————————- —

== Changelog ==

### Version 4.1.2 | 19/03/2025
**Tested upto:** 
- Elementor Version 3.28.0 and Elementor Pro Version 3.28.0.

### Version 4.1.1 | 13/03/2025
**Added:**
- Translation support for plugin strings.
**Fixed:**
- CPF mask issue.
**Fixed:**
- Form submission issue.

### Version 4.1.0 | 12/03/2025
**Added:**
- Compatibility with Pro Elements and other form plugins.

### Version 4.0.0 | 11/03/2025
[Cool Plugins](https://coolplugins.net/?ref=mask&utm_source=mfe_plugin&utm_medium=readme&utm_campaign=homepage&utm_content=author) is now maintaining this plugin and providing regular updates.

**Added:**
- Masking added in text field.

**Deprecated:**
- Field-based masking deprecated.

### Version 3.0
Correções:
– Corrigido o erro das máscaras que não estavam funcionando em modal/popup  
– A máscara Data e Hora não estava funcionando corretamente  

Melhorias:  
– Agora você pode preencher o campo com a máscara através do teclado númerico no celular/tablet ao invés do telado alfanumérico  

Removido:  
– Máscaras de nome de usuário e placas de identificação de veículos  

Observações: As máscaras foram removidas do seletor de campos no widget do elementor form, mas podem ser utilizadas manualmente via ID/Class, confira o site demo.  

### Version 2.3
Compatibilidade:  
– Agora você pode aplicar as máscaras em qualquer plugin de formulário que tenha opção para inserir classes e ids personalizadas.  

### Version 2.2
Melhoria:  
– Nome de usuário, número e validade de cartões.  

### Version 2.1
Melhoria:  
– Nova máscara para placas de identificação de veículos, com o novo padrão Mercosul.  

### Version 2.0
Melhoria:  
– Version aprimorada com opção para selecionar a máscara diretamente no widget do elementor form.  

### Version 1.0
– Version inicial. 