Enviar form para whatsapp com javascript
Ola pessoa bom dia
estou tendo problemas em enviar um form via whatsapp
nao esta sendo enviado.
e gostaria também que o form ficasse limpo quando for clicado em enviar se atualizar a pagina ele informa que tem conteudo no form..
Fiz da seguinte forma
CSS
<style>
/* STYLE WHATSAPP */
.ws_icon_send {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background: #03877B;
}.ws_icon_send img {
width: 18px !important;
max-width: 18px !important;
height: 18px !important;
vertical-align: middle !important;
}
.ws_modal {
display: none; /* Hidden by default */
position: absolute; /* Stay in place */
z-index: 2001; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgb(14, 58, 2); /* Fallback color */
background-color: rgba(14, 58, 2, 0.73)
}/ ws_modal Content/Box /
.ws_modal-content {
margin: 15% auto; /* 15% from the top and centered */
width: 320px; /* Could be more or less, depending on screen size */
height: 494px;
border: none;
box-shadow: none;
text-align: left;
}
#ws_bg{
width: 40px !important;
height: 40px !important;
margin-top: 55px !important;
border-radius: 50% !important;
margin-left: 32px !important;
}
.ws_nome{
font-family: Arial !important;
color: #fff !important;
font-size: 15px !important;
margin-top: 60px !important;
position: absolute !important;
width: 160px !important;
height: 20px !important;
margin-left: 5px !important;
text-transform: capitalize !important;
}
.ws_online{
font-family: Arial !important;
color: #fff !important;
font-size: 11px !important;
margin-top: 80px !important;
position: absolute !important;
width: 130px !important;
height: 20px !important;
margin-left: 5px !important;
}.ws_modal-content .ws_form
{
padding-top: 10px;
font-family: Arial, Helvetica, sans-serif;
}.ws_form p
{
margin: 0px !important;
padding: 0px 20px !important;
}.ws_form input
{
border: 0 solid #848484 !important;
height: 16px !important;
background: #F7FFF0 !important;
font-size: 12px !important;
box-shadow: 2px 2px 5px #DBDBDB !important;
outline: 0 !important;
resize: none !important;
margin-bottom: 10px !important;
border-radius: 3px !important;
padding: 10px 10px 15px 10px !important;
box-sizing: content-box !important;
width: 260px !important;
min-height: auto !important;
line-height: normal !important;
}
#ws_retorno{
text-align:center;
}/ The Close Button /
.ws_close {
color: #fff;
float: right;
font-size: 40px;
font-weight: bold;
margin-top: -20px;
margin-right: -20px;
}.ws_close:hover,
.ws_close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.ws_pos_titulo{
text-transform: uppercase;
font-size: 11px;
line-height: 17px;
font-weight: 500;
letter-spacing: .15em;
margin-bottom: 7px;
color: rgba(0,0,0,0.5);
}
.ws_pos_atendente{
font-size: 33px;
line-height: 35px;
font-weight: 300;
margin-bottom: 24px;
font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.ws_horario_funcionamento{
font-size: 11px;
line-height: 17px;
font-weight: 500;
letter-spacing: .15em;
margin-bottom: 7px !important;
color: rgba(0,0,0,0.5);
padding: 10px 52px 10px 30px !important;
text-align: right !important;
}
#ws_copyright{
font-size: 11px;
line-height: 17px;
font-weight: 500;
letter-spacing: .15em;
color: rgba(0,0,0,0.5);
text-align:center;
margin-top: 5px !important;
}#ws_copyright a
{
color: #666;
}
.ws_btn_numero{
text-transform: uppercase;
display: inline-block;
font-size: 16px;
line-height: 19px;
letter-spacing: 0.071em;
padding: 23px 46px;
border-radius: 40px;
font-weight: 500;
white-space: nowrap;
color: #1cb39b;
border: 2px solid #77D7C8;
text-decoration: none;
background: #fff;
}
.ws_bg_text{
padding: 6px 0 8px 0;
padding-left: 15px;
padding-right: 10px;
background-color: #dcf8c6;
float: right;
clear: both;
border-radius: 7.5px;
position: relative;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
border-top-left-radius: 7.5px;
border-top-right-radius: 0px;
font-size: 13px;
font-family: Arial;
margin-bottom: 20px;
margin-right: 20px;
color: #000 !important;
line-height: 1.6 !important;
}
.ws_separador{
clear:both;
}
.ws_emoji_offline{
position: absolute;
font-size: 60px;
left: -48px;
top: -25px;
}
.ws_link_whatsapp{
color: #000;
text-decoration: none;
}.ws_link_whatsapp:hover, .ws_link_vcard:hover
{
color: #CE292C;
text-decoration: none;
}.ws_link_atendente, .ws_link_telefone
{
color: #19a6e8;
text-decoration: underline;
}.ws_link_atendente:hover, .ws_link_telefone:hover
{
color: #1A7B88;
text-decoration: underline;
}
.ws_link_vcard{
color: #000;
text-decoration: none;
}
.ws_suc_send{
position: absolute;
left: -40px;
top: -7px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background: #03877B;
}
.ws_suc_vcard{
position: absolute;
left: -40px;
top: -7px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background: #03877B;
}
</style>
SCRIPT
<script type="text/javascript">
const setup = (function () {
// console.log('setup');
document.getElementById('sendMessage').onsubmit = function (e) {
e.preventDefault();
console.log('click');
const country = '55';
const ws_p3 = (document.getElementById('telefone').value || '')
.replace(/\D/g, '')
.replace(new RegExp(`^${country}`), '');
const ws_p1 = document.getElementById('nome').value;
const ws_p2 = document.getElementById('email').value;
const ws_p4 = document.getElementById('msg').value;phone = '5569999957255'
// o texto ou algo vindo de um <textarea> ou <input> por exemplo
message = 'Nome: ${ws_p1} \n`
message += 'E-mail: ${ws_p2} \n`
message += 'Data:' <?=date('d/m/Y');?>, <?=date('h:m:s'); ?> \n \n
message += 'Telefone: ${ws_p3} \n`
message += 'Msg: ${ws_p4} \n`
enviar = window.encodeURIComponent(message);
if (!ws_p3) {
alert('Numero Inválido');
return;
}
//window.open("https://api.whatsapp.com/send?phone=" + celular + "&text=" + pedido, "_blank");
// const link = `https://wa.me/${country}${phone}?text=${enviar}`;
link = `https://web.whatsapp.com/send?phone=${country}${phone}&text=${enviar}`;
if ((new MobileDetect(window.navigator.userAgent)).mobile()) {
link = `https://api.whatsapp.com/send?phone=${country}${phone}&text=${enviar}`;
}
console.log(ws_p3, link);
window.open(link);
};
})
if (window.attachEvent) {
window.attachEvent('onload', setup);
} else {
window.addEventListener('load', setup, false);
}
</script>
HTML
<a href="#" data-toggle="modal" data-target="#myModal" style="position:fixed;width:60px;height:60px;bottom:40px;right:40px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888;
z-index:1000;">
<img style="margin-top:5px" src="../img/icon_chat.gif">
</a>
<div id="myModal" style="position:fixed;" class="modal ws_modal">
<div class="ws_modal-content" id="bgModal" style="background: url("../img/bg-whatsite.png") center center no-repeat;">
<span class="close">×</span>
<span class="ws_foto">
<img id="ws_bg" src="../img/logo.png"></span>
<span class="ws_nome">João Carlos</span>
<span class="ws_online">online</span>
<div id="ws_div_form" class="ws_form">
<div class="ws_horario_funcionamento">
<span style="height: 40px; display: block;">Atendimento via WhatsApp de Seg a ---, das 08:00h às 19:30h.</span></div>
<form method="POST" id="sendMessage">
<p><input type="text" name="nome" id="nome" maxlength="40" required="" placeholder="Nome"></p>
<p><input type="email" maxlength="40" name="email" id="email" required="" placeholder="E-mail"></p>
<p><input type="tel" name="telefone" id="telefone" required="" placeholder="Nº Telefone" maxlength="15"></p>
<p><input type="text" name="msg" id="msg" maxlength="250" required="" placeholder="Qual a sua dúvida? "></p>
<p><button type="submit" id="send" class="ws_icon_send"><img src="../img/icon_send.png"></button></p>
<p id="ws_copyright">by <a href="#" target="_blank">Msg Via WhatsApp</a></p>
</form>
</div>
</div>
</div>
Desde já agradeço se alguem poder dar uma ajudaDiscussão (0)
Carregando comentários...