HTML
Beginner
Updated 7h ago
WhatsApp Lead Form
A lead form that submits data directly to WhatsApp with a pre-filled message.
<form id="waForm" onsubmit="sendToWhatsApp(event)">
<input type="text" name="name" placeholder="Your Name" required>
<input type="tel" name="phone" placeholder="Your Phone" required>
<input type="text" name="service" placeholder="Service Needed" required>
<textarea name="message" placeholder="Additional Details"></textarea>
<button type="submit">Send via WhatsApp</button>
</form>
<script>
function sendToWhatsApp(e) {
e.preventDefault();
const form = e.target;
const businessNumber = "919876543210";
const text = `New Lead!%0A%0AName: ${encodeURIComponent(form.name.value)}%0APhone: ${encodeURIComponent(form.phone.value)}%0AService: ${encodeURIComponent(form.service.value)}%0AMessage: ${encodeURIComponent(form.message.value)}`;
window.open(`https://wa.me/${businessNumber}?text=${text}`, "_blank");
}
</script>Technical Breakdown
Form sends data directly to WhatsApp via wa.me deep link. No backend required.
Pitfalls & Solutions
1. Not encoding message. 2. Wrong number format. 3. Missing rel=noopener.
Common Questions
Does this work on desktop?
Yes, on desktop it opens WhatsApp Web. On mobile it opens the WhatsApp app.
Tags
#HTML
#Forms
#WhatsApp