How to Receive Orders Through Email on Your Blogger Website
Receiving orders through email is a reliable and straightforward method for managing customer purchases, especially for small businesses and bloggers. It allows for detailed communication and can be easily integrated into your existing Blogger website. This guide will walk you through the process of setting up an efficient email ordering system.
Why Use Email for Orders?
Using email for orders offers several advantages:
- Detailed Communication: Allows for comprehensive exchange of information between you and your customers.
- Documentation: Provides a written record of orders, which can be useful for tracking and resolving issues.
- Accessibility: Most customers are comfortable using email, making the ordering process easy.
Setting Up Email Ordering on Your Blogger Website
Step 1: Log in to the Blogger dashboard then go to Themes
Step 2: Click on the icon next to the Customize button.
Step 3: Install jQuery in your template. Copy the code below and paste it above </head> or <!--</head>--></head> tag.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 4: Now let's add some CSS. To do that copy the code below then press Ctrl + F and search for ]]></b:skin> and paste the code above it.
/* Email Form */
.wiki-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}.wiki-form-mail.aktif{display:block}
.wiki-form-header{background:linear-gradient(to right, #ff002c,#09796c);color:#fff;font-weight:700;padding:15px 20px;border-radius:10px;margin:0 0 30px}
span.input-title{border-left:4px solid #ff002c;padding:0 15px;font-size:.9rem;display:block}.wiki-form-mail #your-data{display:grid;grid-template-columns:49% 49%;grid-gap:10px;margin:10px 0 20px}
.wiki-form-header a.form-close svg{fill:#fff;width:35px;height:35px;margin-top:-5px;float:right}
a.wiki-btn-mail.send_form{background:linear-gradient(to right, #ff002c,#09796c);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;}
.wiki-btn-mail{background:linear-gradient(to right, #ff002c,#09796c);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}
.wiki-btn-mail:hover{opacity:.8;color:#fff}
.wiki-btn-mail svg{fill:#fff;width:22px;height:22px;vertical-align:-5px;margin-right:10px}
.wiki-input-field{position:relative;margin:15px 0 0}
.wiki-input-field input,.wiki-input-field textarea{font-size:15px;padding:12px 0 12px 12px;display:block;width:94%;border:1px solid #ddd;border-radius:5px}.wiki-input-field input:focus,.wiki-input-field textarea:focus{outline:none}
.wiki-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}.wiki-input-field input:focus~label,.wiki-input-field input:valid~label,.wiki-input-field textarea:focus~label,.wiki-input-field textarea:valid~label{top:0;font-size:14px;color:#ff002c;background:#fff;padding:1px 7px;margin:10px 0 0 -5px}
.wiki-input-field input:focus~label,.wiki-input-field input:valid~label,.wiki-input-field textarea:focus~label,.wiki-input-field textarea:valid~label{top:-20px!important;font-size:13px;color:#ff002c;font-weight:700}.wiki-input-field textarea{width:96.5%}.wiki-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}
.wiki-input-field .wiki-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#09796c;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}
.wiki-input-field .wiki-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.wiki-input-field .wiki-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #09796c transparent}
#nama_produk{display:none}
Step 5: Now you have to place the code inside <body> tag. So you should place it either above <footer> or <body> or wherever you want. It will work as long as you keep its side <body> tag.
<div class='wiki-form-mail'> <div class='form-container'> <div class='wiki-form-header'><span class='form-title'>Email Checkout Form</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'>Your Data</span> <div id='your-data'> <div class='wiki-input-field'><input class='validate' id='mail_nama' name='name' type='text'/><label>Your Name</label></div> <div class='wiki-input-field'><input class='validate' id='mail_nomor' name='phone number' type='number'/><label>Phone Number</label></div> <div class='wiki-input-field'><input class='validate' id='mail_blog' name='blog name' type='text'/><label>Blog Name</label></div> <div class='wiki-input-field'><input class='validate' id='mail_url' name='blog url' type='text'/><label>Blog URL</label></div> </div> <span class='input-title'>Other Data</span> <div class='wiki-input-field'><select class='validate' id='mail_lisensi' name='license'> <option hidden='hidden' selected='selected' value='default'>Select License</option> <option value='1'>Personal Package</option> <option value='2'>Reseller Package</option> </select></div> <div class='wiki-input-field'><select class='validate' id='mail_pembayaran' name='payment'> <option hidden='hidden' selected='selected' value='default'>Payment Method</option> <option value='1'>PayPal</option> <option value='2'>GoPay</option> <option value='3'>Credit Card</option> <option value='4'>Debit Card</option> <option value='5'>VISA Card</option> </select></div> <a class='wiki-btn-mail send_form' href='javascript:;' title='Send Product Information' type='submit'>SEND</a></div></div>
Step 6: Now place the code below under <data:post.body/>. There could be more than 1 of these codes. So place it under the last one. That should be the correct one where you need to paste this code. If it doesn't work then try others.
<div id='nama_produk'><data:post.title/></div>
Step 7: The last step is to place the code below above </body> tag in your template. Make sure you replace the email with your actual email address.
<script>
//<![CDATA[
$(".form-close").click(function(){
$(".wiki-form-mail").fadeOut("fast")}
);$(".show-form").click(function(){
$(".wiki-form-mail").fadeIn("slow")});
$('.wiki-input-field .validate').each(function() {
title = $(this).attr('name');
label = $(this).parents('.wiki-input-field');
$('<span class="wiki-validasi"><b>' + title + '</b> required</span>').appendTo(label);
});
$(document).on('keyup', '.wiki-input-field .validate', function() {
if ($(this).val() != '') {
$(this).removeClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').removeClass('show');
}
});
$(document).on('change', '.wiki-input-field select', function() {
$(this).removeClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').removeClass('show');
});
$('.send_form').click(mailchat);
function mailchat() {
if ($('#mail_nama').val() == '') {
$('#mail_nama').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#mail_nama').focus();
return false;
} else if ($('#mail_nomor').val() == '') {
$('#mail_nomor').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#mail_nomor').focus();
return false;
} else if ($('#mail_blog').val() == '') {
$('#mail_blog').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#mail_blog').focus();
return false;
} else if ($('#mail_url').val() == '') {
$('#mail_url').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#mail_url').focus();
return false;
} else if ($('#mail_lisensi').val() == 'default') {
$('#mail_lisensi').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#mail_lisensi').focus();
return false;
} else if ($('#mail_pembayaran').val() == 'default') {
$('#mail_pembayaran').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#mail_pembayaran').focus();
return false;
} else {
var maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
email = 'yourmail@gmail.com', // Your Email Address
mailsubject = '&subject=Confirm Purchase ', // Email Subject But Only Appears On Smartphones
maillink1 = '',
jarak = '',
maillink2 = '&body=Hello, I want to buy your template with the following description: '; // Opening Message
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var maillink = 'mailto:',
jarak ='<br>',
maillink1 = '?cc=&bcc=';
}
var input_nama = $("#mail_nama").val(),
input_nomor = $("#mail_nomor").val(),
input_namaBlog = $("#mail_blog").val(),
input_urlBlog = $("#mail_url").val(),
input_lisensi = $("#mail_lisensi :selected").text(),
input_pembayaran = $("#mail_pembayaran :selected").text(),
input_namaproduk = $("#nama_produk").text(),
input_viaUrl = location.href;
var mail_link = maillink + email + maillink1 + mailsubject + input_nama + maillink2 + '%0A%0A' + jarak + jarak +
'MY DATA ' + jarak +
'%0A-----------------------------%0A' + '%0A' + jarak + jarak +
'Name : ' + input_nama + '%0A' + jarak +
'Email : ' + input_nomor + '%0A' + jarak +
'Blog Name : ' + input_namaBlog + '%0A' + jarak +
'Blog URL : ' + input_urlBlog + '%0A' + jarak +
'Payment Method : ' + input_pembayaran + '%0A' + jarak +
'%0A-----------------------------%0A' + '%0A' + jarak + jarak +
'SHOPPING LIST %0A' + jarak +
'-----------------------------%0A' + jarak +
'Template Name : ' + input_namaproduk + '%0A' + jarak +
'License Type : ' + input_lisensi + '%0A' + jarak +
'Template Link : ' + input_viaUrl + '%0A' + jarak +
'%0A-----------------------------%0A';
window.open(mail_link,'_blank');
window.location.href = input_viaUrl;
return false;
}
};
//]]>
</script>
How to set up email order integration for Blogger website
There are 2 ways to integrate this email form into your website to receive orders. Choose the one that suits you.
Number 1: Create a custom order page and integrate this form with that page. That's how your customers will be able to place orders on your website. You can read this blog and follow the instructions to create a product page on your website.
Number 2: Just copy the code below and place it anywhere on your website. Now wherever someone clicks this button will be able to place their orders on your website.
<div style='text-align:center'> <a class="wiki-btn-mail show-form" href="javascript:void" title="Buy Now"><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>Buy Now</a></div>
Now whenever someone uses this button to order a product from your website. You will get an email to the email address you added.
Conclusion
Integrating an email ordering system on your Blogger website is a practical way to enhance customer experience and manage orders efficiently. By following the steps outlined in this guide, you can set up a user-friendly and effective email ordering system. Promote this new feature to your audience and continuously optimize the process to ensure customer satisfaction.
Implement these strategies and watch your sales grow. Happy selling!
