Na era digital, personalização e praticidade são cruciais para aprimorar experiências online.
Ao criar formulários no Etus Site, uma ferramenta inovadora para construção de páginas, a aplicação da Máscara de DDD destaca-se como funcionalidade essencial.
Este guia explora de forma detalhada como implementar eficientemente a Máscara de DDD em seu formulário, assegurando uma coleta organizada de dados e facilitando a interação dos usuários com seu site. Descubra como essa prática aprimora a experiência do usuário, agregando valor à sua presença online.
1. Acesse o editor de páginas;
2. Clique no ícone de engrenagem que fica no canto superior direito da tela;
3. Em seguida, clique em “Javascript & CSS”;
4. Clique para “Adicionar” um novo código;
5. Escolha um nome para seu código, selecione a opção “Funcionamento” e adicione no campo de texto todo o código abaixo;
<script src=”https://code.jquery.com/jquery-3.6.1.min.js” integrity=”sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js” integrity=”sha512-jTgBq4+dMYh73dquskmUFEgMY5mptcbqSw2rmhOZZSJjZbD2wMt0H5nhqWtleVkyBEjmzid5nyERPSNBafG4GQ==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>
<script>
$(document).ready(function(){
$(“#PHONE”).inputmask({
“mask”: [“99 (99) 9999-9999”, “99 (99) 99999-9999”],
autoUnmask: true,
onUnMask: function(maskedValue, unmaskedValue) {
//do something with the value
if(unmaskedValue.length == 11 || unmaskedValue.length == 10){
unmaskedValue = “55” + unmaskedValue;
}
return unmaskedValue;
}
});
});
</script>
6. A única mudança que você precisará fazer no código, é alterar a parte do link onde está escrito #PHONE pelo ID do campo de telefone do formulário.
7. Em seguida clique em “Salvar”!
Para identificar o ID do campo de telefone do formulário, siga os passos abaixo:
1. Com o seu editor de páginas aberto, clique em “Pré-visualizar” no canto superior direito da sua tela;
2. Agora, com o botão direito do mouse você precisará dar um clique no campo de telefone do formulário e selecionar a opção “Inspecionar elemento”;
3. Abrirá no canto direito da tela uma caixa onde você terá que identificar qual é o ID do elemento, que para este campo ficará sempre neste padrão: input_000000_0_00000000000″.
4. Após isso, copie o identificador e substitua diretamente no código, no campo indicado no passo 6.
