Como colocar máscara de telefone no formulário do Elementor

Como Colocar Máscara de Telefone no Elementor: Guia Prático

Adicionar máscara de telefone no formulário do Elementor é uma solução simples e eficiente para melhorar a usabilidade dos seus formulários. Com uma pequena inserção de código JavaScript e uma configuração rápida no campo do formulário, você evita erros no preenchimento e garante uma aparência mais profissional.

Neste artigo, vamos mostrar passo a passo como aplicar máscara de telefone no Elementor usando jQuery. O processo é rápido, seguro e pode ser feito sem precisar instalar plugins adicionais.

Por que usar máscara de telefone no Elementor?

Ao adicionar uma máscara de telefone no Elementor, você garante que os usuários preencham o número corretamente, seguindo o formato padrão brasileiro, como (11) 91234-5678. Isso ajuda a evitar erros e aumenta a conversão em formulários de contato, WhatsApp, cadastro, entre outros.

Além disso, a máscara proporciona:

• Validação visual imediata
• Melhor experiência do usuário
• Maior confiabilidade nos dados coletados

Pré-requisitos antes de aplicar a máscara

Antes de iniciar, certifique-se de que você:

• Está utilizando o Elementor Pro (recomendado, mas também funciona no gratuito com recursos limitados)
• Tem um formulário criado no Elementor com um campo de telefone ou WhatsApp
• Pode inserir scripts através de um widget HTML

Passo a passo para aplicar a máscara de telefone

Agora que você já entende os benefícios, vamos ao que interessa: aplicar a máscara de telefone no Elementor com jQuery.

1. Inserir o script no widget HTML

O primeiro passo é adicionar os scripts necessários dentro de um widget HTML no Elementor.

Siga os passos:

1. Abra a página com o formulário no Elementor.
2. Arraste um widget HTML para qualquer parte da página (pode ser no final).
3. Cole o seguinte código:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$(document).ready(function(){
  $('#form-field-whatsapp').mask('(00) 00000-0000');
});
</script>

Esse script carrega o jQuery e o plugin de máscara, aplicando o formato brasileiro ao campo de telefone com o ID form-field-whatsapp.

2. Configurar o campo do formulário

Depois de inserir o script, é hora de ajustar o campo do seu formulário onde será aplicada a máscara de telefone no Elementor.

Siga os passos:

1. Clique no formulário do Elementor.
2. Selecione o campo que será usado como número de telefone (geralmente chamado de telefone ou WhatsApp).
3. Vá até a aba Advanced (Avançado) nas configurações do campo.
4. Em ID do campo (Field ID), insira o seguinte:

whatsapp

Isso fará com que o campo receba o ID form-field-whatsapp, que é exatamente o que o script espera para aplicar a máscara corretamente.

Esse ajuste é essencial. Sem definir o ID corretamente, a máscara não será aplicada.

Como ocultar o widget HTML no Elementor

Você pode ter notado que ao adicionar o widget HTML, ele cria um pequeno espaço em branco no layout. Para resolver isso:

1. Clique no widget HTML com o script.
2. Vá até a aba Advanced (Avançado).
3. Em Responsive (Responsivo), marque as três opções:
   • Ocultar no desktop
   • Ocultar no tablet
   • Ocultar no celular

Dessa forma, o widget continuará funcionando normalmente (aplicando a máscara), mas não ocupará nenhum espaço visual na página.