Whatsapp Contact Form Source Code Html CSS Javascript

by
Share this
FacebookXEmailLinkedInWhatsApp
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #f8f9fa;
    }
    .contact-form {
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="contact-form">
      <h2 class="text-center mb-4">Contact Us</h2>
      <form id="contactForm">
        <div class="mb-3">
          <label for="name" class="form-label">Name</label>
          <input type="text" class="form-control" id="name" placeholder="Your Name" required>
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" class="form-control" id="email" placeholder="Your Email" required>
        </div>
        <div class="mb-3">
          <label for="mobile" class="form-label">Mobile Number</label>
          <input type="text" class="form-control" id="mobile" placeholder="Your Mobile Number" required>
        </div>
        <div class="mb-3">
          <label for="subject" class="form-label">Subject</label>
          <input type="text" class="form-control" id="subject" placeholder="Subject" required>
        </div>
        <div class="mb-3">
          <label for="query" class="form-label">Your Query</label>
          <textarea class="form-control" id="query" rows="4" placeholder="Your Query" required></textarea>
        </div>
        <button type="button" class="btn btn-primary w-100" onclick="sendToWhatsApp()">Submit</button>
      </form>
    </div>
  </div>

  <script>
    function sendToWhatsApp() {
      // Retrieve form data
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const mobile = document.getElementById('mobile').value;
      const subject = document.getElementById('subject').value;
      const query = document.getElementById('query').value;

      // WhatsApp number where the message should be sent
      const whatsappNumber = "1234567890"; // Replace with your WhatsApp number

      // Construct the WhatsApp message
      const message = `Hello, I would like to contact you:%0A%0A` +
        `*Name:* ${name}%0A` +
        `*Email:* ${email}%0A` +
        `*Mobile:* ${mobile}%0A` +
        `*Subject:* ${subject}%0A` +
        `*Query:* ${query}`;

      // Open WhatsApp Web with the pre-filled message
      const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${message}`;
      window.open(whatsappUrl, '_blank');
    }
  </script>
</body>
</html>

Explanation

  1. Bootstrap Form: The form is styled using Bootstrap classes.
  2. JavaScript Function: The sendToWhatsApp() function retrieves the form data, formats it into a WhatsApp message, and opens WhatsApp Web with the pre-filled message using https://wa.me/.
  3. WhatsApp API: Replace 1234567890 with your WhatsApp number (in international format, without the + or leading zeros).
  4. Validation: The form includes basic validation using the required attribute.

How It Works

  1. The user fills out the form and clicks “Submit.”
  2. The sendToWhatsApp() function gathers the input values.
  3. The browser opens a new tab with WhatsApp Web, pre-filled with the user’s message.

This approach ensures the user’s input is sent directly to WhatsApp without requiring a backend server.

Share this
FacebookXEmailLinkedInWhatsApp

Leave a Comment