Cara Membuat Contact Form Whatsapp

Cara Membuat Contact Form Whatsapp

Halo teman-teman, apa bakar kalian hari ini ? lama tak berjumpa, kali ini saya akan membagikan source memberikan tutorial cara membuat contact form whatsapp untuk website kalian. Pada tutorial sebelumnya juga kita sudah membahas tentang cara membuat contact form send email.

Oke langsung saja dari pada banyak basa-basi mari kita langsung ke pokoknya saja :

Silahkan teman-teman buka blogger kalian masing-masing, kemudia silahkan klik menu Theme/Tema lalu cari </style> kemudian silahkan paste kode CSS dibawah ini dilamannya.

/* Input Field CSS */
/* Default Whatsapp Form CSS by www.omjuan.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;
}
Lalu silahkan kalian cari lagi </head> kemudian taruh kode dibawah ini tepat diatasnya.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Jika sudah silahkan cari lagi kode </body> kemudian taruh code dibawah ini tepat diatas tag tersebut.
<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 = '6282399585050',
    walink2 = 'Halo saya ingin ',
    text_yes = 'Terkirim.',
    text_no = 'Isi semua Form 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_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' +
    '*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>
Jika sudah silahkan simpan Tema/Theme tersebut, kita lanjut ke tahap terakhir. Silahkan teman-teman buat Halaman/Page baru kemudian silahkan beri nama sesuai keinginan kalian, disini saya kasih nama Contact Whatsapp kemudian silahkan paste kode dibawah ini kedalam halaman html tersebut.
<form class="whatsapp-form">
<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>
<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>
<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>
<div class="datainput">
<textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>Pesan</label>
</div>
<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a>
<div id="text-info"></div>
</form>
Jika sudah silahkan save dan lihat hasilnya. Jika teman-teman masih bingung atau merasa susah untuk melakukannya silahkan kalian komentar di kolom komentar bawah ini. Terimakasih
Untuk tutorial videonya menyusul ya teman-teman.
Source Code : Idblanter.com