Como fazer um formulário de pedido enviando para o Whatsapp

byReginaldo Teodoro •outubro 04, 2020

0

Fazer um formulário de pedido enviando para o Whatsapp

Home › Tutorial ›Como fazer um formulário de pedido enviando para o Whatsapp

Olá amigos Blanter, desta vez vou compartilhar um tutorial que é popular atualmente, ou seja, um formulário de pedido que vai automaticamente para o Whatsapp . Este tutorial não é apenas para formulários de pedido, mas também para formulários de registro, formulários de contato e assim por diante.

Normalmente podemos encontrar formulários como este no site da loja online na plataforma Blogger / Blogspot porque é mais fácil e prático de encomendar. Seus usos são bastante diversos e fáceis de modificar de acordo com suas necessidades ao usar este formulário do Whatsapp.

Neste tutorial, não compartilhei o código com cuidado, mas você precisa aprendê-lo para que possa ser usado de acordo com suas necessidades.

Exemplo de resultados de formulário do Whatsapp

FORMULÁRIO DE DEMONSTRAÇÃO DO WHATSAPP

Certifique-se de que seu blog está usando jQuery conforme abaixo:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Este design de formulário do Whatsapp usa Material Design , se você usar outros estilos / CSS em seu blog, siga este guia com atenção.

ASSISTIR VÍDEO

Em primeiro lugar, prestar atenção ao seguinte HTML código , certifique-se de compreender id="wa_name", name="name"e type="text".

<div class="datainput">
<input class="validate" id="wa_name" name="name" required="" type="text" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Your Name</label>
</div>

USOS:

id="wa_name" usado para chamar os resultados do formulário para javascript, cada formulário de entrada deve ter um id diferente.
name="name"usado para gerar auto-suficiência do navegador, pode ser alterado à vontade, tais como: name="password", name="country", name="email".
type="text"usado para o tipo de entrada, pode ser alterado para: type="password"e type="number".

Muito importante para id="wa_name"esta seção é a função para javascript, ela pode ser usada em diferentes códigos de entrada.

Além disso, o guia para o seletor de formulários ou seção de seleção, diferente do id="wa_name"que está dentro <input, para selecionar, o id é instalado <select.

<select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>Select Option</option>
  <option value="1">List Option 1</option>
  <option value="2">List Option 2</option>
  <option value="3">List Option 3</option>
</select>

Para um guia de HTML até agora, a próxima etapa é compilar o código HTML .

O código abaixo é o código inicial para construir o formulário.

<form class="whatsapp-form">

.... Kode input dan datainput ....

<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a>
<div id="text-info"></div>
</form>

Consulte também: Criando um widget de bate-papo do Whatsapp com vários números

Faça-o de acordo com o seu uso, aqui está o código de entrada e a entrada de dados .

NOME DE ENTRADA

<div class="datainput">
<input class="validate" id="wa_name" name="name" required="" type="text" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Your Name</label>
</div>

EMAIL DE ENTRADA

<div class="datainput">
<input class="validate" id="wa_email" name="email" required="" type="email" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Email Address</label>
</div>

SELETOR DE ENTRADA

<div class="datainput">
<select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>Select Option</option>
  <option value="1">List Option 1</option>
  <option value="2">List Option 2</option>
  <option value="3">List Option 3</option>
</select>
</div>

NÚMERO DE ENTRADA / NÚMERO DE TELEFONE

<div class="datainput">
<input class="validate" id="wa_number" name="count" required="" type="number" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Input Number</label>
</div>

URL / LINK DE ENTRADA

<div class="datainput">
<input class="validate" id="wa_url" name="url" required="" type="url" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>URL/Link</label>
<p>Link blog Anda, gunakan http:// atau https://</p>
</div>

Tags são <p>teks</p>usadas para descrições de entrada.

ÁREA DE TEXTO DE ENTRADA

<div class="datainput">
<textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>Description</label>
</div>

Textareas são usadas para longas descrições.

Use o CSS abaixo se o seu blog não usar o CSS de entrada padrão.

/* Default Whatsapp Form CSS by www.idblanter.com */
form.whatsapp-form {
    box-shadow: 0 1px 6px rgba(32,33,36,.28);
    border-radius: .5rem;
    padding: 20px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}
 .whatsapp-form a.send_form {
    color: #fff;
    background: #21a51f;
    text-decoration: none;
    display: inline-block;
    padding: 10px 25px;
    border-radius: .3rem;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 15px;
}
#text-info span {
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-weight: 700;
    margin: 15px 0;
    border-radius: .5rem;
}
#text-info span.yes {
    background: #c6ffc5;
    color: #0ea904;
}
#text-info span.no {
    background: #ffc5c5;
    color: #ce0404;
}
/* Input Field CSS */
.datainput{position:relative;margin:5px 0 20px}.datainput p{font-size:12px;background:#eee;display:inline-block;padding:5px 15px;border-radius:.5rem}.whatsapp-form textarea{min-height:120px}.datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0;border-bottom:1px solid #ddd;outline:none;background:#fff}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:18px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:14px;color:#21a51f}#notif-license span{font-size:40px}#notif-license{display:none;position:fixed}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#21a51f;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{width:50%}.indigox{background:#3f51b5}.orangex{background:#ff9800}.pinkx{background:#e91e63}.bluex{background:#2196F3}.purplex{background:#9c27b0}.redx{background:#F44336}.greenx{background:#4CAF50}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:13px;color:#21a51f}

Código de cores padrão: a #21a51f
cor pode ser alterada com o código de cores que você deseja.

Veja também: Tokoshop Blanter Online Shop Blogger Template com Whatsapp Checkout

GUIA DE JAVASCRIPT PARA O FORMULÁRIO DE PEDIDO DO WHATSAPP.

<script type="text/javascript"> 
//<![CDATA[ 
$(document).on('click','.send_form', function(){ 
var input_blanter = document.getElementById('wa_email'); 
 
/* Whatsapp Settings */ 
var walink = 'https://web.whatsapp.com/send', 
    phone = '6281977094280', 
    walink2 = 'Halo saya ingin ', 
    text_yes = 'Terkirim.', 
    text_no = 'Isi semua Formulir lalu klik Send.'; 
 
/* Smartphone Support */ 
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
var walink = 'whatsapp://send'; 
} 
 
if("" != input_blanter.value){ 
 
 /* Call Input Form */ 
var input_select1 = $("#wa_select :selected").text(), 
    input_name1 = $("#wa_name").val(), 
    input_email1 = $("#wa_email").val(), 
    input_number1 = $("#wa_number").val(), 
    input_url1 = $("#wa_url").val(), 
    input_textarea1 = $("#wa_textarea").val(); 
 
/* Final Whatsapp URL */ 
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' + 
    '*Name* : ' + input_name1 + '%0A' + 
    '*Email Address* : ' + input_email1 + '%0A' + 
    '*Select Option* : ' + input_select1 + '%0A' + 
    '*Input Number* : ' + input_number1 + '%0A' + 
    '*URL/Link* : ' + input_url1 + '%0A' + 
    '*Description* : ' + input_textarea1 + '%0A'; 
 
/* Whatsapp Window Open */ 
window.open(blanter_whatsapp,'_blank'); 
document.getElementById("text-info").innerHTML = '<span class="yes">'+text_yes+'</span>'; 
} else { 
document.getElementById("text-info").innerHTML = '<span class="no">'+text_no+'</span>'; 
} 
}); 
//]]> 
</script>

DIRETRIZES E USOS:

No primeiro código em negrito 'wa_email', ou seja , é utilizado como o id de entrada que deve ser preenchido , caso o formulário não seja preenchido, o texto não será enviado. Substitua 'wa_email' de acordo com a entrada que deve ser preenchida.
Para a seleção de entrada usa uma variável ligeiramente diferente, a diferença está input_select1 = $("#wa_select :selected").text() usando: selecionado e texto ().
Para entrada normal usando variáveis input_name1 = $("#wa_name").val() usando val ().
Observe que o último código / * Formulário de entrada de chamada * / e / * URL final do Whatsapp * / deve ter >> ;<< sem usar vírgulas.
Certifique-se de que input_select1e semelhantes, não mais do que 1, se mais do que 1, altere input_select2para um número e assim por diante.
A parte '*Name* : ' + input_name1 + '%0A' +se você ver input_name1 é o chamador de resultado que escrevemos no formulário.
Para / * Configurações do Whatsapp * / Tenho certeza que você entendeu.

Se você usar outra entrada e não usar CSS de entrada de material design, exclua o seguinte código:

<span class="highlight"></span><span class="bar"></span>
<label>Description</label>

Feito.

BAIXAR CÓDIGO HTML

TUTORIAIS DE VÍDEO

Esse é o tutorial que posso compartilhar desta vez, o código javascript é minha criação, que apliquei no template da Loja Online Tokoshop Blanter . Não se esqueça de marcar , assinar e comentar sobre este tutorial.

Esperançosamente útil, obrigado.

Tags: Projetos temas blogspot