Kamis, 13 Agustus 2020

Cara Membuat Formulir Order Kirim Menuju Whatsapp di Blogger

Tags

Langsung saja disimak Cara Membuat Formulir Order Kirim Menuju Whatsapp di Blogger,  yang dimana pembuatan form order ini banyak sekali manfaatnya misalkan anda punya website atau blog jualan tentu saja form seperti ini sangat bermanfaat sekali untuk mempersingkat waktu atau memperhemat waktu agar anda tidak selalu memperhatikan penjualan ataupun pembelian pada email yang anda miliki maka dengan cara ini setiap ada penjualan atau pembelian semuanya akan langsung masuk pada nomor whatsApp yang anda miliki Jadi tunggu apalagi Anda langsung bisa memasang script ini hanya dengan satu langkah dan boom script ini langsung jadi pada website anda.
Script ini banyak manfaatnya terutama untuk membantu penjualan Anda kemudian membantu Pembelian Anda sehingga kita tidak perlu lagi menghandle penjualan atau pembelian berbagai macam jenis produk pada email karena kadang kita malas untuk membuka email atau kita tidak bisa online terus untuk memperhatikan email yang kita miliki oleh karena itu salah satu cara yang praktis dan otomatis serta simple kita harus memasang order WhatsApp pada website yang kita miliki baik untuk blogspot baik untuk WordPress maupun untuk platform yang lainnya.
Maka dari itu cara ini merupakan cara yang paling jitu dan merupakan cara yang terbaik yang bisa anda lakukan agar website anda menjadi lebih profesional dan tentunya bisa lebih memudahkan user atau pengunjung atau pembeli yang ingin membeli sesuatu barang yang ada di situs Anda ataupun di website anda maka dengan demikian formulir pengisian melalui website yang diarahkan ke nomor whatsApp akan sangat praktis dan dan ekonomi serta sangat mudah untuk digunakannya sehingga Anda tidak perlu repot-repot lagi harus keluar masuk untuk membuka email.
Cara Membuat Tombol Form Order dan Isian Whatsapp di Blogger

Jadi tunggu apalagi Anda bisa langsung memasang script dibawah ini pada website yang anda miliki atau pada blog yang anda miliki, silakan pasang Anda Script di bawah ini anda bisa menyimpannya di halaman postingan atau di halaman statis dan yang terpenting Anda harus bisa memperhatikan bahwa setiap CSS maupun script harus anda pasang pada mode HTML bukan mode COMPOSE.
<style scoped="" type="text/css">

/* Default Whatsapp Form CSS by www.trikpedia.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: #3599e7;
    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:#3599e7}#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:#3599e7;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:#3599e7}
</style>

<br />
<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">
<select id="wa_select">
  <option hidden="hidden" selected="selected" value="default">Select Option</option>
  <option value="1">Pilihan 1</option>
  <option value="2">Pilihan 2</option>
  <option value="3">Pilihan 3</option>
  <option value="4">Pilihan dst</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>Input Number</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>
<br />
Link blog Anda, gunakan http:// atau https://</div>
<div class="datainput">
<textarea id="wa_textarea" maxlength="5000" placeholder="" required="" row="1"></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>Description</label>
</div>
<a class="send_form" href="javascript:void" title="Send to Whatsapp" type="submit">Send to Whatsapp</a>
<br />
<div id="text-info">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"> 
//<![CDATA[ 
$(document).on('click','.send_form', function(){ 
var input_trikpedia = document.getElementById('wa_email'); 

/* Whatsapp Settings */ 
var walink = 'https://web.whatsapp.com/send', 
    phone = '6285223124070', 
    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_trikpedia.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 trikpedia_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(trikpedia_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>

Setelah kode diatas Anda pasang baik itu di halaman postingan atau di halaman tertentu misalnya di halaman statis dan jika sudah benar pemasangannya karena anda hanya perlu copy paste satu langkah saja maka script order pengiriman ke WhatsApp sudah jadi dan berikut adalah 3 kode yang harus anda perhatikan agar anda bisa menyesuaikan dengan kebutuhan baik itu dari warna maupun dari opsi pilihan ataupun dari nomor whatsApp yang harus anda atur.
- 6285223124070 ganti dengan nomor wa kalian dan jangan gunakan awalan 08 atau +62
- #3599e7 warna default dari form ordernya bisa kalian ganti sesuka hati

<option value="4">Pilihan 4</option> bisa kalian tambahkan sesuka kalian misal <option value="5">Pilihan 5</option> <option value="6">Pilihan 6</option> 
Sekian dulu apa yang bisa kami sampaikan tentang bagaimana cara membuat form order WhatsApp baik itu untuk WordPress maupun untuk blogger atau blogspot maupun untuk website yang lainnya jika ada pertanyaan jangan sungkan-sungkan untuk menghubungi kami lewat nomor telepon atau nomor email yang sudah kami sediakan atau Anda bisa berkomentar pada website kami sesuai dengan postingan yang ingin anda komentari dan untuk script sementara tidak bisa langsung Anda copy paste di websitenya karena website kami ini sedang masa pemulihan Jika Anda membutuhkan script tersebut silakan Anda berkomentar saja beserta Tampilkan email anda dan kami akan mengirimkan script tersebut secara gratis dan atas kunjungannya saya ucapkan terima kasih dan selamat jumpa lagi di kesempatan lainnya