Script de conversão de formulário para mensagem de WhatsApp

Script de conversão de formulário para mensagem de WhatsApp com quebras de linhas e espaçamentos.


FIDDLE: Script

REQUISITOS: Para máscara funcionar a página deve conter Jquery e Jquery mask. Deve-se adicionar o telefone no link do WhatsApp no final do script

HTML:


<div class="i-form-01">
            <div id="formContainer">
            <input type="hidden" id="origem" name="origem"
              value="Nome do SITE - Formulário de agendamento" />

              <div class="boxField">
              <label for="nome">Nome completo</label>
                <input type="text" class="formInput mt0" id="nome" placeholder="Nome completo" name="nome" />
              </div>

              <div class="boxField">
              <label for="phone">Telefone</label>
                <input type="text" class="formInput" id="phone" placeholder="Telefone" name="phone" />
              </div>

              <div class="boxField">
              <label for="mensagem">Mensagem adicional</label>
                <input type="text" class="formInput mt0" id="mensagem" placeholder="Mensagem Adicional" name="mensagem" />
              </div>

            <div class="boxField">
            <a id="iSendButton" class="btnSubmit btn btnDefault needCheck"><i
                class="fab fa-whatsapp"></i>Enviar agendamento</a>
            </div>

          </div>
          </div>


JS:



    let iSendButton = document.getElementById("iSendButton");


    let formName = document.querySelector('#nome');

    let formDDD = document.querySelector('#phone');

    let formPhone = document.querySelector('#mensagem');

    formName.addEventListener('focusout', checkEmpty);

    formDDD.addEventListener('focusout', checkEmpty);

    formPhone.addEventListener('focusout', checkEmpty);

    //send form main event

    iSendButton.addEventListener("click", (e) => {

      if (checkEmpty() != false) {

        // pega a largura da tela
              var screenWidth = window.innerWidth;

        if (screenWidth >= 991) {

          window.open('https://web.whatsapp.com/send?phone=55#####1&text=Estava%20no%20Website%20e%20gostaria%20de%20agendar%20%0a%0aMeu%20nome:%20'+formName.value+'%20%0aMeu%20numero:%20'+formDDD.value+'%20%0aMensagem:%20'+formPhone.value+'', '_blank');

        }

        else {
          window.open('https://api.whatsapp.com/send?phone=55#####&text=Estava%20no%20Website%20e%20gostaria%20de%20agendar%20%0a%0aMeu%20nome:%20'+formName.value+'%20%0aMeu%20numero:%20'+formDDD.value+'%20%0aData:%20'+formPhone.value+'', '_blank');
          
        }

        /* //all cool to send

        document.querySelector('#iSendButton').innerHTML = 'Enviando...';

        document.querySelector('#iSendButton').classList.add('needCheck');


        setTimeout(function () {

          //document.getElementById('formContainer').innerHTML = '<div class="col-12"><p id="formSuccessfullSend">Mensagem enviada! Aguarde e embreve retornaremos seu contato!</p></div>';

          window.location.href = "https://www.nomedosite.com.br/obrigado-pelo-contato";

        }, 1500); */

      }

    });

    //simple check empty

    function checkEmpty() {

      let errorBorderColor = "2px solid #e58787";

      let okBorderColor = "1px solid #dedede";

      let nome = document.getElementById("nome");

      let ddd = document.getElementById("phone");

      let phone = document.getElementById("mensagem");

      let valid = true;


      if (nome.value === "") {

        nome.style.border = errorBorderColor;

        valid = false;

      } else {

        nome.style.border = okBorderColor;

        console.log("ok");

      }

      if (ddd.value === "") {

        ddd.style.border = errorBorderColor;

        valid = false;

      } else {

        ddd.style.border = okBorderColor;

      }

      if (phone.value === "") {

        phone.style.border = errorBorderColor;

        valid = false;

      } else {

        phone.style.border = okBorderColor;

      }


        if(valid == true) {

            document.querySelector('#iSendButton').classList.remove('needCheck');

        }

        else {

            if(document.querySelector('#iSendButton').classList.contains('needCheck') == false) {

                document.querySelector('#iSendButton').classList.add('needCheck');

            }

        }

      return valid;

    }
    
 
    // MASK CNPJ SCRIPTS

                  var phone = $("#phone");
                // cep.mask('99999-999', {reverse: true});
            console.log(phone);
      
                  $('#phone').mask('(00) 0000-00009');
                $('#phone').blur(function(event) {
                   if($(this).val().length == 15){ // Celular com 9 dígitos   2 dígitos DDD e 4 da máscara
                      $('#phone').mask('(00) 00000-0009');
                   } else {
                      $('#phone').mask('(00) 0000-00009');
                   }
                });

  


Você também pode gostar de ler

Adicionando contatos no Mailing da Eco WD

Em 19/02/2025 às 09h50 - Atualizado em 19/02/2025 às 09h52

Formulário dinâmico do Interago inserido por JS - Atualizado

Em 25/03/2022 às 00h26 - Atualizado em 03/04/2024 às 06h29

CRM E-mail Marketing

Em 12/03/2024 às 09h06 - Atualizado em 12/03/2024 às 15h46