Como Definir uma Máscara de Entrada em um Campo do Formulário com Base na Entrada de Outro Campo

Se você espera um formato específico para os envios do seu formulário e já adicionou avisos e descrições, mas ainda assim algumas pessoas continuam enviando no formato errado, você pode usar o recurso Máscara de Entrada como solução. É possível aplicar a Máscara de Entrada nos campos de Texto Curto e Telefone.

Ao ativar a Máscara de Entrada, você pode restringir os usuários a seguir exatamente o formato que você definir.

Watch on youtube

Input masking in online forms

Ativando a Máscara de Entrada

Considerando que você já adicionou o elemento de Texto Curto ou Telefone, é possível ativar a Máscara de Entrada seguindo estes passos simples:

1. No Criador de Formulários, clique no elemento de Texto Curto ou Telefone.
2. Abra as Propriedades do campo clicando no ícone de engrenagem.
3. Na aba Opções, ative a opção Máscara de Entrada.

Com a Máscara de Entrada, você pode usar os seguintes símbolos para formatar os valores:

• # — Use o símbolo de número para mascarar entradas numéricas.
• @ — Use o símbolo de arroba para mascarar entradas de letras.
• * — Use o asterisco para mascarar tanto números quanto letras.

Você pode adicionar qualquer caractere como valor fixo ou separador entre esses símbolos de máscara.

Configurando uma Máscara de Entrada Condicional

Limitar o formato de entrada pela barra de ferramentas é fácil de entender, mas e se o formato mudar ao longo do formulário de acordo com a escolha do usuário em outro campo? Nesse caso, as condições são muito úteis. Vamos supor que estamos nos Brasil e queremos incluir números de telefone internacionais, mas também manter números domésticos e locais.

Existem duas maneiras diferentes de fazer isso:

1. Criar vários campos com condições do tipo Exibir/Ocultar

Para isso, você precisará criar dois ou mais campos para o mesmo tipo de informação, sendo que um será sempre preenchido e os outros ficarão vazios.

No nosso formulário demonstrativo, esse método foi aplicado ao campo de Endereço para mostrar a diferença que essa configuração faz. Veja como configurar:

1. Adicione um elemento Escolha Única como seletor de endereço e três elementos de Endereço no formulário, um para cada tipo de endereço.

2. Acesse a página Configurações.
3. Selecione a aba Condições.
4. Clique na opção Exibir/Ocultar Campo.

5. Depois disso, crie uma condição para exibir o campo de acordo com o tipo de endereço selecionado.

Por fim, você deve configurar a condição de Exibir/Ocultar para cada campo de Endereço.

2. Criar uma máscara condicional em um único campo

Dessa forma, um único campo é exibido o tempo todo, mas o formato pode mudar de acordo com uma condição.

No nosso formulário demonstrativo, esse método foi aplicado ao campo de Telefone para mostrar a diferença que essa configuração faz. Se o negócio for majoritariamente local, faz sentido que a máscara de entrada seja definida para números locais: 12345-1234. Porém, se a pessoa não for local, mas ainda for nacional, o formato seria: (12) 12345-1234. Já os números internacionais começam com um sinal de mais e seu respectivo código: +12 123-123-1234.

Todos os outros caracteres que adicionamos servem para ajudar no formato, ou seja, eles sempre permanecem ali. Então, para a máscara de número local no Brasil, usaríamos #####-####, o que significa que, após o quinto número, um hífen é adicionado automaticamente e mais 4 números podem ser digitados.

Outros formatos:

Números domésticos no Brasil: (##) #####-####
Números internacionais: +###-###-###-####

Para criar essa configuração:

1. Acesse a página de Configurações no topo.
2. Selecione a aba Condições.
3. Selecione Ativar/Tornar Campo Obrigatório/Mascarar Campo.

4. Configure a condição de acordo com suas necessidades. Com base na nossa demonstração, a condição para números locais ficaria como mostrado na captura de tela abaixo:

5. Recrie os passos para adicionar as mesmas condições para cada máscara no seu formulário.

Há muitos tipos diferentes de informações que podem usar máscara de conteúdo no formulário, sendo endereço e telefone apenas alguns exemplos.

Você pode ver como tudo fica neste formulário. Se quiser, também pode cloná-lo para sua conta e conferir todos os detalhes.

E, claro, se tiver qualquer dúvida ou precisar de ajuda, teremos prazer em auxiliar. Basta nos avisar criando um novo tópico ou deixando um comentário aqui.