Hello MIUSM-TECH friends, this time I will share a tutorial that is currently popular, namely an order form that automatically goes to Whatsapp . This tutorial is not only for order forms, but also for registration forms, contact forms, and so on.
Usually we can find forms like this on the online store website on the Blogger / Blogspot platform because it is easier and more practical to order. Its uses are indeed quite diverse and easy to modify according to your needs in using this Whatsapp form.
In this tutorial, I didn't share the code carefully, but you have to learn it so that it can be used according to your needs.
Make sure your blog is using jQuery as below:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
This Whatsapp form design uses Material Design , if you use other styles / CSS on your blog, please follow this guide carefully.
First, pay attention to the following HTML code , make sure you understand
First, pay attention to the following HTML code , make sure you understand
id="wa_name", name="name"and 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>Uses:
id="wa_name"used to call the results from the form to javascript, each input form must have a different id.name="name"used to generate auto-fill of the browser, can be changed at will, such as:name="password",name="country",name="email".type="text"used for input type, can be changed to:type="password"andtype="number".
Very important for
id="wa_name"this section is the function for javascript, it can be used in different input code. Furthermore, the guide to the form selector or select section, different from
id="wa_name"what is inside <input, for select, the id is installed on <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>For an HTML guide so far, the next step is to compile the HTML code .
The code below is the initial code for building the form.
<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>See Also: Prevent copying in Blogger with popup warning
Please make it according to your use, here is the input code and data input .
Input Name
<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>Input Email
<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>Input Selector
<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>Input Number / Phone Number
<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>Input URL / Link
<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 are
<p>teks</p>used for input descriptions.Input Textarea
<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 are used for long descriptions.
Please use the CSS below if your blog doesn't use the default input CSS.
/* 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}
Default Color Code:
#21a51fColor can be changed with the color code you want.
See Also: How to Create an Automatic Safelink Page on Blogger
Javascript Guide for Whatsapp Order Form.
<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 = '+923123371594',
walink2 = 'asssalaam o aleykum ',
text_yes = 'how are you',
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>Guidelines and Uses:
- In the first bold code
'wa_email', that is , it is used as the input id which must be filled in , if the form is not filled in it will display the undelivered text. Please replace 'wa_email' according to the input that must be filled in. - For input select uses a slightly different variable, namely the
input_select1 = $("#wa_select :selected").text()difference is using: selected and text (). - For normal input using variables
input_name1 = $("#wa_name").val()using val (). - Please note that the last code / * Call Input Form * / and / * Final Whatsapp URL * / must have >>
;<< not commas. - Make sure that
input_select1and the like, no more than 1, if more than 1 please change itinput_select2to a number and so on. - The part
'*Name* : ' + input_name1 + '%0A' +if you see input_name1 is the result caller that we wrote on the form. - For / * Whatsapp Settings * / I'm sure my friend will understand.
If you use other input, and don't use material design input CSS, please delete the following code:
<span class="highlight"></span><span class="bar"></span>
<label>Description</label>Done.
Don't forget to Bookmark , Subscribe and Comment about this tutorial.
Hopefully useful, Thank you.