Skip to content

CoolPluginsTeam/form-masks-for-elementor

Repository files navigation

=== Form Input Masks For Elementor Form ===
Contributors: coolplugins, narinder-singh, satindersingh
Tags: elementor form, mask, input masks, elementor, form builder
Requires at least: 5.0
Tested up to: 6.7.1
Requires PHP: 7.2
Stable tag: 2.4.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Elementor tested up to: 3.27.2
Elementor Pro tested up to: 3.27.1

Add input mask to Elementor form widget fields - phone number masking, date mask, credit card mask and more form masks.

== Description ==

**Form Input Masks For Elementor Form** is the ultimate addon for Elementor Pro form widget that enables **input masks** for form text fields. This ensures users enter correctly formatted data, improving validation and user experience.

* You  can add mask on text field like **phone number masking, credit card mask, date/time mask** and more.
* It requires **Elementor Pro**, as the Form Widget is only available in Elementor pro version.

— —————————————- —
🔗 **VIEW [PLUGIN DEMO & DOCS](https://coolplugins.net/add-input-masks-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=blog&utm_content=plugin-demo-docs)**
— —————————————- —

https://youtu.be/S6kwtxizgYM

**NOTE:** You can extend Elementor form widget with **[Cool FormKit](https://coolplugins.net/cool-formkit-for-elementor-forms/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get-pro-cfk&utm_content=note)** to add more advanced fields like [range slider](https://coolplugins.net/add-range-slider-elementor-forms/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note), [calculator field](https://coolplugins.net/interest-or-loan-calculator-elementor/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note), [rating field](https://coolplugins.net/add-rating-field-elementor-form-widget/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note), [signature field](https://coolplugins.net/add-signature-field-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note) and [conditional fields](https://coolplugins.net/conditional-fields-for-elementor-form/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=blog&utm_content=note) inside Elementor form.

### SUPPORTED INPUT MASKS
— —————————————- —

✅ **Phone Masks:** It supports various phone number masking formats including USA, Brazil, and others.

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

✅ **Credit Card Mask:** Ensure proper formatting for credit card numbers and expiry date.

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

✅ **Date & Time Masks:** Maintain consistency for date and time inputs.

* **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 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

### A PLUGIN BY COOL PLUGINS
— —————————————- —

This plugin is developed and maintained by **Cool Plugins**, a team of expert WordPress developers who have built 20+ free and premium WordPress plugins. Check out some of their other innovative solutions:

📝 **[Cool FormKit For Elementor](https://coolplugins.net/cool-formkit-for-elementor-forms/?utm_source=fim_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/?utm_source=fim_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 on other field values.

📞 **[Country Code For Elementor Form Telephone Field](https://coolplugins.net/add-country-code-telephone-elementor-form/?utm_source=fim_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/?utm_source=fim_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/?utm_source=fim_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 format.

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

* Automatically translate WordPress plugin and theme strings with a single click.

🚀 **[More Plugins by Cool Plugins](https://coolplugins.net/products/?utm_source=fim_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/?utm_source=fim_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/?utm_source=fim_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/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=get-pro-cfk&utm_content=installation)**
— —————————————- —

== Changelog ==

### Version 2.4.0
- Changed: Plugin Ownership changed - plugin acquired by [Cool Plugins](https://coolplugins.net/?utm_source=fim_plugin&utm_medium=readme&utm_campaign=plugin_readme&utm_content=company_redirect)
- Added: New dashboard.
- Added: Feedback form for user feedback.
- Added: Support for editor-side masking.
- Added: Masking validation on submission.
- Tweak: code improvements.

### Version 2.3
- Fix: Resolved an issue where the free version blocked text fields in specific conditions.
- Improvement: Enhanced validation checks for better form submission handling.

### Version 2.2
- New: Added support for CPF (Brazilian ID) and CNPJ (Brazilian Company ID) validation in the Pro version.
- Changed: Refactored code for better efficiency and maintainability.

### Version 2.1
- New: Introduced support for advanced input mask controls in the Pro version.
- Changed: General code optimizations to improve plugin performance.

### Version 2.0
- New: Implemented `inputmode` attribute to optimize keyboard selection based on input context.
  - Example: A `tel` mask will trigger a numeric keyboard.
- New: Replaced jQuery mask library with a custom-built lightweight solution.
- New: Enhanced support for input masks within Elementor popups.
- Changed: Increased minimum PHP version requirement to 7.4.
- Changed: Optimized asset build process for better load times.

### Version 1.6.5
- Changed: Ensured compatibility with WordPress 6.7.
- Changed: General code improvements and optimizations.

### Version 1.6.4
- Changed: Updated for full compatibility with WordPress 6.5.
- Changed: Minor code enhancements for stability.

### Version 1.6.3
- Changed: Verified and updated compatibility with WordPress 6.2.

### Version 1.6.2
- Changed: Improved compatibility with WordPress 6.1.

### Version 1.6.1
- Changed: Ensured support for WordPress 6.0.

### Version 1.6
- Changed: Enhanced string translation support.
- Changed: Improved overall code structure.
- Changed: Refined plugin header requirements for better organization.

### Version 1.5.3
- Tweak: Resolved conflicts with older versions of jQuery.

### Version 1.5.2
- Tweak: Introduced new hooks to support additional features in the Pro version.
- Tweak: Improved code structure for better extensibility.

### Version 1.5.1
- Tweak: Improved handling of masks with 9-digit inputs.
- Tweak: Updated and minified JavaScript mask library for optimized performance.

### Version 1.5
- New: Introduced support for Pro version features.
- Tweak: Optimized JavaScript mask files for faster execution.
- Tweak: Restructured plugin code for enhanced maintainability.

### Version 1.4.2
- Changed: Verified compatibility with WordPress 5.8.

### Version 1.4.1
- Fix: Resolved an issue where active masks in popups triggered incorrectly via links, buttons, and other elements.

### Version 1.4
- New: Added support for Elementor Popup integration.

### Version 1.3
- New: Introduced new input masks:
  - Credit Card Number Mask
  - Credit Card Expiry Date Mask

### Version 1.2
- New: Added support for phone masks with 9-digit formats.

### Version 1.1
- Update: Enhanced mask control settings for better customization.

### Version 1.0
- Initial release of the plugin with core input mask functionalities.