Enviar form para whatsapp com javascript

[Jack Oliveira 1]

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(&quot;../img/bg-whatsite.png&quot;) 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 ajuda