Como enviar dados do formulário HTML para o Whatsapp

Matheus Costa

Autor: Matheus Costa

Postado em:

Categoria: Front-end

Veja neste artigo como enviar os dados digitados no formulário HTML para o Whatsapp com validação de campos obrigatórios.

Exemplo/Demonstração da funcionalidade:

  • Veja o exemplo abaixo de como irá funcionar o envio:

See the Pen Enviar dados do formulário HTML para o Whatsapp by Matheus Costa (@matheuscostadesign) on CodePen.

Você também pode acessar o exemplo clicando no link abaixo:

Código fonte completo:

Como fazer isso no meu formulário?

1) Adicionar onsubmit no form

  • Você vai precisar primeiramente passar uma função Javascript no onsubmit da tag form do HTML:
<form action="#" method="get" onsubmit="abrirWhatsapp()">
  <!-- seus campos/inputs aqui -->
  <button type="submit">Enviar dados p/ Whatsapp</button>
</form>

2) Nomear cada input com um ID exclusivo

  • Agora será necessário passar um ID exclusivo cada um dos seus campos do formulário, por exemplo:
<!-- id="nome" -->
<input
  type="text"
  name="nome"
  id="nome"
  placeholder="Informe seu nome completo"
  required
/>
<!-- id="telefone" -->
<input
  type="tel"
  name="telefone"
  id="telefone"
  placeholder="Informe seu telefone"
  required
/>
<!-- id="email" -->
<input
  type="email"
  name="email"
  id="email"
  placeholder="Seu melhor e-mail"
  required
/>

3) Criar script

  • Agora, no seu JavaScript inclua o código abaixo:

    • Lembrando que você deve alterar o código de acordo com os campos do seu formulário.
<script>
    function abrirWhatsapp() {
      var nome = document.getElementById("nome").value; // nome é o id do input no HTML
      var telefone = document.getElementById("telefone").value; // telefone é o id do input no HTML
      var email = document.getElementById("email").value; // e assim vai
      var msg = document.getElementById("msg").value;

      var url = "https://wa.me/5517999999999?text=" // Seu numero do Whatsapp com DDD
        + "*Formulário de Contato*" + "%0a" // Mensagem personalizada
        + "%0a" // Quebra de linha
        + "*Nome*: " + nome + "%0a" // Dados do formulário
        + "*Telefone*: " + telefone + "%0a"
        + "*E-mail*: " + email + "%0a"
        + "*Mensagem*: " + msg;
      window.open(url, '_blank').focus();
    }
</script>

Gostou da dica? Sabia dela ou já usou em algum projeto?

Tem alguma dica para acrescentar?

Comenta aí o que achou.

Valeeu! 👊