Cara Membuat Contact Form WhatsApp di Blogger - Halo sobat, berhubung banyak permintaan tentang Bagaimana cara Membuat contact form whatsapp seperti pada halaman kontak situs web ini. Untuk script kali ini di buat oleh Mas Rio Blanter dari Dunia Blanter.
Berikut ini adalah langkah-langkah Cara Membuat Contact Form WhatsApp di Blogger :
1. Login ke akun Blogger kamu
2. Pada dasbor blogger, klik Tab Tema / Template
3. Klik Edit HTML
4. Jika kamu belum memiliki kode jquery versi terbaru di template kamu, salin dan tempel kode script berikut tepat di atas kode tag penutup head. Namun jika kamu merasa sudah memiliki kode jquery versi terbaru, abaikan bagian ini.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>5. Lalu, tempelkan kode CSS berikut tepat di atas tag penutup </head>
<style>
form.whatsapp-form{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}.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}}
</style>6. Kemudian tempelkan kode Javascript berikut tepat di atas tag penutup </body>
<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 = '6281262393639',
walink2 = 'Halo saya ingin bertanya',
text_yes = 'Terkirim.',
text_no = 'Isi semua Formulir lalu klik Kirim Pesan.';
/* 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' +
'*Nama Lengkap* : ' + input_name1 + '%0A' +
'*Alamat Email* : ' + input_email1 + '%0A' +
'*Pilihan* : ' + input_select1 + '%0A' +
'*No. HP* : ' + input_number1 + '%0A' +
'*URL/Link* : ' + input_url1 + '%0A' +
'*Pesan* : ' + 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>Keterangan :
a. Ubah tulisan berwarna kuning menjadi nomor WhatsApp kamu dengan format 628, contohnya : 628123456789
7. Setelah semua tahap di atas sudah selesai, simpan Tema.
Cara Membuat Contact Form WhatsApp di Blogger
Setelah tahap peng-editan tema selesai, kamu bisa masuk ke dalam tab halaman. Kemudian buat Halaman Baru dengan judul Halaman Kontak, Kontak, Contact, Contact Us, Hubungi Kami, dan lain sebagainya. *atur sesuai keinginan kamu
Pada pembuatan halaman baru, pilih mode penulisan HTML, jangan mode COMPOSE. *supaya kode berfungsi
Pada penulisan HTML, tempelkan kode HTML berikut
<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>Nama Lengkap</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>Alamat Email</label> </div>
<div class="datainput"> <select id="wa_select"> <option hidden='hidden' selected='selected' value='default'>Pilihan</option> <option value="1">Pilihan 1</option> <option value="2">Pilihan 2</option> <option value="3">Pilihan 3</option> </select> </div>
<div class="datainput"> <input class="validate" id="wa_number" name="count" required="" type="number" value=''/> <span class="highlight"></span><span class="bar"></span> <label>No. HP</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>Keterangan</label> </div>
<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Kirim Pesan</a> <div id="text-info"></div> </form>Kemudian publikasikan halaman kamu.
Kamu bisa melakukan pengecekan, apakah kode berhasil atau tidak berfungsi. Jika ada masalah terkait artikel ini, silahkan hubungi saya atau admin lainnya di halaman kontak.
Kesimpulan & Penutup
Demikian artikel tentang Cara Membuat Contact Form WhatsApp di Blogger ini saya bagikan. Semoga bermanfaat. Adapun isi / atau kode script ini mutlak di buat oleh Rio Blanter. Saya selaku penulis di situs ini hanya membagikan nya sebagai referensi untuk kamu coba.
Referensi :
Tags
Blogging