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:
- No Elementor, adicione um campo de texto para telefone.
Anote o ID do campo. Por padrão, o Elementor gera IDs comoform-field-telefone
. - Adicione um widget HTML logo abaixo do formulário e cole o script abaixo.
Se o ID do seu campo for diferente deform-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.