Usando Máscaras de Entrada Personalizadas

Você gostaria de exigir um formato específico para um campo de formulário? Máscaras de entrada personalizadas permitem que você defina regras para os valores que os usuários podem inserir em um campo. Isso pode ser útil para números de telefone internacionais, códigos postais e muito mais.

Este tutorial mostrará como criar e adicionar uma máscara de entrada personalizada a um campo de formulário.

Antes de começar, certifique-se de que o WPForms esteja instalado e ativado em seu site WordPress. Em seguida, crie um novo formulário ou edite um existente.

Adicionando uma Máscara de Entrada Personalizada

Você pode adicionar uma máscara de entrada personalizada a qualquer campo de Texto de Linha Única. Depois de adicionar esse tipo de campo ao seu formulário, clique nele para abrir o painel Opções de Campo.

Dentro das opções de campo, você precisará clicar na aba Avançado. Em seguida, você pode adicionar sua regra ao campo Máscara de Entrada.

Máscaras de Entrada Básicas

Para criar as regras de uma máscara de entrada personalizada, você precisará usar um conjunto específico de caracteres especiais.

• 9: Numérico (0–9)
• a: Alfabético (a–z ou A–Z)
• A: Alfabético maiúsculo (A–Z)
• *: Alfanumérico (0–9, a–z ou A–Z)
• &: Alfanumérico maiúsculo (0–9 ou A–Z)

Por exemplo, se você quiser exigir um número de 5 dígitos, você inseriria 5 9s no campo Máscara de Entrada.

Quando os usuários clicarem neste campo do formulário no front-end, eles verão um sublinhado ou um "espaço em branco" para cada caractere exigido para ajudar a guiar sua entrada. Além disso, como usamos o símbolo 9, a máscara de entrada só aceitará valores numéricos (sem letras ou outros caracteres).

Você também pode incluir símbolos como hifens (-) ou parênteses em sua máscara de entrada. Por exemplo, você pode usar a seguinte máscara de entrada para exigir um formato de número de telefone com o código do país dos EUA:

+1 (999)-999-9999

Quando um usuário clicar neste campo, ele verá espaços em branco no lugar dos 9s. O +1, os parênteses e os hifens são inseridos automaticamente no campo, então os usuários só precisam preencher os números.

É importante notar que os usuários não podem enviar um formulário se preencheram parcialmente uma máscara de entrada. Eles devem inserir o número e o tipo de caracteres exigidos pela máscara de entrada, ou verão uma mensagem de validação dizendo: "Por favor, preencha todos os espaços em branco."

No entanto, adicionar uma máscara de entrada a um campo não o torna obrigatório. Os usuários ainda podem enviar o formulário se a máscara de entrada em um campo não obrigatório estiver completamente vazia.

Adicionando Caracteres Opcionais às Suas Máscaras de Entrada

Às vezes, você pode querer exigir um formato específico para um campo, mas também precisa permitir um número flexível de caracteres. Por exemplo, em muitos países, os números de telefone em diferentes regiões podem conter um número diferente de dígitos.

Coloque quaisquer caracteres opcionais entre colchetes, assim:

99 9999-9999[9]

Como o último dígito é opcional, esta máscara de entrada aceitaria 10 dígitos, como 98 7654-3210, ou 11 dígitos, como 98 7654-32109.

Exemplos Adicionais de Caracteres Opcionais em Máscaras de Entrada

Nome de usuário com 6 a 8 letras (primeira letra maiúscula, as demais minúsculas)

• Máscara: Aaaaa[a][a]
• Exemplo de Entrada: Sullie ou Sulliewp

CEP dos EUA com +4 Opcional:

• Máscara: 99999[-9999]
• Exemplo de Entrada: 98765 ou 98765-4321

Escapando Caracteres Especiais de Máscara

Devido aos caracteres especiais que as máscaras de entrada usam para criar formatos obrigatórios, existem certas letras, números e símbolos que podem aparecer como espaços em branco quando você não pretende que eles apareçam.

Para evitar a conversão de quaisquer caracteres especiais de máscara em espaços em branco no frontend, basta adicionar duas barras invertidas (\\) antes do caractere.

Como exemplo, vamos criar uma máscara de entrada para um URL do Instagram.

Se inserirmos a máscara de entrada como https://instagram.com/*{1,30}, todos os caracteres a serão convertidos em espaços em branco que os usuários deverão preencher no frontend.

Para corrigir isso, precisamos apenas adicionar uma barra invertida dupla antes de qualquer a que não queremos converter em um espaço em branco. Portanto, para este exemplo, inseriríamos a máscara de entrada como https://inst\\agr\\am.com/*{1,30} nas opções de campo.

Agora, ao visualizar este campo dentro do formulário incorporado, os espaços em branco aparecerão apenas onde pretendíamos.

Exemplos Adicionais de Escapando Caracteres Especiais em Máscaras de Entrada

SKU do Produto (2 9s seguidos por 3 números adicionais ou letras maiúsculas)

• Máscara: \\9\\9-&&&
• Exemplo de Entrada: 99-654 ou 99-BC8

Endereço do Gmail

• Máscara: *{1,50}@gm\\ail.com
• Exemplo de Entrada: [email protected]

Máscaras de Entrada Avançadas

Se você desejar ainda mais controle sobre as máscaras de entrada do seu formulário, você também pode usar opções de formatação avançadas. Elas funcionam em combinação com todos os caracteres especiais de máscara descritos acima.

Caracteres Repetidos

Você pode usar quaisquer caracteres especiais antes de {n} (onde n é um valor numérico) para exigir um caractere repetido.

Exemplos de Máscaras de Entrada com Caracteres Repetidos

CEP dos EUA com +4 Opcional

• Máscara: 9{5}[-9{4}]
• Exemplos de Entrada: 33409 ou 33409-4053

Número do Pedido de 12 Caracteres com Números e Letras Maiúsculas

• Máscara: &{12}
• Exemplos de Entrada: 29X483HK8192 ou 10G7382ZR638

Intervalos Flexíveis de Caracteres

Você pode usar qualquer um dos caracteres especiais antes de {n,m} (onde n e m representam valores numéricos) para permitir que os usuários insiram um intervalo de caracteres.

Exemplos de Máscaras de Entrada com Intervalos Flexíveis

URL do Facebook (permite 5–50 caracteres):

• Máscara: https://f\\acebook.com/*****[*{0,45}]
• Exemplos de Entrada: https://facebook.com/wpforms ou https://facebook.com/monsterinsights

Identificador do Twitter (permite 4–15 números, letras maiúsculas ou minúsculas)

• Máscara: @****[*{0,11}]
• Exemplo de Entrada: @easywpforms ou @WPBeginner

E-mail para Domínio Específico (permite 1–51 caracteres):

• Máscara: *[*{0,50}]@mysite.com
• Exemplo de Entrada: [email protected] ou [email protected]

SKU do Produto com 8–11 Caracteres (permite números ou letras maiúsculas):

• Máscara: &{4}-&{4}[&{0,3}]
• Exemplo de Entrada: A987-BC65 ou A987-BC65D43

Mascaramento para Múltiplos Valores de Entrada Possíveis

Outra opção é criar uma máscara de entrada que aceite múltiplos valores de entrada possíveis. Para fazer isso, insira uma barra invertida seguida pelos valores permitidos entre parênteses, separados por barras verticais, como em \(x|y).

Exemplos de Máscaras Que Permitem Múltiplos Entradas Possíveis

Número de Telefone com Código do País para EUA (+1), Austrália (+61) ou México (+52)

• Máscara: +\(1|61|52) 9999999999
• Exemplos de Entrada: +1 2127893920 ou +52 3307490285

Número da Conta Começando com TN ou KY

• Máscara: \(TN|KY)9{10}
• Exemplos de Entrada: TN3756284765 ou KY2975387529

Máscaras de Data / Hora

Você também pode usar máscaras de entrada personalizadas para exigir um formato específico de data ou hora.

Para configurar uma máscara de entrada para data ou hora, você precisará começar com date: seguido pelo formato que você deseja exigir.

Máscaras de Data

Usando as opções abaixo, você pode criar máscaras de entrada de data personalizadas que atendam às suas necessidades.

• d: Dia do mês em dígitos; sem zero à esquerda para dias de um dígito.
• dd: Dia do mês em dígitos; com zero à esquerda para dias de um dígito.
• m: Mês em dígitos; sem zero à esquerda para meses de um dígito.
• mm: Mês em dígitos; com zero à esquerda para meses de um dígito.
• yy: Ano com os últimos 2 dígitos; com zero à esquerda para anos menores que 10.
• yyyy: Ano com 4 dígitos

Como exemplo, date:dd/mm/yyyy exigirá uma data como 12/08/2021. Quando um usuário visitar seu formulário e passar o mouse sobre o campo, ele verá placeholders para o formato exigido.

Máscaras de Hora

Usando as opções abaixo, você pode criar máscaras de entrada de hora personalizadas que atendam às suas necessidades.

• h: Horas; sem zero à esquerda para horas de um dígito (relógio de 12 horas).
• hh: Horas; com zero à esquerda para horas de um dígito (relógio de 12 horas).
• H: Horas; sem zero à esquerda para horas de um dígito (relógio de 24 horas).
• HH: Horas; com zero à esquerda para horas de um dígito (relógio de 24 horas).
• M: Minutos; sem zero à esquerda para minutos de um dígito. M maiúsculo para evitar conflito com meses.
• MM: Minutos; com zero à esquerda para minutos de um dígito. MM maiúsculo para evitar conflito com meses.
• s: Segundos; sem zero à esquerda para segundos de um dígito.
• ss: Segundos; com zero à esquerda para segundos de um dígito.
• l: Milissegundos. 3 dígitos.
• L: Milissegundos. 2 dígitos.
• t: Marcador de hora de uma letra minúscula: a ou p.
• tt: Marcador de hora de duas letras minúsculas: am ou pm.
• T: Marcador de hora de uma letra maiúscula: A ou P.
• TT: Marcador de hora de duas letras maiúsculas: AM ou PM.

Como exemplo, date:h:MM permitirá que os usuários insiram um horário como 8:30. No frontend, os usuários verão placeholders no campo quando passarem o mouse sobre ele.

Usando Aliases para Adicionar Máscaras de Entrada

Você pode inserir um alias no campo Máscara de Entrada nas opções avançadas do campo para usar uma máscara de entrada pré-empacotada.

As máscaras de entrada disponíveis no WPForms incluem:

• alias:numeric: Permite que os usuários insiram qualquer valor numérico.
• alias:currency: Permite que os usuários insiram valores numéricos no formato 0,00.

• alias:decimal: Permite que os usuários insiram qualquer valor numérico com ou sem decimal.
• alias:integer: Permite que os usuários insiram qualquer valor de número inteiro.
• alias:percentage: Permite que os usuários insiram qualquer número de 1 a 100 como porcentagem.
• alias:url: Adiciona uma máscara de entrada para um URL começando com http://.
• alias:email: Adiciona uma máscara de entrada para um endereço de e-mail.

Perguntas Frequentes

Aqui, discutiremos algumas das perguntas mais comuns que recebemos sobre máscaras de entrada no WPForms.

Não consigo encontrar a opção Máscara de Entrada nas configurações do meu campo. Onde ela está?

A opção Máscara de Entrada está disponível apenas para o campo Texto de Linha Única. Você não a encontrará em outros tipos de campo, como Telefone, E-mail, Números ou Parágrafo.

Para usar uma máscara de entrada personalizada, adicione um campo de Texto de Linha Única ao seu formulário, clique nele para abrir as Opções do Campo e, em seguida, vá para a aba Avançado, onde você encontrará o campo Máscara de Entrada.

Usar Limitar Comprimento com uma máscara de entrada restringirá a entrada de caracteres em campos de Texto de Linha Única?

Sim. Quando você adiciona limites de caracteres e máscaras de entrada juntos em campos de Texto de Linha Única, o limite conta tudo, incluindo símbolos como hifens, como parte do limite. Para garantir que os usuários possam inserir suas informações sem problemas, ajuste o limite de caracteres para incluir esses símbolos extras.

Para mais informações sobre como ajustar limites de caracteres, consulte nosso guia sobre limitar limites de caracteres e palavras.

Por que meus caracteres especiais escapados estão sendo removidos do campo de máscara de entrada?

Por padrão, o WordPress remove barras invertidas quando os dados do formulário são processados. Se você estiver escapando caracteres especiais da máscara (como \9 ou \*) e notar que eles desaparecem, você pode preservá-los habilitando o 'slashing' dos dados do formulário.

Para fazer isso, adicione a seguinte linha ao arquivo wp-config.php do seu site, logo antes da linha que diz /* That's all, stop editing! */:

define( 'WPFORMS_ENABLE_FORM_DATA_SLASHING', true );

Isso garantirá que as barras invertidas sejam mantidas e que suas máscaras de entrada funcionem corretamente. Se você não tem certeza de como editar o arquivo wp-config.php do seu site, confira o guia da WPBeginner sobre como editar o arquivo wp-config.php no WordPress.

É isso! Agora você pode criar máscaras de entrada personalizadas para exigir formatos específicos nos campos dos seus formulários.

Em seguida, você gostaria de tornar seus formulários mais compactos? Certifique-se de conferir nosso tutorial sobre como usar layouts de várias colunas para aprender a organizar os campos em linhas no seu formulário.