Connect website forms and landing pages

Recommended pattern

Proxy browser form submissions through your own server, CMS plugin, or serverless function. This keeps the shared secret out of public JavaScript and gives you a clean place to validate spam, consent, and required fields before sending the lead to InstaChime.

Server-side example

await fetch("https://instachime.com/api/webhooks/capture", {
  method: "POST",
  headers: {
    "content-type": "application/json",
    "x-instachime-secret": process.env.INSTACHIME_WEBHOOK_SECRET
  },
  body: JSON.stringify({
    source: "landing_page",
    full_name: form.name,
    email: form.email,
    phone: form.phone,
    message: form.message,
    utm_source: form.utm_source,
    utm_campaign: form.utm_campaign
  })
});

Verify

• Submit the public form once from a browser and once from a mobile viewport.
• Confirm the form handler returns a user-friendly success state only after the InstaChime request succeeds.
• Confirm required fields, consent fields, and spam checks run before forwarding.
• Confirm the lead appears in `/app` with UTM fields and source name.
• Confirm alert and CRM destination deliveries.

Exact server-side form flow

• Render the public form without the InstaChime shared secret.
• Submit the form to your own backend route, CMS plugin, or serverless handler.
• Validate required fields on the server: name, email or phone, message, consent, and spam trap fields.
• Attach UTM values and click IDs from cookies, hidden fields, or server-side attribution.
• Send the cleaned payload from the server to `https://instachime.com/api/webhooks/capture`.
• Return a success message to the browser only after the InstaChime request succeeds or is safely queued.

Recommended anti-spam controls

• Add a hidden honeypot field and reject submissions where it is filled.
• Rate-limit repeated submissions by IP and email/phone fingerprint.
• Reject obviously invalid email and phone formats before sending to InstaChime.
• Add CAPTCHA only if spam becomes a real problem because it can reduce conversion rate.
• Store the user agent and source IP only if your privacy policy and retention policy allow it.

Form field map

• `name` -> `full_name`.
• `email` -> `email`.
• `phone` -> `phone`.
• `message`, `service`, `budget`, `timeline`, `location` -> message and raw fields.
• `utm_*`, `gclid`, `fbclid`, `msclkid` -> attribution raw fields.
• `consent_sms`, `consent_email`, `privacy_policy_accepted` -> consent raw fields.

Website form troubleshooting

• If the browser receives CORS errors, move the InstaChime request to the server instead of calling directly from browser code.
• If leads appear without attribution, confirm hidden UTM fields are populated before submission.
• If submissions are slow, queue the InstaChime request server-side and show a confirmation after queuing.
• If spam appears, add server-side rate limits before adding more visible friction to the form.
• If contact fields map incorrectly, inspect the raw lead fields in InstaChime and rename source fields clearly.