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');
}
});