Input Mask Elementor Form Fields

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

Additionally, you can expand Elementor form widget features with Cool FormKit that adds many advanced fields inside your Elementor form like: Range Slider, Calculator field, Rating field, Signature field, Conditional fields 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 in 2020. Now, it is maintained by Cool Plugins, 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

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

🔥 Conditional Fields For Elementor Form

  • 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

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

📜 Timeline Widget for Elementor

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

📅 Events Widgets for Elementor

  • 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

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

🚀 More Plugins by Cool 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
— —————————————- —

Screenshots

  • Phone number input mask.
  • Date and time input mask.
  • Credit card number input mask.
  • Money mask.
  • 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.
  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
— —————————————- —

FAQ

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.

Reviews

March 12, 2025 4 replies
APós a ultima atualização, o plugin não funciona mais com o “Pro Elements”, que habilitava as funções do Elementor Pro. Uma pena…
April 3, 2024
Deixando meu agradecimento por esse plugin incrível, resolve de forma rápida e pratica.
February 16, 2023
Tive um problema com o placeholder e com a ajuda do próprio Rodrigo resolvemos colocando em “advanced” manualmente e pela descrição adicionando o CSS/ID, ótimo profissional
September 21, 2022
Revirei a internert toda testei todos os plugins disponiveis no Wordpress. Mas esse superou todas as espectativas. E o atendimento e comprometimento do Desenvolvedor é sem palavras!
Read all 22 reviews

Contributors & Developers

“Input Mask Elementor Form Fields” is open source software. The following people have contributed to this plugin.

Contributors

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