Utilizar Máscaras de Entrada Personalizadas

Gostaria de exigir um formato específico para um campo de formulário? As máscaras de entrada personalizadas permitem definir regras para os valores que os utilizadores podem introduzir num campo. Isto pode ser útil para números de telefone internacionais, códigos postais e muito mais.

Este tutorial irá mostrar-lhe 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 está instalado e ativado no seu site WordPress. Em seguida, crie um novo formulário ou edite um existente.

Adicionar uma Máscara de Entrada Personalizada

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

Dentro das opções do campo, terá de clicar no separador Avançadas. Em seguida, pode adicionar a 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, terá de utilizar 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 desejar exigir um número de 5 dígitos, introduziria 5 9s no campo Máscara de Entrada.

Quando os utilizadores clicarem neste campo de formulário no frontend, verão um sublinhado ou um “espaço em branco” para cada caractere exigido para ajudar a orientar a sua entrada. Adicionalmente, como utilizámos o símbolo 9, a máscara de entrada só aceitará valores numéricos (sem letras ou outros caracteres).

Também pode incluir símbolos como hifens (-) ou parênteses na sua máscara de entrada. Por exemplo, poderia 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 utilizador clicar neste campo, verá espaços em branco no lugar dos 9s. O +1, os parênteses e os hifens são introduzidos automaticamente no campo, pelo que os utilizadores só têm de preencher os números.

É importante notar que os utilizadores não podem submeter um formulário se tiverem preenchido parcialmente uma máscara de entrada. Têm de introduzir o número e o tipo de caracteres exigidos pela máscara de entrada, caso contrário, verão uma mensagem de validação a dizer: “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 utilizadores ainda podem submeter o formulário se a máscara de entrada num campo não obrigatório estiver completamente vazia.

Adicionar Caracteres Opcionais às Suas Máscaras de Entrada

Por vezes, pode querer exigir um formato específico para um campo, mas também precisar de 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 diferentes números de dígitos.

Coloque quaisquer caracteres opcionais entre parênteses retos, como se segue:

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 utilizador com 6–8 Letras (primeira letra maiúscula, as restantes minúsculas)

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

Código Postal dos EUA com +4 Opcional:

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

Escapar Caracteres Especiais da Máscara

Devido aos caracteres especiais que as máscaras de entrada utilizam para criar formatos obrigatórios, existem certas letras, números e símbolos que podem aparecer como espaços em branco quando não é essa a sua intenção.

Para evitar a conversão de quaisquer caracteres especiais da máscara de entrada 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 introduzirmos 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 utilizadores terão de preencher no frontend.

Para corrigir isto, basta adicionar uma barra invertida dupla antes de qualquer a que não queiramos converter num espaço em branco. Assim, para este exemplo, introduziríamos a máscara de entrada como https://inst\\agr\\am.com/*{1,30} nas opções de campo.

Agora, ao visualizar este campo no formulário incorporado, os espaços em branco aparecerão apenas onde pretendido.

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

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

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

Endereço Gmail

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

Máscaras de Entrada Avançadas

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

Caracteres Repetidos

Pode utilizar quaisquer dos caracteres especiais em frente de {n} (onde n é um valor numérico) para exigir um caractere repetido.

Exemplos de Máscaras de Entrada com Caracteres Repetidos

Código Postal dos EUA com +4 Opcional

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

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

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

Intervalos Flexíveis de Caracteres

Pode usar quaisquer um dos caracteres especiais antes de {n,m} (onde n e m representam valores numéricos) para permitir que os utilizadores 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

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

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

Email para um 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 o fazer, 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últiplas Entradas Possíveis

Número de Telefone com Código do País para os 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 de Conta Começando com TN ou KY

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

Máscaras de Data / Hora

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, terá de começar com date: seguido do formato que pretende exigir.

Máscaras de Data

Utilizando as opções abaixo, pode criar máscaras de entrada de data personalizadas que se adequem às suas necessidades.

• d: Dia do mês em algarismos; sem zero à esquerda para dias de um só algarismo.
• dd: Dia do mês em algarismos; com zero à esquerda para dias de um só algarismo.
• m: Mês em algarismos; sem zero à esquerda para meses de um só algarismo.
• mm: Mês em algarismos; com zero à esquerda para meses de um só algarismo.
• yy: Ano em 2 algarismos; com zero à esquerda para anos inferiores a 10.
• yyyy: Ano em 4 algarismos

Como exemplo, date:dd/mm/yyyy exigirá uma data como 12/08/2021. Quando um utilizador visita o seu formulário e passa o rato sobre o campo, verá marcadores de posição para o formato exigido.

Máscaras de Hora

Utilizando as opções abaixo, pode criar máscaras de entrada de hora personalizadas que se adequem às suas necessidades.

• h: Horas; sem zero à esquerda para horas de um só algarismo (relógio de 12 horas).
• hh: Horas; com zero à esquerda para horas de um só algarismo (relógio de 12 horas).
• H: Horas; sem zero à esquerda para horas de um só algarismo (relógio de 24 horas).
• HH: Horas; com zero à esquerda para horas de um só algarismo (relógio de 24 horas).
• M: Minutos; sem zero à esquerda para minutos de um só algarismo. M maiúsculo para evitar conflito com meses.
• MM: Minutos; com zero à esquerda para minutos de um só algarismo. MM maiúsculo para evitar conflito com meses.
• s: Segundos; sem zero à esquerda para segundos de um só algarismo.
• ss: Segundos; com zero à esquerda para segundos de um só algarismo.
• l: Milissegundos. 3 algarismos.
• L: Milissegundos. 2 algarismos.
• t: Marcador de hora de uma só letra minúscula: a ou p.
• tt: Marcador de hora de duas letras minúsculas: am ou pm.
• T: Marcador de hora de uma só 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 utilizadores insiram uma hora como 8:30. No frontend, os utilizadores verão placeholders no campo quando passarem o rato sobre ele.

Utilizar Aliases para Adicionar Máscaras de Entrada

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é-embalada.

Os aliases de máscara de entrada disponíveis no WPForms incluem:

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

• alias:decimal: Permite que os utilizadores insiram qualquer valor numérico com ou sem decimal.
• alias:integer: Permite que os utilizadores insiram qualquer número inteiro.
• alias:percentage: Permite que os utilizadores insiram qualquer número de 1 a 100 como percentagem.
• alias:url: Adiciona uma máscara de entrada para um URL que começa 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 minhas definições de campo. Onde está?

A opção Máscara de Entrada está disponível apenas para o campo Texto de Linha Única. Não a encontrará noutros tipos de campo, como Telefone, Email, 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á ao separador Avançado, onde encontrará o campo Máscara de Entrada.

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

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

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

Por que é que os meus caracteres especiais escapados estão a ser removidos do campo da máscara de entrada?

Por defeito, o WordPress remove barras invertidas quando os dados do formulário são processados. Se estiver a escapar caracteres especiais da máscara (como \9 ou \*) e notar que desaparecem, pode preservá-los ativando o slashing dos dados do formulário.

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

define( 'WPFORMS_ENABLE_FORM_DATA_SLASHING', true );

Isto garantirá que as barras invertidas sejam retidas e que as suas máscaras de entrada funcionem corretamente. Se não tiver a certeza de como editar o ficheiro wp-config.php do seu site, consulte o guia do WPBeginner sobre edição do ficheiro wp-config.php no WordPress.

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

Em seguida, gostaria de tornar os seus formulários mais compactos? Certifique-se de que consulta o nosso tutorial sobre utilização de layouts de várias colunas para aprender a organizar os campos em linhas no seu formulário.