Resumo de IA
Quer aprender como criar máscaras de entrada para os formulários do seu site?
Ser capaz de personalizar a forma como os dados são inseridos nos seus formulários do WordPress torna a experiência do usuário mais fácil e garante que os dados corretos sejam inseridos no seu formulário sempre.
Crie Seu Formulário WordPress Agora
Neste Artigo
O que é uma Máscara de Entrada?
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. Você também pode querer restringir o número de caracteres.
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
Máscaras de entrada usam os seguintes caracteres para construir 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 alfanuméricos maiúsculos (0-9 ou A-Z)
- * permite que qualquer letra ou número seja inserido (0-9, a-z ou A-Z)
Você também pode adicionar coisas como hifens ou parênteses ( ) na sua máscara de entrada. Isso é especialmente útil quando você quer que as pessoas preencham o número de telefone no formulário do seu site.
Se você quiser adicionar quaisquer caracteres opcionais, depois de já ter usado os parênteses, você deve colocá-los entre colchetes [ ].
Por exemplo, esta 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 você pode usar em seus formulários do WordPress.
CEP dos Estados Unidos:
- Máscara:
99999 - Exemplo de Entrada do Usuário: 89023
CEP dos Estados Unidos com Plus Four Opcional:
- Máscara:
99999 [-9999] - Exemplo de Entrada do Usuário: 89023 ou 89023-5678
Depois de fazer isso, clique no campo do formulário no lado direito para abrir o painel Opções do Campo.
- Máscara:
Aaaaaa [aa] - Exemplo de Entrada do Usuário: Minnie ou Minniems
Nome de usuário X (anteriormente conhecido como Twitter) com 4-15 números ou letras maiúsculas/minúsculas:
- Máscara:
@**** [***********] - Exemplo de Entrada do 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 seus 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. Crie um Novo Formulário do WordPress
A primeira coisa que você precisará fazer é instalar e ativar o plugin WPForms. Para mais detalhes, siga este guia passo a passo sobre como instalar um plugin 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. Adicione um Campo de Texto de Linha Única
Para adicionar uma máscara de entrada ao seu formulário de contato, você precisará adicionar um campo de formulário Texto de Linha Única.
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 Opções do Campo.
Clique na guia Avançado. É aqui que você definirá sua máscara de entrada personalizada.
Em nosso exemplo, pediremos às pessoas que preenchem nosso formulário para inserir o CEP dos Estados Unidos:
Esta máscara restringirá o campo para que ele aceite apenas 5 números.
Clique em Salvar.
3. Adicione seu Formulário ao seu Site
Agora que o formulário de contato está personalizado com uma máscara de entrada, é hora de incorporar o formulário em seu site.
Clique no botão Incorporar e escolha o local para o seu formulário.
Em seguida, publique sua postagem ou página para que seu formulário de contato apareça para os visitantes do seu site. Dê uma olhada:
Observe os underscores que guiam o usuário a terminar de preencher o CEP.
Crie Seu Formulário WordPress Agora
Em seguida, Assuma o Controle das Submissões de Formulário
E aí está! Agora você sabe como criar máscaras de entrada para os formulários do seu site.
Se você estiver procurando por mais maneiras de controlar como seus formulários funcionam, confira estes recursos:
- Limite as entradas do formulário de acordo com a data com este guia simples do addon Form Locker
- Impede que visitantes menores de idade preencham seus formulários com um plugin de verificação de idade.
Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
Posso definir um comprimento mínimo/máximo, por exemplo, para um campo de linha única e isso será validado corretamente?
Olá Christian,
Atualmente, não temos uma opção integrada para isso, mas se você estiver disposto a fazer um código personalizado, temos um documento para desenvolvedores sobre como definir um limite máximo de caracteres.
E se você quiser tentar, aqui está nosso tutorial adicional sobre como adicionar código personalizado como este ao seu site.
Espero que ajude! 🙂
O que acontece se você não tiver um campo chamado Máscara de Entrada? Não há nada no campo Classes CSS em Opções Avançadas?
Olá Dianne,
Peço desculpas por qualquer problema com isso! Ao adicionar uma máscara de entrada, certifique-se de estar usando um campo de Texto de Linha Única (este é atualmente o único tipo de campo que permite máscaras de entrada). Além disso, este é um recurso mais recente, portanto, certifique-se de que seu plugin WPForms esteja totalmente atualizado.
Se você tentar isso e ainda não vir as opções que espera, entre em contato para que possamos ajudar ainda mais. Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, portanto, envie um ticket de suporte.
Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no 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"
Máscara: *[*{0,50}]@mysite.com
Exemplo de Entrada: [email protected] ou [email protected]
Mas e se o seu site tiver a letra "a" nele? Por exemplo…
Usando esta máscara de camada: *[*{0,50}]@mydomain.com
na verdade, renderiza um campo que tem um espaço em branco para o "a" em domain.
Exemplo de entrada: _______@mydom_in.com
Como formato a máscara de camada para que toda a string "mydomain.com" permaneça intacta?
Obrigado antecipadamente pela sua ajuda!
Olá Re,
Sinto muito pelo problema! Reproduzi 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 isso! :)
Olá. Quero usar a ferramenta de máscara de entrada para limitar a entrada de caracteres em alguns dos meus campos.
Estou usando esta máscara: *[*{0,30}].
No entanto, ela não inclui os "espaços" como um caractere.
Qual máscara de entrada posso usar para incluir os espaços como um caractere no meu limite de 30 caracteres?
Oi Alicia,
Nossas máscaras de entrada atualmente não oferecem um requisito de "espaço" dessa forma. Em vez disso, você pode considerar usar um pouco de código personalizado para adicionar este limite de caracteres (aqui está nosso documento com detalhes).
O código nesse documento contará os espaços como caracteres, então deve funcionar mais como o que você tem em mente.
E caso ajude, aqui está como adicionar código personalizado como este 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" nele?
—
Você tem uma solução para isso?
Obrigado.
Oi Allan,
Tenho boas notícias - nós temos uma solução para isso 🙂
Para adicionar um "a" sem transformá-lo em parte da área de entrada, você pode escapá-lo usando `\\`. Por exemplo, se você inserisse isso como sua máscara de entrada: `this is \\a test aaa`, o resultado seria: “this is a test ___”.
Portanto, certifique-se de colocar essa barra invertida dupla na frente de qualquer A, a ou 9 que você gostaria de manter como está (sem converter em _).
Espero que isso ajude! :)
olá,
Preciso de alfanumérico maiúsculo (0-9 ou A-Z) para combinar com espaço entre 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 quaisquer caracteres & que desejar, para que o campo da máscara de entrada possa ser lido como "&&&& &&&&."
Espero que isso ajude! :)
Como posso fazer o campo aceitar apenas números começando com o intervalo de 6-9? Estou usando o WPForms Basic comprado.
Exemplo
7898981226
8985607458
9989878774
Oi Munaf!
Você pode criar uma máscara de entrada personalizada para o campo de Texto de Linha Única, no entanto, não há uma opção integrada para usar o intervalo de números lá.
Então você pode ter algo como isso, por exemplo, "\\799999", e isso permitirá apenas "7" no início e depois mais 5 dígitos quaisquer, mas não temos regras para escolher 7 OU 8 OU 9 lá no início, infelizmente.
E caso ajude, temos mais um ótimo tutorial sobre como usar máscaras de entrada personalizadas 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.
Olá Rodrigo,
Peço desculpas, mas estou um pouco confuso com sua pergunta. Quando tiver um tempo, você poderia, por favor, esclarecer ou, se estiver usando nosso plugin gratuito, o WPForms Lite, visite os fóruns de suporte onde oferecemos suporte limitado gratuito.
Obrigado! 🙂
Olá, é possível adicionar uma vírgula a cada 3 dígitos? por exemplo 99.999.999
Olá Waqas - Se o número de dígitos for fixo, isso é possível. Por exemplo, esta máscara de entrada mostrará 9 dígitos e uma vírgula a cada 3 dígitos 999\,999\,999
Espero que isso ajude!
Como posso permitir caracteres especiais na minha máscara de entrada?
Olá Afif – Temos alguns tutoriais avançados de máscara de entrada neste artigo que explicam como adicionar alguns caracteres.
Para mais ajuda com isso, por favor, 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, então por favor envie um ticket de suporte. Caso contrário, oferecemos suporte limitado gratuito no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Não quero caracteres ilegais no meu campo de texto de linha única
Olá Rahul – Eu sugiro dar uma olhada neste tutorial sobre como restringir caracteres especiais em seus campos de formulário.
Espero que isso ajude!
Como posso permitir 15 letras ou menos na minha máscara de entrada?
Olá Yusuf - Para criar as regras para uma máscara de entrada personalizada, você precisará usar um conjunto específico de símbolos. (Por favor, lembre-se de adicionar o símbolo apropriado 15 vezes.)
Espero que ajude! 🙂
Olá, minhas máscaras de entrada parecem não funcionar mais, os campos de texto apenas permitem escrever qualquer coisa, embora as máscaras estejam ativas. Alguma ajuda, por favor? obrigado.
Olá Antonio - Desculpe por isso! Teremos prazer em ajudar.
Se você tiver uma licença do WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte. Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado! 🙂
Olá,
Estou criando um campo de nome com texto de linha única e apenas alfabetos e espaços devem ser adicionados. Para isso, adicionei uma máscara de entrada como {1,50}. Isso aceita alfabetos, mas não consigo adicionar espaços. Por favor, me dê uma solução para isso.
Oi Amrita! Peço desculpas, mas as máscaras de entrada não seriam adequadas para esse tipo de caso de uso, pois elas servem para fornecer uma estrutura específica à entrada, por exemplo, um número de telefone ou um número de identificação. Espaços não poderiam ser utilizados em uma máscara de entrada.
Para fazer o que você procura, seria necessária codificação personalizada (geralmente jQuery ou JavaScript), no entanto, peço desculpas, pois não podemos oferecer suporte para esse nível de personalização. Este tópico pode te dar algumas ideias.
Sinto muito por não podermos oferecer uma solução para isso, mas se você tiver mais alguma dúvida, por favor entre em contato conosco se tiver uma assinatura ativa. Se não tiver, não hesite em nos fazer perguntas em nossos fóruns de suporte.
Olá pessoal
como eu crio uma máscara dessa forma?
+55 (99) 9 9999-9999 ou +55 (99) 9999-9999 no mesmo campo.
obrigado,
Olá! Parece que você postou esta pergunta em vários artigos, então responderei em um só lugar 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 são inseridos. Tecnicamente, o número opcional poderia ser mantido opcional, mas isso significaria que seus usuários teriam que "pular" esse caractere inserindo um espaço nessa posição do caractere e, em seguida, continuar preenchendo o restante do campo.
Deveria ser possível com alguma codificação personalizada, no entanto, sinto muito que tais personalizações estejam fora do escopo do nosso suporte. Caso você queira explorar opções de desenvolvimento personalizado, recomendamos fortemente o uso do Codeable. O Codeable seleciona todos os desenvolvedores para você para garantir que eles sejam altamente qualificados e comunicativos, e então também ajuda a guiar todo o processo de conexão e comunicação com um desenvolvedor adequado.
Aqui está o nosso tutorial sobre o uso do Codeable, que fornece mais detalhes sobre como esse processo funciona.
Ou, se você quiser uma equipe com a qual possa continuar voltando (a longo prazo) para ajuda em desenvolvimento personalizado, você também pode considerar conferir o WPBuffs.
Espero que isso ajude a esclarecer 🙂 Se você tiver mais alguma dúvida sobre isso, por favor entre em contato conosco se tiver uma assinatura ativa. Se não tiver, não hesite em nos fazer algumas perguntas em nossos fóruns de suporte.
O elemento de número de telefone não oferece máscara de entrada, essa funcionalidade é possível?
Gostaríamos de poder usar máscara de entrada no elemento de número de telefone porque ele oferece o seletor de código do país, enquanto uma entrada de texto normal não oferece (embora ofereça máscara de entrada).
Obrigado,
Mark
Olá Mark,
Não temos um recurso integrado para definir a máscara personalizada para o campo Telefone. No entanto, isso pode ser alcançado usando o Campo de Texto de Linha Única e definindo a máscara de entrada personalizada como mostrado aqui
Espero que ajude! 🙂
É possível exigir uma entrada decimal no campo numérico?
Então um usuário é sempre obrigado a inserir x números de decimais inteiros?
Por exemplo:
0.015
0.792
0.28
1.256
Olá, acredito que isso seja 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 a mesma.
Espero que isso ajude!
alguém sabe como fazer 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 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!
Oi! Como posso criar uma máscara de entrada para valor opcional
por exemplo $1.000.000 ou $250.000 adicionando uma vírgula entre eles dependendo do valor?
Olá Mariana, infelizmente, não temos uma opção integrada para formato opcional com máscara de entrada como você descreveu. Concordo que seria muito útil, no entanto. 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 alguma maneira de verificar um número de identificação de veículo (VIN) 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 no final/início como “AA9999[_]” será inserido como “AA9999” sem o espaço?