SUBSCRIBE OUR YOUTUBE CHANNEL 👉
 Join in Google News
If You Want Adsense Approval for your blog Contact Us Adsense Ready theme Now!
Home
Blogger Widgets
JavaScript

how to create a whatsapp order form on blogger

how to create a whatsapp order form on blogger by blogger store
how to create a whatsapp order form on blogger
how to create a whatsapp order form on blogger

how to create a whatsapp order form on blogger

Hello to all on this occasion I will share how to create an order form via whatsapp and email on blogger.

in my previous post I have shared the order form to whatsapp and the order form to email , the operation is the same that I will share this time I combine the two forms so that your buyers are free to choose whether they want to checkout via whatsapp or email.

Besides that, this form has a different style from the previous one, of course, if the previous form focused on digital products, this form focuses more on physical products.

so for those of you who want to create your own online store on your blog, this order form via whatsapp and email will be perfect.

The scripts that I share are all open source so you can have more freedom to edit them and can develop them again, but please don't delete my name and credit so I can still share the open source code tutorial with you.

for the demo you can see through the button below, ok for those of you who want to make it, let's see how below.

How to make an order form via whatsapp and email 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 the css below and place it above the code ]]></b:skin>

/*whatsapp checkout form and email by BS code*/
.BS-checkout-content{position:absolute;top:50%;left:50%;padding:35px 10px 10px 10px;transform:translate(-50%,-45%);background-color:#fff;border-radius:.5rem;max-width:500px;width:90%;box-shadow:inset 0 2px 6px 0 rgba(49,53,59,.12);max-height:calc(100vh - 150px);overflow:auto;margin:auto}
.BS-checkout-content:hover{overflow-x:hidden;overflow-y:auto}
.BS-checkout-content .BS-close{position:absolute;right:15px;top:3px;font-size:15px;}
.BS-checkout-content .BS-close:before{content:'Close';position:relative;right:2px;top:0;font-size:12px;color:#999}
.BS-checkout-content .BS-close a.knob-opencap{width:auto;background:transparent;color:#999;padding:;text-decoration:none}
.BS-checkout-wrap{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;}
#BS-shopping{padding:5px;display:block}
#BS-confirmation{display:grid;grid-template-columns:1fr 1fr;grid-gap:0 15px}
.BS-datainput{position:relative;margin-bottom:5px;margin-right:5px}
.BS-datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0!important;border-bottom:1px solid #ddd!important;outline:none;background:#fff}
.BS-datainput input{font-size:14px;padding:12px 0!important;display:block;width:100%;border:none!important;border-bottom:1px solid #ddd!important}
.BS-datainput input:focus{outline:none}
.BS-datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}
.BS-datainput .focus{box-shadow:inset 0 -1px 0 0 #f89000!important}
.BS-datainput .BS-validation{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#f89000;color:#fff;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-datainput .BS-validation.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.BS-datainput .BS-validation:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #f89000 transparent}
a.send_form{position:relative;display:inline-block;background:#f89000;color:#ffffff;padding:7px;border-radius:5px;text-align:center;font-size:13px;font-weight:400;text-decoration:none;margin-top:5px}
.img-product{display:grid;grid-template-columns:1fr 2.7fr}
.img-product img{max-width:150px;float:left;margin:10px 15px 0 0;border-radius:5px}
.info-product{font-size:13px;margin-top:10px}
.info-product i{color:#999;font-size:11px;margin:8px 0;display:block}
#number_product{font-size:20px;font-weight:600}

/*css darkmode adjust the class if different or delete this section*/
.darkMode .send_form,.darkMode .knob-opencap{color:#fff}
.darkMode .BS-checkout-content,.darkMode .BS-datainput select,.darkMode .BS-datainput input{background-color:#252526!important}

then 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 if the position is wrong then the product name and product price will fail to be called.

<div class='BS-checkout-wrap'>
<div class='BS-checkout-content'>
<div class='BS-close'>
<a class='knob-opencap' href='javascript:void(0);'>&#10005;</a>
</div>
<div class='img-product'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,150)' expr:title='data:post.title'/>
<div class='info-product'>
<div id='number_product'><data:post.title/></div>
<br/>Price :
<span class='price-s'></span>
<i>*Belum termasuk Ongkos kirim</i>
</div></div>
<div id='BS-shopping'>
<div id='BS-confirmation'>
<div class='BS-datainput'>
<input class='validate' id='numbercomplete' name='Number' placeholder='Number Anda' required='' type='text' value=''/>
</div>
<div class='BS-datainput'>
<input class='validate' id='numberWA' name='No HP' placeholder='No HP' required='' type='number' value=''/>
</div>
<div class='BS-datainput'>
<input class='validate' id='email' name='Email' placeholder='Email' required='' type='text' value=''/>
</div>
<div class='BS-datainput'><select class='validate' id='payment' name='No Rekening'>
<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>
<div class='BS-datainput'>
<input class='validate' id='address' name='Address' placeholder='Address' required='' type='text' value=''/>
</div>
</div>
<a class='send_form' id='to_wa' href='javascript:;' title='Pesan via whatsapp' type='submit'>Pesan via whatsapp</a>
<a class='send_form' id='to_mail' href='javascript:;' title='Pesan via Email' type='submit'>Pesan via Email</a>
</div>
</div>
</div>

and finally put the jQuery below above the code </body> or <!--</body>--></body> , the part that I marked please be adjusted if it's done don't forget to click save.

    <script>
//<![CDATA[
/*
* BS Code Checkout Form Whatsapp And Email
*/
// knob Open Cap
$('.knob-opencap').click(function(){
$('.BS-checkout-wrap').fadeToggle()});
 
var input_price = $('#price').text(); // Take Price Product
$('.price-s').text(input_price);
 
// validation For the Mail contents column
$('.BS-datainput .validate').each(function() {
    title = $(this).attr('name');
    label = $(this).parents('.BS-datainput');
    $('<span class="BS-validation"><b>' + title + '</b> required</span>').appendTo(label);
});
   $(document).on('keyup', '.BS-datainput .validate', function() {
    if ($(this).val() != '') {
        $(this).removeClass('focus');
        $(this).parents('.BS-datainput').find('.BS-validation').removeClass('show');
    }
});
$(document).on('change', '.BS-datainput select', function() {
    $(this).removeClass('focus');
    $(this).parents('.BS-datainput').find('.BS-validation').removeClass('show');
});
$('.send_form').click(checkout);
function checkout() { 
if ($('#numbercomplete').val() == '') { // validation Number Complete
          $('#numbercomplete').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.BS-datainput').find('.BS-validation').addClass('show');
          });
        $('#numbercomplete').focus();
        return false;
    } else if ($('#numberWA').val() == '') { // validation Number Hp
          $('#numberWA').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.BS-datainput').find('.BS-validation').addClass('show');
          });
        $('#numberWA').focus();
        return false;
    } else if ($('#email').val() == '') { // validation Address Email
          $('#email').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.BS-datainput').find('.BS-validation').addClass('show');
          });
        $('#email').focus();
        return false;
      } else if ($('#payment').val() == 'default') { // validation Payment
          $('#payment').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.BS-datainput').find('.BS-validation').addClass('show');
          });
        $('#payment').focus();
        return false;
      } else if ($('#address').val() == '') { // validation Address
          $('#address').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.BS-datainput').find('.BS-validation').addClass('show');
          });
        $('#address').focus();
        return false;
    } else {
 
   /* Arrangement Email */
var email = 'yourmail@gmail.com', //Address Email You
    maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
    mailsubject = '&subject=Confirm purchase ', //Email Subject But Appears On Smartphone Only
    maillink1 = '',
    distance = '',
    maillink2 = '&body=Hello, I want to buy your product with the following information: ', //Welcome Message in email
    
    /* Arrangement Whatsapp */ 
    phone = '+923318397764', // Number Whatsapp You
    walink = 'https://web.whatsapp.com/send', 
    walink2 = 'Hello, I want to buy your product with the following information:'; // Opening Message on WhatsApp
      
    /* Smartphone support */ 
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
var maillink = 'mailto:',
    distance ='<br>';
    maillink1 = '?cc=&bcc=',
    walink = 'whatsapp://send';
}  
 
    /* Call input form */ 
var input_number = $('#numbercomplete').val(), // Take input number
    input_number = $('#numberWA').val(), // Take input cellphone number
    input_email = $('#email').val(), // Take the input address Email
    input_payment = $('#payment :selected').text(), // takeInputPayment
    input_address = $('#address').val(), // Take the input address
    input_numberproduct= $('#number_product').text(), // Take a product number
    input_price = $('#price').text(), // Take product price
    input_notes = $('#notes').val(), // Take buyers
    input_viaUrl = location.href; // Take the current url or product link

    /* URL Final Email */ 
var mail_link = maillink + email + maillink1 + mailsubject + input_number + maillink2 + '%0A%0A' + distance + distance +
    'DATA SAYA ' + distance + 
    '%0A-----------------------------%0A' + '%0A' + distance + distance +
    'Number : ' + input_number + '%0A' + distance + 
    'No Hp : ' + input_number + '%0A' + distance +
    'Email : ' + input_email + '%0A' + distance +
    'Address : ' + input_address + '%0A' + distance +
    'Method Payment : ' + input_payment + '%0A' + distance +
    '%0A-----------------------------%0A' + '%0A' + distance + distance + 
    'LIST LIST shoppingAN %0A' + distance +
    '-----------------------------%0A' + distance +
    'Number Product: ' + input_numberproduct+ '%0A' + distance + 
    'Price Product: ' + input_price + '%0A' + distance +
    'Notes Pembeli : ' + input_notes + '%0A' + distance +
    'Link Product: ' + input_viaUrl + '%0A' + distance + 
    '%0A-----------------------------%0A';
      
    /* URL Final Whatsapp */ 
var whatsapp_link = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
    'DATA SAYA ' +
    '%0A-----------------------------%0A' + '%0A' +
    'Number : ' + input_number + '%0A' +
    'No Hp : ' + input_number + '%0A' +
    'Email : ' + input_email + '%0A' +
    'Address : ' + input_address + '%0A' +
    'Method Payment : ' + input_payment + '%0A' +
    '%0A-----------------------------%0A' + '%0A' +
    'LIST shoppingAN %0A' +
    '-----------------------------%0A' +
    'Number Product: ' + input_numberproduct+ '%0A' +
    'Price Product: ' + input_price + '%0A' +
    'Notes Pembeli : ' + input_notes + '%0A' +
    'Link Product: ' + input_viaUrl + '%0A' +
    '%0A-----------------------------%0A';
 
     /* Open Jendela Email dan Whatsapp  */ 
     $('#to_wa').attr('href',whatsapp_link).attr('target','_blank');
     $('#to_mail').attr('href',mail_link).attr('target','_blank');

     /* Empty all columns if sent */ 
     $('#numbercomplete').val('');
     $('#numberWA').val('');
     $('#email').val('');
     $('#payment :selected').text('Payment');
     $('#address').val('');
     $('#notes').val('');
  }
};
//]]> 
</script>

This article has been updated in the previous html, I have deleted it and replaced it with a more interesting one

to create a product post page, please check my post in HTML CSS for product posts

ok so that 's how to make an order form via whatsapp and email on blogger, hopefully it's useful and thank you for visiting.



Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment