Resumo de IA
Quer aprender a 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 WordPress torna a experiência do utilizador mais fácil e garante que os dados corretos são inseridos no seu formulário sempre.
Crie o 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 num campo.
Por exemplo, pode limitar o campo a aceitar apenas números ou texto. Pode também querer restringir o número de caracteres.
Máscaras de entrada são ótimas para coisas como números de telefone ou nomes de utilizador de redes sociais que seguem sempre 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 aceites:
- 9 representa qualquer número (0-9)
- a representa qualquer letra minúscula ou maiúscula
- A restringe os caracteres aceites 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 introduzido (0-9, a-z ou A-Z)
Pode também adicionar coisas como hífens ou parênteses ( ) na sua máscara de entrada. Isto é especialmente útil quando quer que as pessoas preencham o número de telefone no formulário do seu site.
Se quiser adicionar quaisquer caracteres opcionais, depois de já ter usado os parênteses, deve colocá-los entre parênteses retos [ ].
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 sabe o que é uma máscara de entrada, é hora de dar uma olhada em alguns dos exemplos mais básicos que pode usar nos seus formulários WordPress.
Código Postal dos Estados Unidos:
- Máscara:
99999 - Exemplo de Entrada do Utilizador: 89023
Código Postal dos Estados Unidos com Mais Quatro Opcional:
- Máscara:
99999 [-9999] - Exemplo de Entrada do Utilizador: 89023 ou 89023-5678
Nome de utilizador com 6-8 letras (primeira letra maiúscula, o resto minúscula):
- Máscara:
Aaaaaa [aa] - Exemplo de Entrada do Utilizador: Minnie ou Minniems
Nome de utilizador X (anteriormente conhecido como Twitter) com 4-15 números ou letras maiúsculas/minúsculas:
- Máscara:
@**** [***********] - Exemplo de Entrada do Utilizador: @easywpforms
Para obter ajuda com símbolos avançados de máscaras de entrada, consulte este tutorial sobre como adicionar máscaras de entrada aos seus formulários WordPress.
Como Criar Máscaras de Entrada em Campos de Formulário
Agora que tem uma boa ideia do que são máscaras de entrada, vamos criar uma.
1. Crie um Novo Formulário WordPress
A primeira coisa que precisará de 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, precisará de criar um novo formulário. Recomendamos a utilização do Formulário de Contacto 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 contacto, precisará de adicionar um campo de formulário Texto de Linha Única.
Arraste e solte o campo do formulário do painel esquerdo para a pré-visualização do formulário.
Depois de fazer isto, clique no campo do formulário no lado direito para abrir o painel Opções do Campo.
Clique no separador Avançadas. É aqui que definirá a sua máscara de entrada personalizada.
No nosso exemplo, pediremos às pessoas que preenchem o nosso formulário para introduzir o seu código postal dos Estados Unidos:
Esta máscara restringirá o campo para que aceite apenas 5 números.
Clique em Guardar.
3. Adicione o Seu Formulário ao Seu Site
Agora que o formulário de contacto está personalizado com uma máscara de entrada, é hora de incorporar o formulário no seu website.
Clique no botão Incorporar e escolha a localização para o seu formulário.
Em seguida, publique o seu post ou página para que o seu formulário de contacto apareça aos visitantes do seu site. Veja:
Note os underscores que guiam o utilizador a terminar de preencher o seu código postal.
Crie o seu formulário WordPress agora
Em seguida, Assuma o Controlo das Submissões de Formulários
E aí tem! Agora sabe como criar máscaras de entrada para os formulários do seu site.
Se procura mais formas de controlar como os seus formulários funcionam, consulte estes recursos:
- Limite as entradas do formulário de acordo com a data com este guia simples para o addon Form Locker
- Impeça que visitantes menores de idade preencham os seus formulários com um plugin de verificação de idade.
Pronto para criar o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, 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 será que isto será validado corretamente?
Olá Christian,
Não temos atualmente uma opção integrada para isto, embora se estiver disposto a algum código personalizado, temos um documento para programadores sobre como definir um limite máximo de caracteres.
E se quiser experimentar, aqui está o nosso tutorial adicional sobre como adicionar código personalizado como este ao seu site.
Espero que isto ajude! 🙂
O que acontece se 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 desculpa por qualquer problema com isto! Ao adicionar uma máscara de entrada, certifique-se de que está a usar um campo de Texto de Linha Única (este é atualmente o único tipo de campo que permite máscaras de entrada). Além disso, esta é uma funcionalidade mais recente, por isso certifique-se de que o seu plugin WPForms está totalmente atualizado.
Se tentar isto e ainda não vir as opções que espera, entre em contacto para que possamos ajudar. Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso envie um ticket de suporte.
Caso contrário, fornecemos 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/
Utiliza a máscara de entrada de exemplo para um endereço de e-mail em "mysite.com"
Máscara: *[*{0,50}]@mysite.com
Entrada de Exemplo: [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
renderiza na verdade um campo que tem um espaço em branco para o "a" em domain.
Entrada de exemplo: _______@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,
Peço desculpa pelo problema! Reproduzi o problema que descreveu e partilhei-o com a nossa equipa para trabalhar numa correção. Obrigado por nos informar para que possamos resolver isto! :)
Olá. Quero usar a ferramenta de máscara de entrada para limitar a entrada de caracteres em alguns dos meus campos.
Estou a usar esta máscara: *[*{0,30}].
No entanto, não inclui os "espaços" como um caractere.
Que máscara de entrada posso usar para incluir os espaços como um caractere no meu limite de 30 caracteres?
Olá Alicia,
As nossas máscaras de entrada não fornecem atualmente um requisito de "espaço" desta forma. Em vez disso, pode considerar usar um pouco de código personalizado para adicionar este limite de caracteres em vez disso (aqui está o nosso documento com detalhes).
O código nesse documento contará os espaços como caracteres, pelo que deverá funcionar de forma mais semelhante ao que tem em mente.
E caso ajude, aqui está como adicionar código personalizado como este ao seu site.
Espero que isto ajude! 🙂
Estou a ter o mesmo problema que RE CARLSON
—
Mas e se o seu website tiver a letra "a" nele?
—
Tem uma solução para isto?
Obrigado.
Olá Allan,
Tenho boas notícias — temos uma solução para isto 🙂
Para adicionar um "a" sem o transformar em parte da área de introdução, pode escapá-lo usando `\\`. Por exemplo, se introduzisse isto como a 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 à frente de qualquer A, a ou 9 que queira manter como está (sem converter em _).
Espero que isto ajude! 🙂
olá,
Preciso de alfanuméricos maiúsculos (0-9 ou A-Z) para combinar com espaços entre caracteres. Aparentemente "&" não permite qualquer espaçamento
Olá Elyas,
Não temos um caractere especial para permitir espaços; em vez disso, 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 isto ajude! 🙂
Como posso fazer com que o campo aceite apenas começando com um intervalo de números de 6 a 9? Estou a usar o WPForms Basic comprado.
Exemplo
7898981226
8985607458
9989878774
Olá Munaf!
Pode criar uma máscara de entrada personalizada para o campo de Texto de Linha Única, no entanto, não existe uma opção integrada para usar o intervalo de números lá.
Assim, pode tê-lo assim, por exemplo, "\\799999" e permitirá apenas "7" no início e depois mais 5 dígitos quaisquer, mas infelizmente não temos regras para escolher 7 OU 8 OU 9 lá no início.
E caso ajude, temos mais um ótimo tutorial sobre como usar máscaras de entrada personalizadas no WPForms aqui
Peço desculpa por qualquer confusão!
Tenha um bom dia :)
Estou a iniciar o uso do WPFroms ainda de forma gratuita para testes de compatibilidade com soluções que já tenho implementadas, contudo, ao tentar personalizar uma máscara simples sugerida por vocês como “https://www.f\\acebook.com/*{1,22}” num campo de “texto de linha única”, percebo que não são aceites caracteres especiais simples como ? . ou / ; isto é uma limitação proposital imposta a utilizadores gratuitos ou poderiam informar-me por qual símbolo deveria substituir o de * para permitir a entrada de caracteres especiais na máscara.
Olá Rodrigo,
Peço desculpa, mas estou um pouco confuso com a sua pergunta. Quando tiver oportunidade, pode por favor clarificar ou, se estiver a usar o nosso plugin gratuito, WPForms Lite, por favor 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, então é 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 isto ajude!
Como posso permitir caracteres especiais na minha máscara de entrada?
Olá Afif – Temos alguns tutoriais sobre máscaras de entrada avançadas neste artigo que explicam como adicionar alguns caracteres.
Para mais ajuda com isto, por favor envie-nos uma mensagem para o suporte para que possamos ajudar. Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso por favor envie um ticket de suporte. Caso contrário, fornecemos suporte complementar limitado 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 – Sugiro que dê uma vista de olhos neste tutorial sobre como restringir caracteres especiais nos seus campos de formulário.
Espero que isto 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, precisará de usar um conjunto específico de símbolos. (Por favor, lembre-se de adicionar o símbolo apropriado 15 vezes.)
Espero que isto ajude! 🙂
Olá, as 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 - Lamentamos por isso! Teremos todo o gosto em ajudar.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso por favor envie um ticket de suporte. Caso contrário, fornecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado! :)
Olá,
Estou a criar 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 a{1,50}. Isto aceita alfabetos, mas espaços não podem ser adicionados, por favor, dê-me uma solução para isto.
Olá Amrita! Peço desculpa, mas as máscaras de entrada não seriam adequadas para este tipo de caso de uso, pois destinam-se a fornecer uma estrutura específica à entrada, por exemplo, um número de telefone ou um número de identificação. Os espaços não poderiam ser utilizados numa máscara de entrada.
Para fazer o que procura seria necessária codificação personalizada (geralmente jQuery ou JavaScript), no entanto, peço desculpa, pois não podemos fornecer suporte para este grau de personalização. Este tópico pode dar-lhe algumas ideias.
Lamento não podermos fornecer uma solução para isto, mas se tiver mais alguma questão, por favor contacte-nos se tiver uma subscrição ativa. Se não tiver, não hesite em colocar algumas questões nos nossos fóruns de suporte.
Olá a todos
como crio uma máscara desta forma?
+55 (99) 9 9999-9999 ou +55 (99) 9999-9999 no mesmo campo.
obrigado,
Olá! Parece que publicou esta questão em vários artigos, pelo que irei abordá-la num único local aqui.
Peço desculpa, 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 introduzidos. Tecnicamente, o número opcional poderia ser mantido opcional, mas isso significaria que os seus utilizadores teriam de "saltar" esse carácter introduzindo um espaço nessa posição do carácter e, em seguida, continuar a preencher o resto do campo.
Deveria ser possível com alguma codificação personalizada, no entanto, lamento que tais personalizações estejam fora do âmbito do nosso suporte. Caso pretenda explorar opções de desenvolvimento personalizado, recomendamos vivamente a utilização do Codeable. O Codeable verifica todos os programadores para garantir que são altamente qualificados e comunicativos, e depois também ajuda a orientar todo o processo de ligação e comunicação com um programador mais adequado.
Aqui está o nosso tutorial sobre como usar o Codeable, que fornece mais detalhes sobre como funciona este processo.
Ou, se pretender uma equipa à qual possa recorrer continuamente (a longo prazo) para obter ajuda com desenvolvimento personalizado, também pode considerar verificar o WPBuffs.
Espero que isto ajude a esclarecer :) Se tiver mais alguma questão sobre isto, por favor contacte-nos se tiver uma subscrição ativa. Se não tiver, não hesite em colocar-nos algumas questões nos 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áscaras 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áscaras de entrada).
Obrigado,
Mark
Olá Mark,
Não temos uma funcionalidade integrada para definir a máscara personalizada para o campo Telefone. No entanto, isto pode ser conseguido utilizando o Campo de Texto de Linha Única e definindo a máscara de entrada personalizada como mostrado aqui
Espero que isto ajude! 🙂
É possível exigir uma entrada decimal no campo numérico?
Portanto, um utilizador é sempre obrigado a introduzir um número inteiro + x casas decimais?
Por exemplo:
0.015
0.792
0.28
1.256
Olá, acredito que isto seja possível usando a seguinte Máscara de Entrada num campo de texto de linha única: [99.999] e aqui está o screencast demonstrando a mesma.
Espero que isto ajude!
alguém sabe como fazer a máscara de moeda no wpforms exemplo: $1,252.33
Olá Cristian – pode usar a seguinte Máscara de Entrada para conseguir isso: $ [[9],999.99].
Espero que isto ajude!
Quero criar uma máscara de entrada para EMP2000 como posso fazê-lo
Olá Kashmira – pode usar a seguinte Máscara de Entrada para conseguir isso:EMP2[9999].
Espero que isto 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 entre eles dependendo do valor?
Olá Mariana, infelizmente, não temos uma opção integrada para formato opcional com máscara de entrada como descreveu. Concordo que seria muito útil, no entanto. Anotei o pedido de funcionalidade e vamos mantê-lo em atenção enquanto planeamos o nosso roteiro para o futuro.
Obrigado e tenha um bom dia!
Existe alguma forma de verificar um número de identificação de veículo (VIN) correto?
Olá Litschi – Pode certamente criar uma máscara de entrada personalizada para validar o formato correto do número de identificação de veículo (VIN).
Obrigado 🙂
Olá – posso usar uma máscara de entrada para NÃO permitir espaços?
por exemplo, se um utilizador 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?