My Need Order Form via WhatsApp and Email for Blogger.
If you want to sell products digitally through your blogger website. also this blog post is just for you. You can sell your website products through social media i.e. WhatsApp and the widely used Gmail. Our post is arranged in such a way that you can easily customize it which you will not find anywhere else. We all search on Google for a simple and beautiful method of accepting orders through WhatsApp and Google Forum. You will find this solution here today. Nothing to say here!
Why through WhatsApp and Email?
Not only in the country and abroad, people all over the world use WhatsApp and Gmail. Since it is a widely used and widely used communication medium, we have decided that we will sell blogger products through these two communications. It is completely free and understandable for everyone. Without further ado, let's start now and get the job done by discussing in detail how to do the work and where to change it.
The steps of the work are given below in order.
Css
Copy all the code below and replace it in the css section of your Blogger website.
/* OrderForm */
.OrderForm {padding: 5px;border: 1px ridge #086354}
form#orderForm {display: grid;}
.butt{text-align: center;width: -webkit-fill-available;margin: 5px;padding: 5px;color: black;}
/* From Uiverse.io by satyamchaudharydev */
/* inspired form gumroad website */
.button {--bg: rgba(0, 0, 0, .38);
--hover-bg: #ffffff;
--hover-text: #000;
color: #fff;
cursor: pointer;
border: 1px solid var(--bg);
border-radius: 4px;
padding: 0.5em 3em;
background: var(--bg);
transition: 0.2s;
box-shadow: 2px 2px 0px #615f5f;}
.button:hover {color: black;
transform: translate(-0.25rem, -0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);}
.button:active {transform: translate(0);box-shadow: none;}JavaScript
Copy all of the JavaScript below and replace the theme JavaScript of your Blogger website.
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("productLink").value = window.location.href;
});
function calculateTotal() {
const price = parseFloat(document.getElementById("price").value);
const quantity = parseInt(document.getElementById("quantity").value) || 1;
const deliveryCharge = parseFloat(document.getElementById("deliveryOption").value);
const total = price * quantity + deliveryCharge;
document.getElementById("totalPrice").value = total.toFixed(2);
}
function validateForm() {
const name = document.getElementById("name").value.trim();
const mobile = document.getElementById("mobile").value.trim();
const email = document.getElementById("email").value.trim();
const address = document.getElementById("address").value.trim();
const quantity = document.getElementById("quantity").value.trim();
let errors = [];
if (!name) errors.push("Name is required.");
if (!mobile) errors.push("Mobile number is required.");
if (!email) errors.push("Email is required.");
if (!address) errors.push("Delivery address is required.");
if (!quantity || quantity <= 0) errors.push("Quantity must be at least 1.");
if (errors.length > 0) {
alert(errors.join("\n"));
return false;
}
return true;
}
function showConfirmation(platform) {
if (!validateForm()) {
return;
}
const name = document.getElementById("name").value;
const mobile = document.getElementById("mobile").value;
const email = document.getElementById("email").value;
const address = document.getElementById("address").value;
const productName = document.getElementById("productName").value;
const quantity = document.getElementById("quantity").value;
const totalPrice = document.getElementById("totalPrice").value;
const productLink = document.getElementById("productLink").value;
const message = document.getElementById("message").value;
const paymentOption = document.getElementById("paymentOption").value;
const deliveryOption = document.getElementById("deliveryOption").options[document.getElementById("deliveryOption").selectedIndex].text;
const confirmationMessage = `
Please confirm your order details:
----------------------------------------
Name: ${name}
Mobile: ${mobile}
Email: ${email}
Product Name: ${productName}
Quantity: ${quantity}
Total Price: ${totalPrice}
Delivery Option: ${deliveryOption}
Address: ${address}
Payment Option: ${paymentOption}
Message: ${message}
Product Link: ${productLink}
`;
if (confirm(confirmationMessage)) {
confirmOrder(platform);
}
}
function confirmOrder(platform) {
const name = document.getElementById("name").value;
const mobile = document.getElementById("mobile").value;
const email = document.getElementById("email").value;
const address = document.getElementById("address").value;
const productName = document.getElementById("productName").value;
const quantity = document.getElementById("quantity").value;
const totalPrice = document.getElementById("totalPrice").value;
const productLink = document.getElementById("productLink").value;
const message = document.getElementById("message").value;
const paymentOption = document.getElementById("paymentOption").value;
const deliveryOption = document.getElementById("deliveryOption").options[document.getElementById("deliveryOption").selectedIndex].text;
const orderDetails = `
I would like to purchase products from you with the following information.
Name: ${name}
Mobile: ${mobile}
Email: ${email}
Product Name: ${productName}
Quantity: ${quantity}
Total Price: ${totalPrice}
Delivery Address: ${address}
Delivery Option: ${deliveryOption}
Payment Option: ${paymentOption}
Message: ${message}
Product Link: ${productLink}
`;
if (platform === 'whatsapp') {
const whatsappMessage = encodeURIComponent(orderDetails);
window.open(`https://wa.me/8801522112936?text=${whatsappMessage}`, "_blank");
} else if (platform === 'gmail') {
const emailRecipient = "therealanwarul@gmail.com"; // Replace with your email
const emailSubject = encodeURIComponent("Order Confirmation");
const emailBody = encodeURIComponent(orderDetails);
// For desktop devices (force open Gmail in the browser)
if (navigator.userAgent.indexOf("Mobi") === -1) {
const gmailUrl = `https://mail.google.com/mail/?view=cm&fs=1&to=${emailRecipient}&su=${emailSubject}&body=${emailBody}`;
window.open(gmailUrl, "_blank"); // This will open Gmail in a new tab
} else {
// For mobile devices, fallback to regular mailto link
const mailtoLink = `mailto:${emailRecipient}?subject=${emailSubject}&body=${emailBody}`;
window.location.href = mailtoLink;
}
}
clearForm();
}
function clearForm() {
document.getElementById("orderForm").reset();
document.getElementById("totalPrice").value = "100.00";
document.getElementById("productLink").value = window.location.href;
};
//]]>
</script>Note: That in place of the yellow mark in the middle of the JavaScript, you must change your WhatsApp Number and Gmail address.
HTML
Now copy the HTML below. Replace these codes in the place where you will sell the product in Blogger's post.
<!-----------------------------------------------------------------------------------------------------------------------------------> <!--OrderForm-->
<div class="OrderForm">
<div>
<form id="orderForm" onsubmit="return false;">
<button class="butt"><b>Buy Now</b></button>
<label>Name:</label>
<input id="name" type="text" />
<label>Mobile Number:</label>
<input id="mobile" type="text" />
<label>Email:</label>
<input id="email" type="email" />
<label>Delivery Address:</label>
<textarea id="address"></textarea><br />
<label style="display: none;">Product Name:</label>
<input id="productName" readonly="" style="display: none;" type="text" value="Your Product Name" />
<label>Price (per unit):</label>
<input id="price" readonly="" type="number" value="700" />
<label>Quantity:</label>
<input id="quantity" oninput="calculateTotal()" type="number" value="1" />
<label>Delivery Option:</label>
<select id="deliveryOption" onchange="calculateTotal()">
<option value="0">Digital Product (TK. 00)</option>
<option value="50">Within City (TK. 50)</option>
<option value="100">Outside City (TK. 100)</option>
</select>
<label>Total Price (including delivery):</label>
<input id="totalPrice" readonly="" type="text" value="700.00" /><br />
<label style="display: none;">Product Link:</label>
<input id="productLink" readonly="" style="display: none;" type="text" />
<label>Custom Message:</label>
<textarea id="message"></textarea>
<label>Payment Options:</label>
<select id="paymentOption">
<option value="Bkash">Bkash</option>
<option value="Rocket">Rocket</option>
<option value="Nagad">Nagad</option>
<option value="Bank Transfer">Bank Transfer</option>
<option value="Cash on delivery">Cash on delivery</option>
</select>
<br/>
<div class="butt"><button class="button" onclick="showConfirmation('whatsapp')">Order via WhatsApp</button>
<button class="button" onclick="showConfirmation('gmail')">Order via Gmail</button></div> <br/>
</form>
</div>
</div>Note:Need marked yellow should be changed. For example, change your product name, product price and delivery charge.
If you do all the work correctly, then you are ready to sell the product through your website.
