 |
| Order form go to whatsapp on blogger site |
Order form go to whatsapp on blogger site
Hello to all on this occasion I will share how to make an order form to whatsapp on blogger.
Usually, we can find order forms like this on buying and selling sites such as online shops or landing pages, but if you have a blog that usually shares articles but wants to sell, an order form to whatsapp might help.
This form is perfect for those of you who sell digital products, for example, you sell blogger templates / other digital products, but that doesn't mean you can't use physical products.
The script I share is open source so that it can be adjusted according to your needs, and can be developed again for other purposes, for example, if you want to create a registration form, but you need at least a little coding knowledge to be able to edit it.
you can see the demo via the button below, ok for those of you who want to make it, let's see how below.
For those who want to send it to email, you can check my post, which is how to make an order form to email on blogger
How to make an order form for whatsapp on blogger
make sure your template has jQuery installed, if you don't already have one, you can copy the code below and place it above the code </head> or <!--</head>--></head>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>further copy by double click on code area the css below and place it above the code ]]></b:skin>
/* Form whatsapp by Blogger Store */
.BS-form-wa{position:fixed;display:none;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.69);z-index:999}.form-container{width:calc(100% - 20px);max-width:500px;background:#fff;box-shadow:0 10px 35px 2px rgba(61,61,61,.3);padding:30px;box-sizing:border-box;border-radius:10px;margin:2% auto;overflow:hidden}.BS-form-wa.aktif{display:block}
.BS-form-header{background:linear-gradient(to right, #f08900,#ffd91a);color:#fff;font-weight:700;padding:15px 20px;border-radius:10px;margin:0 0 30px}
span.input-title{border-left:4px solid #f08900;padding:0 15px;font-size:.9rem;display:block}.BS-form-wa #your-data{display:grid;grid-template-columns:49% 49%;grid-gap:10px;margin:10px 0 20px}
.BS-form-header a.form-close svg{fill:#fff;width:35px;height:35px;margin-top:-5px;float:right}
a.BS-btn-wa.send_form{background:linear-gradient(to right, #f08900,#ffd91a);color:#fff;font-size:15px;font-weight:bold;text-align:center;text-decoration:none;padding:10px 10px 10px 25px;width:100px;margin:15px 50px 0 0;float:left;border-radius:5px;}
.BS-btn-wa{background:linear-gradient(to right, #f08900,#ffd91a);font-size:15px;font-weight:700;color: #fff;display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:15px 25px;border-radius:7px;margin:15px;text-decoration:none;left:50%!important}
.BS-btn-wa:hover{opacity:.8;color:#fff}
.BS-btn-wa svg{fill:#fff;width:22px;height:22px;vertical-align:-5px;margin-right:10px}
.BS-input-field{position:relative;margin:15px 0 0}
.BS-input-field input,.BS-input-field textarea{font-size:15px;padding:12px 0 12px 12px;display:block;width:94%;border:1px solid #ddd;border-radius:5px}.BS-input-field input:focus,.BS-input-field textarea:focus{outline:none}
.BS-input-field label{color:#999;border-radius:20px;font-size:14px;font-weight:500;position:absolute;pointer-events:none;left:15px;top:15px;transition:.2s ease all}.BS-input-field input:focus~label,.BS-input-field input:valid~label,.BS-input-field textarea:focus~label,.BS-input-field textarea:valid~label{top:0;font-size:14px;color:#f08900;background:#fff;padding:1px 7px;margin:10px 0 0 -5px}
.BS-input-field input:focus~label,.BS-input-field input:valid~label,.BS-input-field textarea:focus~label,.BS-input-field textarea:valid~label{top:-20px!important;font-size:13px;color:#f08900;font-weight:700}.BS-input-field textarea{width:96.5%}.BS-input-field select{background:#fff;padding:12px 15px;border-radius:5px;margin:0 0 5px 0;border:1px solid #ccc;outline:none;width:100%;max-width:100%;font-size:14px;cursor:pointer}
.BS-input-field .BS-validation{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#ffd91a;color:rgba(0,0,0,.6);padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.08);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}
.BS-input-field .BS-validation.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.BS-input-field .BS-validation:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #ffd91a transparent}
#number_product{display:none}continue to put the html below, actually it can be freely placed anywhere as long as it is still in the <body> tag, but to make it look neater the structure of the template code you can put it just above the <footer> code .
<div class='BS-form-wa'>
<div class='form-container'>
<div class='BS-form-header'><span class='form-title'>Checkout Form Whatsapp</span><a class='form-close' href='javascript:void' title='Close'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/></svg></a></div>
<span class='input-title'>Data Anda</span>
<div id='your-data'>
<div class='BS-input-field'><input class='validate' id='wa_number' name='number' type='text'/><label>Number Anda</label></div>
<div class='BS-input-field'><input class='validate' id='wa_email' name='email' type='text'/><label>Email</label></div>
<div class='BS-input-field'><input class='validate' id='wa_blog' name='number blog' type='text'/><label>Number Blog</label></div>
<div class='BS-input-field'><input class='validate' id='wa_url' name='url blog' type='text'/><label>URL Blog</label></div>
</div>
<span class='input-title'>Data Lainnya</span>
<div class='BS-input-field'><select class='validate' id='wa_licence' name='licence'>
<option hidden='hidden' selected='selected' value='default'>Pilih Licence</option>
<option value='1'>Paket Personal</option>
<option value='2'>Paket Reseller</option>
</select></div>
<div class='BS-input-field'><select class='validate' id='wa_payment' name='payment'>
<option hidden='hidden' selected='selected' value='default'>Payment</option>
<option value='1'>Mandiri</option>
<option value='2'>Gopay</option>
<option value='3'>OVO</option>
<option value='4'>QRIS Lainnya</option>
<option value='5'>Paypal</option>
</select></div>
<a class='BS-btn-wa send_form' href='javascript:;' title='Send Information Product' type='submit'>SEND</a></div></div>and also put this html under the code <data:post.body/> , usually this code has more than 1 depending on the template you are using, please try 1 by 1, this html serves to call the title of our post to make the product name , if this code is in the wrong position then the post title will fail to be called.
<div id='number_product'><data:post.title/></div>and finally put the jQuery below above the code </body> or <!--</body>--></body>
<script>
//<![CDATA[
// Form whatsapp by Blogger Store
// Knob Open Tutup
$(".form-close").click(function(){
$(".BS-form-wa").fadeOut("fast")}
);$(".show-form").click(function(){
$(".BS-form-wa").fadeIn("slow")});
// validation For Column Compulsory
$('.BS-input-field .validate').each(function() {
title = $(this).attr('name');
label = $(this).parents('.BS-input-field');
$('<span class="BS-validation"><b>' + title + '</b> required</span>').appendTo(label);
});
$(document).on('keyup', '.BS-input-field .validate', function() {
if ($(this).val() != '') {
$(this).removeClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').removeClass('show');
}
});
$(document).on('change', '.BS-input-field select', function() {
$(this).removeClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').removeClass('show');
});
$('.send_form').click(whatsappchat);
function whatsappchat() {
if ($('#wa_number').val() == '') { // validation Number Lengkap
$('#wa_number').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#wa_number').focus();
return false;
} else if ($('#wa_email').val() == '') { // validation Address Email
$('#wa_email').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#wa_email').focus();
return false;
} else if ($('#wa_blog').val() == '') { // validation Number Blog
$('#wa_blog').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#wa_blog').focus();
return false;
} else if ($('#wa_url').val() == '') { // BS-validation Url Blog
$('#wa_url').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#wa_url').focus();
return false;
} else if ($('#wa_licence').val() == 'default') { // validation Licence
$('#wa_licence').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#wa_licence').focus();
return false;
} else if ($('#wa_payment').val() == 'default') { // validation Payment
$('#wa_payment').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#wa_payment').focus();
return false;
} else {
/* Arrangement Whatsapp */
var walink = 'https://web.whatsapp.com/send',
phone = '+923318397764', // Number of WhatsApp
walink2 = 'Hello, I want to buy your template with the following information:'; // Message Pemper
/* Support Smartphone */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
/* Form Input Call */
var input_number = $("#wa_number").val(),
input_email = $("#wa_email").val(),
input_numberBlog = $("#wa_blog").val(),
input_urlBlog = $("#wa_url").val(),
input_licence = $("#wa_licence :selected").text(),
input_payment = $("#wa_payment :selected").text(),
input_numberproduct = $("#number_product").text(),
input_viaUrl = location.href;
/* URL Final Whatsapp */
var BS_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
'*DATA SAYA* %0A' +
'=============================%0A' +
'*Number* : ' + input_number + '%0A' +
'*Email* : ' + input_email + '%0A' +
'*Number Blog* : ' + input_numberBlog + '%0A' +
'*Url Blog* : ' + input_urlBlog + '%0A' +
'*Metode Payment* : ' + input_payment + '%0A' +
'=============================%0A' + '%0A' +
'*SHOPPING LIST* %0A' +
'=============================%0A' +
'*Number Template* : ' + input_numberproduct + '%0A' +
'*Type Licence* : ' + input_licence + '%0A' +
'*Link Template* : ' + input_viaUrl + '%0A' +
'=============================%0A';
/* Open Window Whatsapp */
window.open(BS_whatsapp,'_blank');
window.location.href = input_viaUrl;
return false;
}
};
//]]>
</script>the part that I marked the whatsapp number and opening message, please adjust it if you have it don't forget to click save.
and please copy the html below and place it on your product posting page if you have clicked update or save.
<div style='text-align:center'>
<a class="BS-btn-wa show-form" href="javascript:void" title="Beli Sekarang"><svg viewBox='0 0 24 24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/><line x1='12' x2='12' y1='2' y2='16'/></svg>Beli Sekarang</a></div>ok so that 's how to make an order form to whatsapp on blogger, hopefully it's useful and thank you for visiting.