Why This Matters
78% of leads go to the first business that responds. If someone fills out your contact form at 9pm and you only check your email the next morning, that lead has already called your competitor.
WhatsApp notifications solve this. Your phone buzzes the moment someone submits the form. You reply in under a minute. You win the job.
Most services that do this charge R200-R500/month. We're going to do it for free.
A WhatsApp account, a website hosted on Cloudflare Pages (free tier works), and about 15 minutes. No coding experience required — we give you all the code to copy and paste.
How It Works
The flow is simple:
- Visitor fills out your contact form
- Your website sends the form data to a serverless function (runs on Cloudflare for free)
- The function calls the Callmebot API (also free)
- Callmebot sends you a WhatsApp message with the lead's name, phone, and message
No database. No backend server. No monthly subscription. It runs on Cloudflare's free tier, which gives you 100,000 requests per day — more than enough for any small business.
Step 1: Get Your Callmebot API Key
Callmebot is a free service that sends WhatsApp messages via an API. Here's how to activate it:
- Save the number +34 644 51 95 23 in your phone contacts as "Callmebot"
- Send this exact message to that number on WhatsApp: I allow callmebot to send me messages
- Wait a few seconds — you'll get a reply with your API key (a long string of numbers and letters)
- Save that API key somewhere safe. You'll need it in Step 3.
The API key is tied to your phone number. If you change numbers, you'll need to re-register. Also, Callmebot has a rate limit of about 1 message every 2 seconds — perfect for lead notifications, not for bulk messaging.
Step 2: Add The Contact Form
If you already have a contact form on your website, skip to Step 3. If not, here's a simple one you can drop into any HTML page:
<form id="contactForm">
<input type="text" name="name" placeholder="Your Name" required>
<input type="tel" name="phone" placeholder="Phone Number" required>
<input type="email" name="email" placeholder="Email (Optional)">
<textarea name="message" placeholder="Tell us about your business"></textarea>
<button type="submit">Get Your Free Audit →</button>
</form>
<script>
document.getElementById('contactForm').addEventListener('submit', async (e) => {
e.preventDefault();
const btn = e.target.querySelector('button');
btn.disabled = true;
btn.textContent = 'Sending...';
try {
const response = await fetch('/api/contact', {
method: 'POST',
body: new FormData(e.target)
});
const result = await response.json();
if (result.success) {
btn.textContent = 'Sent! We\'ll be in touch.';
e.target.reset();
} else {
throw new Error(result.error);
}
} catch (err) {
btn.textContent = 'Error — try again';
btn.disabled = false;
}
});
</script>
The form posts to /api/contact — that's the serverless function we'll create next.
Step 3: Create The Serverless Function
This is the part that actually sends the WhatsApp message. On Cloudflare Pages, you create a file at functions/api/contact.js in your project and it automatically becomes an API endpoint.
export async function onRequestPost(context) {
try {
const formData = await context.request.formData();
const name = formData.get('name') || 'No name';
const phone = formData.get('phone') || 'No phone';
const email = formData.get('email') || 'Not provided';
const message = formData.get('message') || 'No message';
// Format the WhatsApp message
const text = `🔔 NEW LEAD from your website!
📋 Name: ${name}
📞 Phone: ${phone}
📧 Email: ${email}
💬 Message: ${message}`;
// Send via Callmebot
const whatsappNumber = context.env.WHATSAPP_NUMBER;
const apiKey = context.env.CALLMEBOT_KEY;
const url = `https://api.callmebot.com/whatsapp.php?phone=${whatsappNumber}&text=${encodeURIComponent(text)}&apikey=${apiKey}`;
await fetch(url);
return new Response(
JSON.stringify({ success: true }),
{ headers: { 'Content-Type': 'application/json' } }
);
} catch (error) {
return new Response(
JSON.stringify({ success: false, error: error.message }),
{ status: 500, headers: { 'Content-Type': 'application/json' } }
);
}
}
Notice we use context.env.WHATSAPP_NUMBER and context.env.CALLMEBOT_KEY instead of hardcoding them. This keeps your phone number and API key out of your source code — important if your repo is public on GitHub.
Step 4: Set Environment Variables
In your Cloudflare Pages dashboard:
- Go to your project → Settings → Environment Variables
- Add WHATSAPP_NUMBER = your number in international format (e.g. 27814705481 for +27 81 470 5481)
- Add CALLMEBOT_KEY = the API key you got in Step 1
- Click Save
- Trigger a new deployment (push a commit or click "Retry deployment")
Step 5: Test It
Go to your live website. Fill out the contact form with your own details and submit it. Within 5-10 seconds, you should get a WhatsApp message that looks like this:
🔔 NEW LEAD from your website!
📋 Name: John from John's Plumbing
📞 Phone: 081 234 5678
📧 Email: john@example.com
💬 Message: I need help getting more customers online
That's it. Free, instant, and running 24/7 on Cloudflare's infrastructure.
What's Next?
This basic setup gets you 90% of the way there. If you want to go further:
- Auto-follow-ups: Use n8n (free, self-hosted) to send a WhatsApp reply to the lead if you haven't responded within an hour
- Lead logging: Store form submissions in a Google Sheet using another serverless function
- Multiple recipients: Send the notification to your business partner too by adding a second Callmebot API call
We set all of this up for our clients as part of the Launch and Growth packages. If you'd rather not DIY, we'll have it running in 3 days.
Want This Set Up For You?
We build the website, connect the WhatsApp notifications, and set up your Google Business Profile — so your phone rings more. Starting from R1,500.
Get Your Free Audit →