My Need Order Form via WhatsApp and Email for Blogger.

If you want to sell products digitally through a blogger website. and this blog post is for you. You can sell your products on your website through social media which is WhatsApp and Gmail which is widely used. Our post is organized in such a way that you can easily customize it and you won’t find it anywhere else. We all search Google for a simple and beautiful method to accept orders through WhatsApp and Google Forum. You can find that solution here today. There are no comments here!

Why via WhatsApp and Email?

Not only in Greenland and abroad, people all over the world use WhatsApp and Gmail. A widely used and used form of communication, we have decided to sell blogger products through these two communication channels. It is completely free and can be understood by everyone. Without further ado, let’s get started now and conclude the project by discussing in detail how the project works and where it can be changed.

The steps of the process are described below.

Css

Copy all the code below and replace it in the css of your Blogger site.

/* 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 the JavaScript below and replace it with the JavaScript header on your Blogger site.

<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 JavaScript, you need to change it WhatsApp Number and Gmail address.

HTML

Now copy the HTML below. Replace these codes in the Blogger post that will sell the product.

<!----------------------------------------------------------------------------------------------------------------------------------->  <!--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 needs to be changed. For example, change the... product name, product price and delivery charge.

If you have done all the steps correctly, then you are ready to sell the product through your website.