||

Máscara de telefone no formulário do elementor free (javascript)

Você pode adicionar uma máscara de telefone (que aceita tanto celular quanto fixo, com DDD entre parênteses) no formulário do Elementor Free usando um pequeno script JavaScript. Não é necessário plugin ou Elementor Pro.

Como fazer:

  1. No Elementor, adicione um campo de texto para telefone.
    Anote o ID do campo. Por padrão, o Elementor gera IDs como form-field-telefone.
  2. Adicione um widget HTML logo abaixo do formulário e cole o script abaixo.
    Se o ID do seu campo for diferente de form-field-telefone, troque no código pelo ID correto.
<script type="text/javascript">
// Função de máscara para telefone (aceita fixo e celular com DDD)
function mtel(v){
  v = v.replace(/\D/g,""); // Remove tudo que não é dígito
  v = v.replace(/^(\d{2})(\d)/g,"($1) $2"); // Coloca parênteses no DDD
  if(v.length <= 13){
    // Fixo: (xx) xxxx-xxxx
    v = v.replace(/(\d{4})(\d{4})$/,"$1-$2");
  } else {
    // Celular: (xx) xxxxx-xxxx
    v = v.replace(/(\d{5})(\d{4})$/,"$1-$2");
  }
  return v;
}
document.addEventListener('DOMContentLoaded', function() {
  var tel = document.getElementById('form-field-telefone');
  if(tel){
    tel.setAttribute('maxlength', 15);
    tel.addEventListener('input', function(){
      this.value = mtel(this.value);
    });
  }
});
</script>

Como funciona:

  • Aceita números no formato (xx) xxxx-xxxx ou (xx) xxxxx-xxxx.
  • O usuário pode digitar tanto fixo quanto celular, sempre com DDD entre parênteses.
  • O campo é limitado a 15 caracteres para evitar erros.

Se o ID do seu campo for diferente de form-field-telefone, ajuste no script para o ID correto.
Pronto! Agora seu formulário Elementor Free terá máscara para telefone fixo e celular com DDD.

Compartilhe
Facebook
Twitter
LinkedIn

Categorias

Alguma
Dúvida?

let’s get to work