post #6301

Código JS para Formatar Telefone/Celular no Formulário do Elementor

Publicado em: 02/06/2025 / Atualizado em: 02/06/2025

Categorias: BlogElementorElementorJavaScript (JS)JSWordpress

Segue abaixo código JavaScript simples para adicionar em seu site WordPress com Elementor, para formatar o campo de telefone, para seguir o padrão de formatação (XX) 9XXXX-XXXX para celular ou (XX) XXXX-XXXX para telefone fixo. Segue código abaixo:

<script>
document.addEventListener('DOMContentLoaded', function () {
  const phoneInputs = document.querySelectorAll('input[type="tel"], input[name*="form_fields[telefone]"]');

  phoneInputs.forEach(function (input) {
    input.addEventListener('input', function (e) {
      let value = e.target.value.replace(/\D/g, '');
      if (value.length > 11) value = value.slice(0, 11);

      if (value.length >= 2) {
        let ddd = value.slice(0, 2);
        let rest = value.slice(2);

        if (rest.length > 5) {
          let firstPart = rest.slice(0, rest.length - 4);
          let secondPart = rest.slice(-4);
          e.target.value = `(${ddd}) ${firstPart}-${secondPart}`;
        } else if (rest.length > 0) {
          e.target.value = `(${ddd}) ${rest}`;
        } else {
          e.target.value = `(${ddd}`;
        }
      } else {
        e.target.value = value;
      }
    });
  });
});
</script>

Lembrando que para enviar o campo telefone com essa formatação, precisa deixar o campo como tipo texto, somente assim o Elementor permite que você envie caracteres especiais junto com os números do telefone.

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/6301

ID de Referência: 6301

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato