Quer saber como criar máscaras de entrada para os formulários do seu sítio?
A possibilidade de personalizar a forma como os dados são introduzidos nos seus formulários WordPress facilita a experiência do utilizador e garante que os dados corretos são sempre introduzidos no formulário.
Crie o 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 introduzidos num campo.
Por exemplo, pode limitar o campo a aceitar apenas números ou texto. Também pode querer restringir o número de caracteres.
As máscaras de entrada são óptimas 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
As máscaras de entrada utilizam os seguintes caracteres para criar 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 maiúsculas alfanuméricas (0-9 ou A-Z)
- * permite a introdução de qualquer letra ou número (0-9, a-z, ou A-Z)
Também pode adicionar coisas como hífenes ou parênteses ( ) na sua máscara de entrada. Isto é especialmente útil quando pretende que as pessoas preencham o seu número de telefone no formulário do seu sítio.
Se quiser acrescentar caracteres opcionais, depois de já ter utilizado os parênteses, deve colocá-los entre parênteses rectos [ ].
Por exemplo, esta máscara de entrada exigiria um mínimo de 4 caracteres, mas também seriam permitidas entradas mais longas:
**** [***********]
Exemplos de máscaras de entrada
Agora que já sabe o que é uma máscara de entrada, está na altura de ver alguns dos exemplos mais básicos que pode utilizar nos seus formulários WordPress.
Estados Unidos Código postal:
- Máscara:
99999 - Exemplo de introdução do utilizador: 89023
Código postal dos Estados Unidos com a opção "Mais quatro":
- Máscara:
99999 [-9999] - Exemplo de introdução do utilizador: 89023 ou 89023-5678
Nome de utilizador com 6-8 letras (a primeira letra em maiúsculas e as restantes em minúsculas):
- Máscara:
Aaaaaa [aa] - Exemplo de entrada do utilizador: Minnie ou Minniems
X (anteriormente conhecido como Twitter) Nome de utilizador 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 de máscara de entrada avançados, 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. Criar um novo formulário WordPress
A primeira coisa que precisa 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, é necessário criar um novo formulário. Recomendamos a utilização do Formulário de Contacto Simples como um ponto de partida fácil para os testes.
2. Adicionar um campo de texto de uma linha
Para adicionar uma máscara de entrada ao seu formulário de contacto, terá de adicionar um campo de formulário de Texto de linha única .
Arraste e largue o campo do formulário do painel esquerdo para a pré-visualização do formulário.
Depois de o ter feito, clique no campo do formulário do lado direito para abrir o painel Opções de campo.
Clique no separador Avançadas. É aqui que definirá a sua máscara de entrada personalizada.
No nosso exemplo, pedimos às pessoas que preenchem o nosso formulário para introduzirem o seu código postal dos Estados Unidos:
Esta máscara restringirá o campo de modo a que apenas aceite 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, é altura de incorporar o formulário no seu sítio Web.
Clique no botão Incorporar e escolha a localização do seu formulário.
Em seguida, publique o seu post ou página para que o formulário de contacto apareça aos visitantes do seu site. Dê uma olhadela:
Repare nos sublinhados que orientam o utilizador a terminar o preenchimento do seu código postal.
Crie o seu formulário WordPress agora
Em seguida, assuma o controlo dos envios de formulários
E já está! Agora já sabe como criar máscaras de entrada para os formulários do seu sítio.
Se procura mais formas de controlar o funcionamento dos seus formulários, consulte estes recursos:
- Limite as entradas de formulários de acordo com a data com este guia simples para o addon Form Locker
- Impeça os visitantes menores de idade de preencherem os seus formulários com um plugin de verificação de idade.
Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.
Posso definir um comprimento mínimo/máximo, por exemplo, para um campo de uma linha, e isso será validado corretamente?
Olá, Christian,
Atualmente, não dispomos de uma opção integrada para este efeito, embora, se estiver disposto a utilizar código personalizado, tenhamos um documento para programadores sobre a definição de 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 existe nada no campo Classes CSS em Opções avançadas?
Olá Dianne,
Peço desculpa por qualquer problema que tenha surgido! Ao adicionar uma máscara de entrada, certifique-se de que está a utilizar 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 fazer isso e ainda não vir as opções que espera, entre em contacto connosco para que possamos ajudar. Se tem uma licença WPForms, tem acesso ao nosso suporte por email, por isso envie um ticket de suporte.
Caso contrário, fornecemos 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/
Utiliza a máscara de entrada de exemplo para um endereço de correio eletrónico em "mysite.com"
Mask: *[*{0,50}]@mysite.com
Example Input: [email protected] or [email protected]
Mas e se o seu sítio Web 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 é que formato a máscara de camada de modo a que toda a cadeia "mydomain.com" permaneça intacta?
Desde já, obrigado pela vossa ajuda!
Olá Re,
Peço desculpa pelo problema! Reproduzi o problema que descreveu e partilhei-o com a nossa equipa para encontrar uma solução. Obrigado por nos informar para que possamos resolver o problema! 🙂
Olá. Pretendo utilizar a ferramenta de máscara de entrada para limitar a entrada de caracteres em alguns dos meus campos.
I’m using this mask: *[*{0,30}].
No entanto, não inclui os "espaços" como um carácter.
Que máscara de introdução posso utilizar para incluir os espaços como um carácter no meu limite de 30 caracteres?
Olá, Alicia,
Atualmente, as nossas máscaras de entrada não fornecem um requisito de "espaço" desta forma. Em vez disso, pode considerar utilizar um pouco de código personalizado para adicionar este limite de caracteres(aqui está o nosso documento com detalhes).
O código nesse documento conta os espaços como caracteres, por isso deve funcionar mais como o que tem em mente.
E, caso seja útil, eis 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 vosso sítio Web tiver a letra "a"?
-
Há alguma solução para este problema?
Obrigado.
Olá Allan,
Tenho boas notícias - temos uma solução para isso 🙂
Para adicionar um "a" sem o transformar em parte da área de entrada, pode escapar-lhe utilizando `\\`. Por exemplo, se introduzir isto como a sua máscara de entrada: `este é \\a teste aaa`, acabaria por ficar: "este é um teste ___".
Por isso, certifique-se de que coloca a barra invertida dupla a seguir a qualquer A, a ou 9 que queira manter como está (e não converter num _).
Espero que isto ajude! 🙂
Olá,
Preciso de letras maiúsculas alfanuméricas (0-9 ou A-Z) para combinar com espaço entre caracteres. Aparentemente, "&" não permite qualquer espaçamento
Olá, Elyas,
Não temos um carácter especial para permitir espaços; em vez disso, pode simplesmente adicionar um espaço entre os caracteres & que quiser, para que o campo de máscara de entrada seja lido como "&&&& &&&&".
Espero que isto ajude! 🙂
Como é que posso fazer para que um campo só seja aceite se começar apenas com um intervalo de 6-9 números. Estou a utilizar o WPForms Basic comprado.
Exemplo
7898981226
8985607458
9989878774
Olá Munaf!
Pode criar uma máscara de entrada personalizada para o campo Texto de linha única, no entanto, não existe uma opção integrada para utilizar o intervalo de números.
Por isso, podes ter, por exemplo, "\\799999" e só será permitido "7" no início e depois 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 desculpa por qualquer confusão!
Boa viagem 🙂
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 desculpa mas estou um pouco confuso com a sua pergunta. Quando tiver oportunidade, pode esclarecer ou, se estiver a utilizar o nosso plugin gratuito, WPForms Lite, visite os fóruns de apoio onde oferecemos apoio limitado gratuito.
Obrigado! 🙂
Olá, é possível acrescentar uma vírgula depois de cada 3 dígitos? por exemplo 99,999,999
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 após cada 3 dígitos 999\,999\,999
Espero que isto ajude!
Como é que posso permitir caracteres especiais na 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 este assunto, envie-nos uma linha de apoio para que possamos ajudar. Se você tem uma licença WPForms, você tem acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte. Caso contrário, fornecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Não quero caracteres ilegais no meu campo de texto de linha única
Rahul - Sugiro que dê uma vista de olhos a este tutorial sobre como restringir caracteres especiais nos seus campos de formulário.
Espero que isto ajude!
Como é que posso permitir 15 letras ou menos na minha máscara de entrada?
Para criar as regras para uma máscara de entrada personalizada, é necessário utilizar um conjunto específico de símbolos. (Lembre-se de adicionar o símbolo apropriado 15 vezes).
Espero que isto ajude! 🙂
Olá, as minhas máscaras de entrada parecem já não funcionar, os campos de texto só deixam escrever o que quer que seja, embora as máscaras estejam activas. Alguma ajuda, por favor? obrigado.
Olá António - Lamento o sucedido! Teremos todo o gosto em ajudar.
Se você tem uma licença WPForms, você tem acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte. Caso contrário, oferecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado! 🙂
Hi,
Estou a criar um campo de nome com texto de linha única e só devem ser adicionados alfabetos e espaços. Para tal, adicionei um mastro de entrada como a{1,50}. Isto aceita alfabetos, mas os 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 utilização, uma vez que se destina 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 podem ser utilizados numa máscara de entrada.
Para fazer o que procura, seria necessária codificação personalizada (normalmente jQuery ou JavaScript), mas peço desculpa porque não podemos fornecer suporte para este grau de personalização. No entanto, este tópico pode dar algumas ideias.
Lamento não podermos fornecer uma solução para este problema, mas se tiver mais alguma dúvida, 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 apoio.
Olá pessoal
Como é que crio uma máscara desta forma?
+55 (99) 9 9999-9999 ou +55 (99) 9999-9999 na mesma entrada.
tks,
Olá! Parece que colocou esta questão em vários artigos, por isso vou abordá-la aqui num único local.
Peço desculpa, mas não é possível especificar onde o número opcional seria colocado, uma vez que a máscara de entrada funciona de acordo com a sequência em que são introduzidos. Tecnicamente, o número opcional poderia ser mantido opcional, mas isso significaria que os utilizadores teriam de "saltar" esse carácter, introduzindo um espaço nessa posição de carácter e continuando a preencher o resto do campo.
Deve ser possível com alguma codificação personalizada, mas lamento que essas personalizações estejam fora do âmbito do nosso suporte. Caso pretenda analisar as opções de desenvolvimento personalizado, recomendamos vivamente a utilização do Codeable. O Codeable analisa todos os programadores para se certificar de que são altamente qualificados e comunicativos e, em seguida, também ajuda a orientar todo o processo de ligação e comunicação com o programador mais adequado.
Aqui está o nosso tutorial sobre a utilização do Codeable, que fornece mais pormenores sobre o funcionamento deste processo.
Ou, se quiser uma equipa a quem possa continuar a recorrer (a longo prazo) para obter ajuda no desenvolvimento personalizado, pode também considerar consultar o WPBuffs.
Espero que isto ajude a esclarecer 🙂 Se tiver mais alguma dúvida sobre este assunto, 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 apoio.
O elemento do número de telefone não oferece mascaramento de entrada, essa funcionalidade é possível?
Gostamos de poder utilizar a máscara de entrada no elemento do número de telefone porque este oferece o seletor de código de país, ao passo que uma entrada de texto normal não o faz (embora ofereça máscara de entrada).
Obrigado,
Mark
Olá, Mark,
Não temos um recurso embutido para definir a máscara personalizada para o campo Telefone. No entanto, isso pode ser feito usando 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?
Então um utilizador é sempre obrigado a introduzir o número inteiro + x de casas decimais?
Por exemplo:
0.015
0.792
0.28
1.256
Olá, creio que isto deve ser possível utilizando a seguinte máscara de entrada num campo de texto de uma linha: [99,999] e aqui está o screencast que demonstra o mesmo.
Espero que isto ajude!
alguém sabe como fazer a máscara de moeda em wpforms exemplo: $1.252,33
Cristian - pode utilizar a seguinte máscara de entrada para o conseguir: $ [[9],999.99].
Espero que isto ajude!
Pretendo criar uma máscara de entrada para a EMP2000, como posso fazê-lo?
Olá Kashmira - pode utilizar a seguinte máscara de entrada para o conseguir:EMP2[9999].
Espero que isto ajude!
Olá! Como posso criar uma máscara de entrada para um montante opcional
por exemplo $1,000,000 ou $250,000 adicionando uma vírgula no meio, dependendo do montante?
Olá Mariana, infelizmente, não temos uma opção incorporada para o formato opcional com máscara de entrada, como descreveu. No entanto, concordo que seria muito útil. Tomei nota do pedido de funcionalidade e vamos mantê-lo no nosso radar enquanto planeamos o nosso roteiro para o futuro.
Obrigado e bom proveito!
Existe alguma forma de verificar se o número de identificação do veículo (VIN) está correto?
Olá, Litschi - Pode certamente 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 utilizar uma máscara de entrada para NÃO permitir espaços?
Por exemplo, se um utilizador escrever "AA 9999", a máscara forçará "AA9999"?
Ou um espaço final/principal como "AA9999[_]" será introduzido como "AA9999" sem o espaço?