Enviar form para whatsapp com javascript

Jack Oliveira · Novembro 9, 2020

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

Entrar

Enviar form para whatsapp com javascript

Pergunta

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

0 respostas a esta questão

Recommended Posts

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante