Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

From Order Wa Terbaru

Posting Komentar

 



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

Baca Juga:Cara Mengatur dan Membuat Gambar Cover di Dalam Postingan Blog

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

Baca Juga:Cara Membuat dan Memasang Widget Penjualan Produk dan Jasa di Blog

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

Baca Juga:Cara Pasang Script Realtime Data Virus Corona (Covid-19) di Blog dan Website

    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.


sumber: https://svc.riffatstore.com/2020/08/cara-membuat-tombol-form-order-dan.html

Posting Komentar untuk "From Order Wa Terbaru"