 |
| Blogger Shopping Cart Send Email Order Form Checkout |
Blogger Shopping Cart Send Email Order Form Checkout
Hello to all on this occasion I will share how to make an order form to email on blogger.
in my previous post I have shared how to make an order form to whatsapp on blogger and this time I will share a similar order form but the surgery will be sent to an email.
for the style, it's the same as the order form style to whatsapp, I just changed the jQuery a little so I can send it to email.
when I made this form I had a problem where the message would be cut off and the text without any distance if sent via smartphone, but I have fixed this.
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 to 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 by hovering the pointer on code and double click on my website every where is that policy applyig so when ever you come to my site and want to copy the code just repeat the process tyhe code below and place it above the code ]]></b:skin>
/* Form Email by Blogger Store */
.BS-form-mail{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-mail.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-mail #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-mail.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-mail{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-mail:hover{opacity:.8;color:#fff}
.BS-btn-mail 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-mail'>
<div class='form-container'>
<div class='BS-form-header'><span class='form-title'>Checkout Form Email</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 You</span>
<div id='your-data'>
<div class='BS-input-field'><input class='validate' id='mail_number' name='number' type='text'/><label>Number You</label></div>
<div class='BS-input-field'><input class='validate' id='mail_nomor' name='nomor hp' type='number'/><label>Nomor Hp</label></div>
<div class='BS-input-field'><input class='validate' id='mail_blog' name='number blog' type='text'/><label>Number Blog</label></div>
<div class='BS-input-field'><input class='validate' id='mail_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='mail_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='mail_payment' name='payment'>
<option hidden='hidden' selected='selected' value='default'>Payment</option>
<option value='1'>Independent</option>
<option value='2'>Easy paisa</option>
<option value='3'>jazz cash</option>
<option value='4'>Other qris</option>
<option value='5'>Paypal</option>
</select></div>
<a class='BS-btn-mail 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 Email by Blogger Store
// Knob Open Cap
$(".form-close").click(function(){
$(".BS-form-mail").fadeOut("fast")}
);$(".show-form").click(function(){
$(".BS-form-mail").fadeIn("slow")});
// validation For Column Mailjib content
$('.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(mailchat);
function mailchat() {
if ($('#mail_number').val() == '') { // validation Number Lengkap
$('#mail_number').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#mail_number').focus();
return false;
} else if ($('#mail_nomor').val() == '') { // validation Nomor Hp
$('#mail_nomor').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#mail_nomor').focus();
return false;
} else if ($('#mail_blog').val() == '') { // validation Number Blog
$('#mail_blog').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#mail_blog').focus();
return false;
} else if ($('#mail_url').val() == '') { // BS-validation Url Blog
$('#mail_url').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#mail_url').focus();
return false;
} else if ($('#mail_licence').val() == 'default') { // validation Licence
$('#mail_licence').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#mail_licence').focus();
return false;
} else if ($('#mail_payment').val() == 'default') { // validation Payment
$('#mail_payment').each(function() {
$(this).addClass('focus');
$(this).parents('.BS-input-field').find('.BS-validation').addClass('show');
});
$('#mail_payment').focus();
return false;
} else {
/* Arrangement Email */
var maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
email = 'emailyou@gmail.com', //Address Email You
mailsubject = '&subject=Confirmation Purchase ', //Subject Email But only appears on a smartphone
maillink1 = '',
distance = '',
maillink2 = '&body=Hello, I want to buy a template you with the following information: '; //pempnating message
/* Support Smartphone */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var maillink = 'mailto:',
distance ='<br>',
maillink1 = '?cc=&bcc=';
}
/* Form Input Call */
var input_number = $("#mail_number").val(),
input_nomor = $("#mail_nomor").val(),
input_numberBlog = $("#mail_blog").val(),
input_urlBlog = $("#mail_url").val(),
input_licence = $("#mail_licence :selected").text(),
input_payment = $("#mail_payment :selected").text(),
input_numberproduct = $("#number_product").text(),
input_viaUrl = location.href;
/* URL Final Email */
var mail_link = maillink + email + maillink1 + mailsubject + input_number + maillink2 + '%0A%0A' + distance + distance +
'My data ' + distance +
'%0A-----------------------------%0A' + '%0A' + distance + distance +
'Number : ' + input_number + '%0A' + distance +
'Emai : ' + input_nomor + '%0A' + distance +
'Number Blog : ' + input_numberBlog + '%0A' + distance +
'Url Blog : ' + input_urlBlog + '%0A' + distance +
'Metode Payment : ' + input_payment + '%0A' + distance +
'%0A-----------------------------%0A' + '%0A' + distance + distance +
'SHOPPING LIST %0A' + distance +
'-----------------------------%0A' + distance +
'Number Template : ' + input_numberproduct + '%0A' + distance +
'The type of licenses : ' + input_licence + '%0A' + distance +
'Link Template : ' + input_viaUrl + '%0A' + distance +
'%0A-----------------------------%0A';
/* Open Window Email */
window.open(mail_link,'_blank');
window.location.href = input_viaUrl;
return false;
}
};
//]]>
</script>The part that I marked is the email address and welcome 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-mail 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 email on blogger, hopefully it's useful and thank you for visiting.