twabot. ← Back to Forms

Embed a TwaBot lead form on your website

A complete, copy-paste guide for your developer (or you) to wire up an External Website Form. Every lead lands in your TwaBot dashboard with auto WhatsApp + email alerts.

~5–10 min setup No coding for WordPress / Zapier Works with any website

1How it works

A visitor fills your form on your website. The browser POSTs the data to TwaBot. We validate it, save the lead, and fire your alerts — all in under 10 seconds.

Visitor on your website fills your form (Name, Phone, Email, Message — whatever fields you defined).
Browser POSTs JSON to your unique TwaBot webhook URL (https://twabot.com/api/v1/forms/<form_key>/submit).
TwaBot validates the form key, plan limits, required fields, allowed origin, and (optional) HMAC signature.
Lead is saved to your CRM dashboard. Status defaults to "Warm".
Alerts fire automatically — dashboard popup (always), email (default ON), WhatsApp to your owner number (optional), customer welcome WhatsApp (optional), per-agent routing (optional).

Validate & save: ~150ms · Browser receives HTTP 200 immediately · Notifications fire async (5–10 sec).

2Before you start — find your Webhook URL

You need to create an External Website Form in TwaBot first. The dashboard then gives you a unique webhook URL and (optional) API secret.

Log in at twabot.com/login and go to Forms in the left menu.
Click Create Form. The wizard opens.
Enter a name → choose "On your website / landing page" as the type.
Define your fields (or click Quick start to add Name + Phone + Email + Message).
Set a confirmation message → notification preferences → security → Save form.
You'll land on the "🎉 Your form is live!" step. Copy the Webhook URL — it looks like:

https://twabot.com/api/v1/forms/abc123def456/submit

Keep this URL private(-ish). Anyone who has it can submit leads to your form. Use the Allowed Origins setting (Step 6 in the wizard) to lock submissions to your domain.

3Pick an integration method

Use whichever matches what your website is built with. All four methods send the same JSON body to the same URL — pick the easiest for your stack.

</>

Plain HTML + JS

Static sites, custom HTML, page builders. ~2 min setup.

📰

WordPress

Contact Form 7, Elementor, WPForms. No code.

⚡

Zapier / Make / Pabbly

Bridge from Google Forms, Typeform, JotForm. Zero code.

⌨

cURL / server-side

Custom CRM hooks, Node, PHP, Python, Postman.

AMethod A — Plain HTML + JavaScript

The simplest method. Drop a form into any HTML page and add a small script that POSTs the values to TwaBot.

Full snippet (copy & paste)

Replace YOUR_WEBHOOK_URL with the URL from the dashboard. Adjust the name="..." attributes to match the field names you defined.

<form id="lead-form"> <input type="text" name="name" placeholder="Full name" required> <input type="tel" name="phone" placeholder="WhatsApp number" required> <input type="email" name="email" placeholder="Email"> <textarea name="message" placeholder="How can we help?"></textarea> <button type="submit">Send</button> </form> <script> document.getElementById('lead-form').addEventListener('submit', async (e) => { e.preventDefault(); const data = Object.fromEntries(new FormData(e.target)); try { const res = await fetch('YOUR_WEBHOOK_URL', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const json = await res.json(); if (json.success) { alert('Thanks! We will contact you shortly.'); e.target.reset(); } else { alert('Something went wrong: ' + (json.error || 'unknown')); } } catch (err) { alert('Network error — please try again.'); } }); </script>

What field names should I use?

Use the exact field name (not label) from your TwaBot form. The form builder shows a "Name" column for each field — that's what goes in name="...".

Common field	Recommended `name`	Why
Full name	`name`	Standard. Used in all alert templates.
Phone / WhatsApp	`phone`	If present, customer welcome WhatsApp can be sent to this number.
Email	`email`	Used for double-opt-in & CRM dedupe.
Message / Note	`message`	Free-text. Shown in dashboard popup & email body.

Tip: Phone numbers should include the country code (e.g. +919876543210). TwaBot tries to auto-detect country code from your account region, but inputs with + are most reliable.

Styling

The HTML above is unstyled on purpose so it inherits your site's CSS. Wrap it in your existing classes (e.g. Bootstrap, Tailwind) like any other form. The only requirements are (1) the form has an id the script can target and (2) the input names match your TwaBot field names.

BMethod B — WordPress

Most WordPress sites already have a contact form. Pick whichever plugin you use.

Contact Form 7

Elementor Pro

WPForms

Gravity Forms

Contact Form 7 + "CF7 to Webhook" plugin

Install the free plugin "CF7 to Webhook" (Plugins → Add New → search "CF7 to Webhook" → Install & Activate).
Edit your existing CF7 form (or create one). Make sure the form-tag name attributes match your TwaBot field names — e.g. [text* name], [tel* phone], [email email], [textarea message].
Click the "CF7 to Webhook" tab on the form-edit screen.
Tick "Send Web Hook" and paste your TwaBot webhook URL.
Set Send as: JSON.
Save the form. Submit it once on your site to verify the lead lands in TwaBot.

Elementor Pro Forms (built-in webhook)

Edit the page → click your Form widget.
Open Content → Form Fields. Set the ID of each field to your TwaBot field name (e.g. name, phone, email).
Open Content → Actions After Submit. Add "Webhook" to the action list.
Scroll to Webhook section that just appeared → paste your TwaBot URL.
Update / Publish.

Elementor sends form data as application/x-www-form-urlencoded, not JSON. TwaBot accepts both — no extra config needed — but you'll see slightly different keys in the request body.

WPForms + "Webhooks" addon

Webhooks is a Pro addon — confirm your WPForms license includes it (Pro tier and above).
Edit your form → Settings → Webhooks → Enable Webhooks.
Method: POST.
Request URL: paste your TwaBot URL.
Request Format: JSON.
Map each WPForms field to a key matching your TwaBot field name.
Save. Test from the front-end.

Gravity Forms + "Webhooks Add-On"

Install the official Webhooks Add-On (requires Elite license).
Form Settings → Webhooks → Add New.
Request URL: paste your TwaBot URL · Request Method: POST · Format: JSON.
Field Values: map each GF field to its corresponding TwaBot field name (Name → name, etc.).
Save and test.

WordPress troubleshooting: if leads don't arrive, check whether a security plugin (Wordfence, iThemes Security) is blocking outbound requests. You may need to add twabot.com to its allowlist.

CMethod C — Zapier, Make, or Pabbly Connect

Use this if your form lives in another tool (Google Forms, Typeform, JotForm, Tally, Calendly, etc.). Zero code.

Create a new Zap / Scenario / Workflow.
Trigger: the form tool you use. Pick "New Submission".
Action: Webhooks → Custom Request → Method: POST.
URL: your TwaBot webhook URL.
Headers: add Content-Type: application/json.
Data / Body: JSON like below — replace the values with the dynamic fields from your trigger.

{ "name": "{{trigger.name}}", "phone": "{{trigger.phone}}", "email": "{{trigger.email}}", "message": "{{trigger.message}}" }

In Zapier you'll click "Insert data" on each value field and pick the matching field from your trigger step. Make/Pabbly use a similar drag-and-drop mapping.

DMethod D — cURL / server-side / Postman

Use this for server-to-server integrations, custom CRMs, cron jobs, or one-off testing.

cURL

Node.js

PHP

Python

curl -X POST 'YOUR_WEBHOOK_URL' \ -H 'Content-Type: application/json' \ -d '{ "name": "Test User", "phone": "+919876543210", "email": "test@example.com", "message": "Hello from cURL" }'

// Node 18+ const res = await fetch('YOUR_WEBHOOK_URL', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Test User', phone: '+919876543210', email: 'test@example.com', message: 'Hello from Node' }) }); const json = await res.json(); console.log(json);

<?php $ch = curl_init('YOUR_WEBHOOK_URL'); curl_setopt_array($ch, [ CURLOPT_POST => true, CURLOPT_RETURNTRANSFER => true, CURLOPT_HTTPHEADER => ['Content-Type: application/json'], CURLOPT_POSTFIELDS => json_encode([ 'name' => 'Test User', 'phone' => '+919876543210', 'email' => 'test@example.com', 'message' => 'Hello from PHP', ]), ]); $res = curl_exec($ch); echo $res;

import requests r = requests.post( 'YOUR_WEBHOOK_URL', json={ 'name': 'Test User', 'phone': '+919876543210', 'email': 'test@example.com', 'message': 'Hello from Python', }, timeout=10, ) print(r.json())

Expected response

On success, TwaBot returns HTTP 200 with a small JSON body:

{ "success": true, "lead_id": "ld_01H8...", "submission_id": "sb_01H8..." }

On failure (validation, rate limit, plan limit, bad origin), HTTP 4xx with:

{ "success": false, "error": "missing_required_field", "details": "Field 'phone' is required" }

4Security — Allowed Origins & HMAC

By default your webhook URL is open to the world. Lock it down to prevent spam and protect your plan-quota.

Allowed Origins (recommended for browser-based forms)

In the form's wizard (Step 6 — Lock it down), enter your domain(s) comma-separated:

https://yourdomain.com, https://www.yourdomain.com

TwaBot will reject requests from any other Origin header. This stops random websites and bots from posting fake leads.

Leave empty to allow any source (useful for Zapier & server-side which don't send Origin).
Use * to allow any browser — still rejects requests with no Origin header at all.

HMAC Signature (recommended for server-to-server)

For server-side integrations where you can keep a secret safely, generate an API secret in the wizard's post-save view (Step 7 → Section 1 → "API Secret" → Generate). Send the SHA-256 HMAC of the request body as a header:

X-Twabot-Signature: sha256=<hex digest of HMAC-SHA256(body, secret)>

Node.js example

import crypto from 'crypto'; const body = JSON.stringify(payload); const sig = 'sha256=' + crypto.createHmac('sha256', SECRET).update(body).digest('hex'); await fetch('YOUR_WEBHOOK_URL', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Twabot-Signature': sig }, body });

Never expose the API secret in browser code. Anyone viewing source could steal it. HMAC is for server-to-server only — for browsers, use Allowed Origins instead.

5Test before going live

Don't wait for a real customer — fire a test submission first.

Open the form in TwaBot dashboard → click the row to edit → walk through the wizard until you reach the "🎉 Your form is live!" step.
Click the 🚀 Send Test button (in Section 1).
Enter a test phone number when prompted (your own works fine).
Within 30 seconds you should see:
- Dashboard popup (always)
- Email to your registered address (if email channel is on)
- WhatsApp utility template to your owner-notification number (if enabled)
- Customer welcome WhatsApp on the test phone (if enabled)
If anything is missing, see the troubleshooting section below.

6Troubleshooting

Lead doesn't appear in dashboard

Open browser DevTools → Network tab. Submit the form. Look for the request to /api/v1/forms/.../submit. If status is 4xx, the response body tells you what's wrong (missing field, bad origin, plan limit).
If status is 0 or CORS error: your domain isn't in Allowed Origins. Add it in Step 6 of the wizard.
If you don't see the request at all: the form's submit handler isn't firing. Check the browser console for JS errors.

Email alert never arrives

Check spam/junk folder.
Verify the email channel toggle is ON (wizard Step 5).
Confirm notification_emails is correct in the wizard.
Some corporate mail servers (Microsoft 365 strict policies) silently drop transactional email. Try a Gmail address as a fallback.

WhatsApp owner alert never arrives

The owner-notification number must be different from your business outbound number — Meta blocks self-sends.
Make sure the number is in E.164 format with the leading + (e.g. +919876543210).
If using a custom utility template, ensure it's approved in WhatsApp Business Manager.

Customer welcome WhatsApp doesn't send

The form must include a phone field (or any field whose name matches phone, mobile, or whatsapp).
The customer-welcome template must be a marketing template, not utility, for cold leads. India: ~₹0.78/msg.
If the customer's WhatsApp number is invalid, Meta returns an error — visible in the form's submission detail.

"plan_limit_exceeded" error

Your plan has a monthly submission cap. Upgrade in Billing or wait for the next billing cycle.

"invalid_origin" error

Your Allowed Origins list doesn't include the domain that submitted. Add it (or remove all entries to allow any source).

7FAQ

Can I have multiple forms on one website?

Yes — create as many forms as your plan allows. Each gets its own unique webhook URL. Use different URLs in each form's submit handler.

Can I customize the field names beyond Name/Phone/Email/Message?

Yes. Add any fields you want in Step 3 of the wizard. The webhook accepts whatever JSON keys you send — they're stored verbatim and shown in the dashboard. The four "magic" names (name, phone, email, message) are surfaced in standard alert templates; everything else shows up under "Other fields".

Is the webhook URL HTTPS?

Yes. All TwaBot webhook URLs are HTTPS only. Plain HTTP requests are rejected.

What's the rate limit?

Default 60 submissions per minute per form. Heavy bursts return HTTP 429. If you have a legitimate high-volume use case, contact support to raise the limit.

Can I get the lead via my own webhook (forward to my CRM)?

Yes — every form submission can also trigger an outbound webhook to your own CRM. That's a separate "Forward to" config (coming in 2026 Q3). For now, you can pull leads via the Leads API: GET /api/v1/leads.

Does this work on mobile?

Yes — the snippets are pure HTML/JS and work in any modern browser, desktop or mobile.

How long are submissions stored?

Indefinitely while your account is active. You can export anytime as CSV from the form's Submissions modal.

GDPR / DPDP compliance?

TwaBot is a data processor for the leads you collect. Make sure your form has its own consent checkbox and a link to your privacy policy. We don't show consent text by default — you must add it.