Contact page via email and WhatsApp

Blogger Contact Page via Email and WhatsApp!

In the current digital age, blogging has become not just a means of publishing writing, but also an important platform for communicating with readers. A blogger's contact page is an important medium through which readers can establish direct contact with the author. With the addition of email and WhatsApp, this communication system has become easier and more effective.

Readers can send their opinions, suggestions or questions in detail by adding an email address to the blog. This gives the blogger an opportunity to understand and consider the readers' reactions.

On the other hand, WhatsApp is an instant messaging app, which is very popular for fast and personalized communication. By adding a WhatsApp link to the blog, readers can talk to the blogger directly through chat. This is very convenient, especially for those who are mobile users.

However, it is important for bloggers to protect their privacy and take appropriate measures to avoid unwanted spam while combining these two mediums. For example, instead of writing a direct email address, accepting through a form and keeping WhatsApp numbers open only for real readers.

It can be said that creating a contact page with email and WhatsApp increases the professionalism of the blog and deepens the relationship with the readers. This is one of the keys to creating a successful and reader-friendly blog.

This is why it is easy for your website readers to contact you via email or WhatsApp. This is why today's tool is so important. Place the following codes on the contact page you want to put. It will work. However, Your Need to change two places.

<meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Contact Us</title>
  <style>
    * {
      box-sizing: border-box;
    }

    button svg {
      width: 50px;
      height: 50px;
    }

    .contact-form {
      padding: 25px;
      border-radius: 12px;
      max-width: 100%;
      width: 100%;
    }

    .contact-form h2 {
      margin-bottom: 20px;
      text-align: center;
      font-size: 24px;
      color: #333;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form button {
      width: 100%;
      padding: 12px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 16px;
    }

    .contact-form textarea {
      resize: vertical;
    }

    .send-options {
      display: none;
      margin-top: 15px;
      gap: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .send-options button {
      width: 48%;
      color: white;
      border: none;
      cursor: pointer;
      padding: 12px;
      border-radius: 8px;
      font-size: 16px;
    }

    .Email {
      background-color: #d44638;
    }

    .whatsapp {
      background-color: #25d366;
    }

    .send-options button:hover {
      opacity: 0.9;
    }

    @media (max-width: 480px) {
      .contact-form {
        padding: 15px;
      }

      .send-options {
        flex-direction: column;
      }

      .send-options button {
        width: 100%;
        margin-top: 10px;
      }
    }
  </style>

  <form class="contact-form" id="contactForm">
    <h2>Contact Us</h2>
    <input type="text" id="name" placeholder="Your Name" required />
    <input type="tel" id="phone" placeholder="Mobile Number" required />
    <input type="email" id="email" placeholder="Email Address" required />
    <textarea id="message" rows="4" placeholder="Your Message" required></textarea>
    <button type="submit">Show Send Options</button>

    <div class="send-options" id="sendOptions">
      <button type="button" class="Email" id="sendEmail">
        Send via Email
      </button>
      <button type="button" class="whatsapp" id="sendWhatsApp">
        Send via WhatsApp
      </button>
    </div>
  </form>

  <script>
    const whatsappNumber = "880152211XXDDZZ"; // Replace with your WhatsApp number

    function buildMessage() {
      const name = document.getElementById("name").value.trim();
      const phone = document.getElementById("phone").value.trim();
      const email = document.getElementById("email").value.trim();
      const message = document.getElementById("message").value.trim();
      const pageURL = window.location.href;

      if (!name || !phone || !email || !message) {
        return null;
      }

      return `Name: ${name}\nPhone: ${phone}\nEmail: ${email}\nMessage: ${message}\n\nSource Page: ${pageURL}`;
    }

    document.getElementById("contactForm").addEventListener("submit", function (e) {
      e.preventDefault();
      const message = buildMessage();
      if (!message) {
        alert("Please fill in all fields.");
        return;
      }
      document.getElementById("sendOptions").style.display = "flex";
    });

    document.getElementById("sendEmail").addEventListener("click", function () {
      const message = buildMessage();
      if (!message) {
        alert("Please fill in all fields before sending.");
        return;
      }

      const confirmed = confirm("Are you sure you want to send this message via Email?");
      if (confirmed) {
        const subject = encodeURIComponent("Contact Form Message");
        const body = encodeURIComponent(message);
        const mailtoLink = `mailto:YOURMAIL@gmail.com?subject=${subject}&body=${body}`;
        window.location.href = mailtoLink;
      }
    });

    document.getElementById("sendWhatsApp").addEventListener("click", function () {
      const message = buildMessage();
      if (!message) {
        alert("Please fill in all fields before sending.");
        return;
      }

      const confirmed = confirm("Are you sure you want to send this message via WhatsApp?");
      if (confirmed) {
        const whatsappLink = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
        window.open(whatsappLink, "_blank");
      }
    });
  </script>

In the above code, there are two places that are colored purple. In the 01, change your WhatsApp mobile number and in the 02, changes your email address. Then save and check for yourself that the work is done.

improve blog communication with WhatsApp & Email