<!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
- Bootstrap Form: The form is styled using Bootstrap classes.
- JavaScript Function: The
sendToWhatsApp()function retrieves the form data, formats it into a WhatsApp message, and opens WhatsApp Web with the pre-filled message usinghttps://wa.me/. - WhatsApp API: Replace
1234567890with your WhatsApp number (in international format, without the+or leading zeros). - Validation: The form includes basic validation using the
requiredattribute.
How It Works
- The user fills out the form and clicks “Submit.”
- The
sendToWhatsApp()function gathers the input values. - 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.
Whatsapp Form Code Generator Tool
