Cara Membuat Tombol Form Order dan Isian Whatsapp di Blogger

Riffat Digital Services - Langsung saja disimak Cara Membuat Tombol Form Order dan Isian Whatsapp di Blogger, jika kebetulan Anda sedang mencari tutorial atau panduan Bagaimana cara membuat form baik untuk Wordpress untuk blogger anda sudah tepat datang ke tempat kami karena Script form order ini bisa langsung Anda pasang hanya dengan sekali copy paste dan untuk itu silahkan anda langsung perhatikan tutorial Bagaimana cara membuat isian order penjualan maupun order pembelian ataupun order untuk penjualan produk produk Anda bisa melakukannya menggunakan cara ini.

Dimana cara ini merupakan salah satu cara yang terbilang praktis terutama bagi Anda yang ingin memasang wa baik itu di WordPress maupun itu di blogspot yang di mana ketika ada orang yang ingin menggunakan jasa Anda atau ingin membeli produk Anda maka secara otomatis pemesanan tersebut akan langsung masuk ke nomor whatsApp yang sudah anda setting pada script tersebut yang di mana script ini kami bagikan secara gratis dan mudah-mudahan bisa bermanfaat untuk Anda semuanya yang kebetulan membutuhkannya.

Yang di mana script ini Kebetulan kami juga gunakan di toko online kami untuk keperluan pembelian barang-barang misalkan seperti baju anak baju tidur kerudung daster Arab alat-alat kecantikan maupun yang lainnya maka dengan begitu untuk saat ini pembelian melalui order whatsapp bisa dibilang lebih praktis dan tentunya lebih efisien daripada kita harus mengisi form order yang menuju email

Kemudian untuk memasang ini anda tentukan dulu Apakah anda mau memasang nya di halaman statis atau anda ingin memasangnya di setiap postingan itu tergantung Anda yang terpenting adalah ketika anda memasang script yang ada di bawah ini pastikan anda berada pada mode HTML dan bukan mode COMPOSE.

1. Yang pertama Tentukan Anda mau memasang script ini di mana misalkan Saya mau memasang nya di bagian halaman statis pada sebuah blog Anda tinggal copy-paste saja kode yang ada di bawah ini dan untuk pengeditan parameternya nanti anda bisa baca di bagian kedua.

<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>

2. Dan Dibawah ini merupakan data data atau kode-kode yang harus anda rubah sesuai dengan keinginan Anda dan silakan langsung di perhatikan saja.

- 6285223124070 silahkan anda ganti dengan nomor whatsapp (wa) Anda, pastikan tidak dimulai dengan +62 atau 08

- #3599e7 itu adalah warna default dari formnya silahkan bisa anda ganti dengan warna pilihan anda.

- Pada Pilihan 1, Pilihan 2, Pilihan 3 silahkan bisa kamu sesuaikan dan jika ingin menambahkan banyak pilihan silahkan gunakan <option value="4">Pilihan 4</option> misal ingin tambahkan lagi jadi 5 <option value="5">Pilihan 5</option> dst

Sekian dulu Apa yang bisa saya sampaikan Bagaimana cara membuat form order secara otomatis agar data tersebut terkirim secara otomatis ke WhatsApp jadi tutorial pembuatan WhatsApp ini sangat mudah sekali dan bisa anda implementasikan dan anda bisa buat khusus untuk check-out pembelian atau penjualan sekian dulu Apa yang bisa saya sampaikan tentang cara membuat formulir atau cara membuat form chat-an order yang dikirim secara otomatis ke nomor whatsApp yang kita miliki terima kasih.