-
Notifications
You must be signed in to change notification settings - Fork 1
CoolPluginsTeam/form-masks-for-elementor
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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.
About
Plugin to add Mask Control to Elementor Form Widget.