Mask Form Elementor

Description

Plugin para incluir máscaras nos formulários (compatível com qualquer plugin de formulário que tenha opção para inserir classes e ids personalizadas).

Descrição

O Mask Form Elementor utiliza a biblioteca jQuery para inserir máscaras no formulário do Elementor Builder e em qualquer outro plugin de formulário que tenha disponível a opção para inserir classes e ids personalizadas nos campos.

Para utilizar o plugin no Elementor basta selecionar o tipo do campo diretamente pelo widget do form.

Nessa última atualização está disponível as classes para tornar o plugin compatível com outros tipos de formulários além do Elementor.
Para aplicar é bem simples, basta inserir a classe dentro dos campos do seu formulário.

Opções de Máscaras

  • Data: 00/00/0000
  • Horário: 00:00:00
  • Data e Horário: 00/00/0000 00:00:00
  • CEP: 00000-000
  • Telefone sem DDD: 0000-0000
  • Telefone: (00) 0000-0000
  • Telefone com nono digito: (00) X0000-0000
  • Cpf ou Cnpj: 000.000.000-00 ou 00.000.000/0000-00
  • CPF: 000.000.000-00
  • CNPJ: 00.000.000/0000-00
  • Monetário: 000.000.000.000.000,00
  • Endereço de IP: 000.000.000.000
  • Porcentagem: 000,00%
  • Placa: XXX-0000 ou XXX0X00 (Novo padrão Mercosul)
  • Nome de Usuário: Restrição de caracteres especiais.
  • Cartão de Crédito (número): 0000-0000-0000-0000
  • Cartão de Crédito (validade): 00/00

Para utilizar de forma manual, adicione a Class/ID em um campo tipo texto:

mascara_data
mascara_hora
mascara_data_hora
mascara_cep
mascara_telefone
mascara_telefone_ddd
mascara_telefone_nono_digito
mascara_cpf_ou_cnpj
mascara_cpf
mascara_cnpj
mascara_monetario
mascara_ip
mascara_porcentagem
mascara_placa
mascara_usuario
mascara_cartaon
mascara_cartaod

Observações (para quem utiliza IDs):
Para evitar conflitos com IDs repetidos na mesma página, você pode optar por IDs diferentes “2”, “3” e “4”, veja os exemplos:

Campo 1: mascara_telefone_nono_digito
Campo 2: mascara_telefone_nono_digito2
Campo 3: mascara_telefone_nono_digito3
Campo 4: mascara_telefone_nono_digito4

Basta incluir no final do ID o número de 2 à 4 (válido para todas as máscaras).
ESSA OPÇÃO É SOMENTE PARA A UTILIZAÇÃO DE IDs (classes repetidas não geram conflitos).

Reviews

March 24, 2020
Muito obrigado pelo plugin! Finalmente meu formulário está quase que totalmente perfeito! Recomendadíssimo! Tenho três sugestões: A minha primeira sugestão fica para os field id, que ao invés de ser "mascara_telefone", poderia ser apenas "telefone", e assim por diante, para simplificar. A segunda sugestão fica para as datas, onde poderia existir um limitador, para não deixar o dia passar de 31, o mês passar de 12 e o ano não deveria aceitar nada muito acima do ano corrente. Finalmente, a terceira sugestão, fica para a utilização responsiva em smartphones: no iPhone, por exemplo, em campos numéricos (data, telefone, etc) poderia fazer abrir o teclado numérico para facilitar a digitação e tornar mais agradável a experiência do usuário. Eu sei que se alterar o formato de "text" para "tel" no Elementor, o teclado numérico funciona, mas aí o formulário não aceita os parênteses do celular. Vocês poderiam lançar essas melhorias numa versão paga! Mas assim mesmo hoje eu fiquei muito feliz! Parabéns!
February 18, 2020
recomendo muito, principalmente agora que foi remodelado, usar o id é muito melhor que a máscara.
February 15, 2020
Parabéns pelo plugin! seria perfeito um seletor de UF e conforme seleciona o estado, aparece as cidades.
Read all 10 reviews

Contributors & Developers

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

Translate “Mask Form Elementor” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

  • 1.0 – Versão inicial.
  • 2.0 – Versão aprimorada com opção para selecionar a máscara diretamente no widget do elementor form.
  • 2.1 – Nova máscara para placas de identificação de veículos, com o novo padrão Mercosul.
  • 2.2 – Novas máscaras: Nome de usuário, número e validade de cartões.
  • 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.