Quer saber como criar máscaras de entrada para os formulários do seu site?
A possibilidade de personalizar a maneira como os dados são inseridos nos formulários do WordPress facilita a experiência do usuário e garante que os dados corretos sejam sempre inseridos no formulário.
Crie seu formulário WordPress agora
Neste artigo
O que é uma máscara de entrada?
As máscaras de entrada são uma forma de restringir os caracteres que podem ser digitados em um campo.
Por exemplo, você pode limitar o campo a aceitar apenas números ou texto. Talvez você também queira restringir o número de caracteres.
As máscaras de entrada são ótimas para coisas como números de telefone ou nomes de usuário de mídias sociais que sempre seguem o mesmo formato.
Como funcionam as máscaras de entrada
As máscaras de entrada usam os seguintes caracteres para criar um modelo para os dados que serão aceitos:
- 9 representa qualquer número (0-9)
- a representa qualquer letra minúscula ou maiúscula
- A restringe os caracteres aceitos a letras maiúsculas
- & restringe o campo a letras maiúsculas e alfanuméricas (0-9 ou A-Z)
- * permite a inserção de qualquer letra ou número (0-9, a-z ou A-Z)
Você também pode adicionar coisas como hífens ou parênteses ( ) em sua máscara de entrada. Isso é especialmente útil quando você deseja que as pessoas preencham o número de telefone no formulário do seu site.
Se quiser adicionar algum caractere opcional, depois de já ter usado os parênteses, você deve colocá-lo entre colchetes [ ].
Por exemplo, essa máscara de entrada exigiria um mínimo de 4 caracteres, mas entradas mais longas também seriam permitidas:
**** [***********]
Exemplos de máscaras de entrada
Agora que você sabe o que é uma máscara de entrada, é hora de dar uma olhada em alguns dos exemplos mais básicos que podem ser usados em seus formulários do WordPress.
Estados Unidos Código postal:
- Máscara:
99999 - Exemplo de entrada do usuário: 89023
Código postal dos Estados Unidos com opção de mais quatro:
- Máscara:
99999 [-9999] - Exemplo de entrada do usuário: 89023 ou 89023-5678
Nome de usuário com 6-8 letras (primeira letra maiúscula, o restante em minúsculas):
- Máscara:
Aaaaaa [aa] - Exemplo de entrada do usuário: Minnie ou Minniems
X (anteriormente conhecido como Twitter) Nome de usuário com 4 a 15 números ou letras maiúsculas e minúsculas:
- Máscara:
@**** [***********] - Exemplo de entrada de usuário: @easywpforms
Para obter ajuda com símbolos avançados de máscara de entrada, confira este tutorial sobre como adicionar máscaras de entrada aos formulários do WordPress.
Como criar máscaras de entrada em campos de formulário
Agora que você tem uma boa ideia do que são máscaras de entrada, vamos criar uma.
1. Criar um novo formulário do WordPress
A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPForms. Para obter mais detalhes, siga este guia passo a passo sobre como instalar um plug-in no WordPress.
Em seguida, você precisará criar um novo formulário. Recomendamos usar o Formulário de contato simples como um ponto de partida fácil para testes.
2. Adicionar um campo de texto de linha única
Para adicionar uma máscara de entrada ao seu formulário de contato, será necessário adicionar um campo de formulário Single Line Text .
Arraste e solte o campo do formulário do painel esquerdo para a visualização do formulário.
Depois de fazer isso, clique no campo do formulário no lado direito para abrir o painel Field Options (Opções de campo ).
Clique na guia Advanced (Avançado). É aqui que você definirá sua máscara de entrada personalizada.
Em nosso exemplo, pediremos às pessoas que preencherem o formulário que digitem seu código postal dos Estados Unidos:
Essa máscara restringirá o campo para que ele aceite apenas 5 números.
Clique em Salvar.
3. Adicione o formulário ao seu site
Agora que o formulário de contato foi personalizado com uma máscara de entrada, é hora de incorporar o formulário ao seu site.
Clique no botão Incorporar e escolha o local para seu formulário.
Em seguida, publique seu post ou página para que o formulário de contato apareça para os visitantes do site. Dê uma olhada:
Observe os sublinhados que orientam o usuário a concluir o preenchimento do CEP.
Crie seu formulário WordPress agora
Em seguida, assuma o controle dos envios de formulários
E aí está! Agora você sabe como criar máscaras de entrada para os formulários do seu site.
Se estiver procurando mais maneiras de controlar o funcionamento dos formulários, consulte estes recursos:
- Limite as entradas de formulários de acordo com a data com este guia simples do complemento Form Locker
- Impeça que visitantes menores de idade preencham seus formulários com um plug-in de verificação de idade.
Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos sobre o WordPress.
Posso definir um comprimento mínimo/máximo, por exemplo, para um campo de linha única, e isso será validado corretamente?
Oi, Christian,
No momento, não temos uma opção integrada para isso, mas se você quiser usar algum código personalizado, temos um documento para desenvolvedores sobre como definir um limite máximo de caracteres.
E se você quiser experimentar, aqui está nosso tutorial adicional sobre como adicionar códigos personalizados como esse ao seu site.
Espero que isso ajude! 🙂
O que acontece se você não tiver um campo chamado Input Mask? Não há nada no campo Classes CSS em Opções avançadas?
Oi Dianne,
Peço desculpas por qualquer problema com isso! Ao adicionar uma máscara de entrada, verifique se está usando um campo de texto de linha única (atualmente, esse é o único tipo de campo que permite máscaras de entrada). Além disso, esse é um recurso mais recente, portanto, certifique-se de que seu plug-in WPForms esteja totalmente atualizado.
Se tentar fazer isso e ainda assim não vir as opções que espera, entre em contato conosco para que possamos ajudar mais. Se tiver uma licença do WPForms, você tem acesso ao nosso suporte por e-mail, portanto, envie um tíquete de suporte.
Caso contrário, oferecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Olá, neste artigo: https://wpforms.com/docs/how-to-use-custom-input-masks/
Você usa a máscara de entrada de exemplo para um endereço de e-mail em "mysite.com"
Mask: *[*{0,50}]@mysite.com
Example Input: [email protected] or [email protected]
Mas e se o seu site tiver a letra "a" no nome? Por exemplo...
Using this layer mask: *[*{0,50}]@mydomain.com
actually renders a field that has a blank for the “a” in domain.
Example input: _______@mydom_in.com
Como faço para formatar a máscara de camada de modo que toda a string "mydomain.com" permaneça intacta?
Agradeço antecipadamente por sua ajuda!
Oi Re,
Desculpe-me pelo problema! Repliquei o problema que você descreveu e o compartilhei com nossa equipe para trabalhar em uma correção. Obrigado por nos informar para que possamos resolver o problema! 🙂
Olá. Quero usar a ferramenta de máscara de entrada para limitar a entrada de caracteres em alguns de meus campos.
I’m using this mask: *[*{0,30}].
No entanto, ele não inclui os "espaços" como um caractere.
Que máscara de entrada posso usar para incluir os espaços como um caractere em meu limite de 30 caracteres?
Oi Alicia,
Atualmente, nossas máscaras de entrada não fornecem um requisito de "espaço" dessa forma. Em vez disso, você pode considerar o uso de um pouco de código personalizado para adicionar esse limite de caracteres(aqui está nosso documento com detalhes).
O código nesse documento contará os espaços como caracteres, portanto, deve funcionar mais como o que você tem em mente.
E, caso seja útil, veja como adicionar um código personalizado como esse ao seu site.
Espero que isso ajude! 🙂
Estou tendo o mesmo problema que RE CARLSON
-
Mas e se o seu site tiver a letra "a"?
-
Você tem uma solução para isso?
Obrigado.
Oi Allan,
Tenho boas notícias - temos uma solução para isso 🙂
Para adicionar um "a" sem transformá-lo em parte da área de entrada, você pode escapar dele usando `\\`. Por exemplo, se você digitar isso como máscara de entrada: `this is \\a test aaa`, o resultado seria: "this is a test ___" (este é um teste ___).
Portanto, certifique-se de colocar a barra invertida dupla antes de qualquer A, a ou 9 que você queira manter como está (e não converter em um _).
Espero que isso ajude! 🙂
Olá,
Preciso que letras alfanuméricas maiúsculas (0-9 ou A-Z) sejam combinadas com espaço entre os caracteres. Aparentemente, "&" não permite nenhum espaçamento
Oi Elyas,
Não temos um caractere especial para permitir espaços; em vez disso, você pode simplesmente adicionar um espaço entre os caracteres & que desejar, para que o campo de máscara de entrada seja lido como "&&&& &&&&".
Espero que isso ajude! 🙂
Como posso fazer para que o campo seja aceito somente a partir de um intervalo de 6 a 9 números? Estou usando o WPForms Basic comprado.
Exemplo
7898981226
8985607458
9989878774
Oi Munaf!
Você pode criar uma máscara de entrada personalizada para o campo Texto de linha única; no entanto, não há opção integrada para usar o intervalo de números nesse campo.
Portanto, você pode fazer isso, por exemplo, "\\799999" e ele permitirá apenas "7" no início e, em seguida, mais 5 dígitos, mas não temos regras para escolher 7 OU 8 OU 9 no início, infelizmente.
E, caso ajude, temos mais um ótimo tutorial sobre como usar a máscara de entrada personalizada no WPForms aqui
Peço desculpas por qualquer confusão!
Tenha um bom dia 🙂
Estou iniciando o uso do WPFroms ainda de forma gratuita para testes de compatibilidade com soluções que já tenho implantadas, contudo tentando personalizar uma mascara simples sugerida por vocês como “https://www.f\\acebook.com/*{1,22}” em um campo de “texto de linha unica” percebo que não são aceitos caracteres especiais simples como ? . ou / ; isso é uma limitação proposital impostas a usuários gratuitos ou poderiam me informar por qual simbolo deveria substituir o de * para permitir a entrada de caracteres especiais na mascara.
Oi Rodrigo,
Peço desculpas, mas estou um pouco confuso com sua pergunta. Quando puder, esclareça ou, se estiver usando nosso plug-in gratuito, WPForms Lite, visite os fóruns de suporte, onde oferecemos suporte limitado gratuito.
Obrigado! 🙂
Oi, é possível adicionar uma vírgula após cada 3 dígitos? por exemplo, 99.999.999
Olá, Waqas. Se você tiver um número fixo de dígitos, é possível fazer isso. Por exemplo, esta máscara de entrada mostrará 9 dígitos e uma vírgula após cada 3 dígitos 999\,999\,999
Espero que isso ajude!
Como posso permitir caracteres especiais em minha máscara de entrada?
Olá, Afif - Temos alguns tutoriais avançados sobre máscaras de entrada neste artigo que explicam como adicionar alguns caracteres.
Para obter mais ajuda sobre isso, entre em contato conosco pelo suporte para que possamos ajudar. Se você tiver uma licença do WPForms, terá acesso ao nosso suporte por e-mail, portanto, envie um tíquete de suporte. Caso contrário, oferecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Não quero caracteres ilegais em meu campo de texto de linha única
Rahul - Sugiro que dê uma olhada neste tutorial sobre como restringir caracteres especiais nos campos de formulário.
Espero que isso ajude!
Como posso permitir 15 letras ou menos em minha máscara de entrada?
Para criar as regras de uma máscara de entrada personalizada, você precisará usar um conjunto específico de símbolos. (Lembre-se de adicionar o símbolo apropriado 15 vezes).
Espero que isso ajude! 🙂
Olá, minhas máscaras de entrada parecem não funcionar mais. Os campos de texto só permitem escrever o que quer que seja, embora as máscaras estejam ativas. Alguma ajuda, por favor? Obrigado.
Oi Antonio - Desculpe-me pelo ocorrido! Teremos prazer em ajudar.
Se você tiver uma licença do WPForms, terá acesso ao nosso suporte por e-mail, portanto, envie um tíquete de suporte. Caso contrário, oferecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado! 🙂
Hi,
Estou criando um campo de nome com texto de linha única e somente alfabetos e espaços devem ser adicionados. Para isso, adicionei um mastro de entrada como a{1,50}. Isso aceita alfabetos, mas não é possível adicionar espaços.
Oi Amrita! Peço desculpas, mas as máscaras de entrada não seriam adequadas para esse tipo de caso de uso, pois o objetivo é fornecer também uma estrutura específica para a entrada, por exemplo, um número de telefone ou de identificação. Os espaços não poderiam ser utilizados em uma máscara de entrada.
Para fazer o que você está procurando, seria necessário um código personalizado (geralmente jQuery ou JavaScript), mas peço desculpas, pois não podemos oferecer suporte para esse grau de personalização. No entanto, este tópico pode lhe dar algumas ideias.
Lamento não podermos fornecer uma solução para isso, mas se tiver mais dúvidas, entre em contato conosco se tiver uma assinatura ativa. Caso contrário, não hesite em nos enviar algumas perguntas em nossos fóruns de suporte.
Olá, pessoal
Como faço para criar uma máscara dessa maneira?
+55 (99) 9 9999-9999 ou +55 (99) 9999-9999 na mesma entrada.
Obrigado,
Olá! Parece que você postou essa pergunta em vários artigos, portanto, vou abordá-la em um único local aqui.
Peço desculpas, mas não é possível especificar onde o número opcional seria colocado, pois a máscara de entrada opera pela sequência em que eles são inseridos. Tecnicamente, o número opcional poderia ser mantido opcional, mas isso significaria que os usuários precisariam "pular" esse caractere inserindo um espaço na posição do caractere e, em seguida, continuar a preencher o restante do campo.
Isso deve ser possível com alguma codificação personalizada, mas lamento que essas personalizações estejam fora do escopo de nosso suporte. Caso deseje examinar as opções de desenvolvimento personalizado, recomendamos enfaticamente o uso do Codeable. O Codeable examina todos os desenvolvedores para garantir que eles sejam altamente qualificados e comunicativos e, em seguida, também ajuda a orientar todo o processo de conexão e comunicação com o desenvolvedor mais adequado.
Aqui está nosso tutorial sobre o uso do Codeable, que fornece mais detalhes sobre como esse processo funciona.
Ou, se você quiser uma equipe à qual possa continuar recorrendo (a longo prazo) para obter ajuda no desenvolvimento personalizado, considere a possibilidade de conferir o WPBuffs.
Espero que isso ajude a esclarecer 🙂 Se tiver mais alguma dúvida sobre isso, entre em contato conosco se tiver uma assinatura ativa. Caso contrário, não hesite em nos enviar algumas perguntas em nossos fóruns de suporte.
O elemento de número de telefone não oferece mascaramento de entrada. Esse recurso é possível?
Gostamos de poder usar o mascaramento de entrada no elemento de número de telefone porque ele oferece o seletor de código de país, enquanto uma entrada de texto comum não oferece (embora ofereça mascaramento de entrada).
Agradecimentos,
Mark
Oi Mark,
Não temos um recurso embutido para definir a máscara personalizada para o campo Phone. No entanto, isso pode ser feito usando o campo de texto de linha única e definindo a máscara de entrada personalizada, conforme mostrado aqui
Espero que isso ajude! 🙂
É possível exigir uma entrada decimal no campo numérico?
Então, um usuário é sempre obrigado a inserir o número inteiro + x de decimais?
Por exemplo:
0.015
0.792
0.28
1.256
Olá, acredito que isso deve ser possível usando a seguinte máscara de entrada em um campo de texto de linha única: [99,999] e aqui está o screencast demonstrando o mesmo.
Espero que isso ajude!
Alguém sabe como criar a máscara de moeda no wpforms? Exemplo: $1.252,33
Olá, Cristian - você pode usar a seguinte máscara de entrada para conseguir isso: $ [[9],999.99].
Espero que isso ajude!
Quero criar uma máscara de entrada para o EMP2000, como posso fazer isso?
Olá, Kashmira - você pode usar a seguinte máscara de entrada para conseguir isso:EMP2[9999].
Espero que isso ajude!
Olá! Como posso criar uma máscara de entrada para um valor opcional?
por exemplo, $1.000.000 ou $250.000, adicionando uma vírgula no meio, dependendo do valor?
Olá Mariana, infelizmente, não temos uma opção integrada para formato opcional com máscara de entrada como você descreveu. No entanto, concordo que isso seria muito útil. Anotei a solicitação de recurso e a manteremos em nosso radar enquanto planejamos nosso roteiro para o futuro.
Obrigado e tenha um bom dia!
Existe uma maneira de verificar se o número de identificação do veículo (VIN) está correto?
Olá, Litschi - Você certamente pode criar uma máscara de entrada personalizada para validar o formato correto do número de identificação do veículo (VIN).
Obrigado 🙂
Olá, posso usar uma máscara de entrada para NÃO permitir espaços?
Por exemplo, se um usuário digitar "AA 9999", a máscara forçará "AA9999"?
Ou um espaço inicial como "AA9999[_]" será inserido como "AA9999" sem o espaço?