Using Webhooks With Online Forms (Beginner's Guide)

If you've ever wanted your form to talk directly to your own app the instant someone submits it, form webhooks are the tool for the job. They're the simplest way to get real-time data out of a form and into your own systems, no polling and no manual exports. This beginner's guide explains what webhooks are, how they work, and how to set them up with FormMaker, a 100% free online form builder.

What are form webhooks?

A webhook is an automated message a service sends when an event happens. With form webhooks, the event is a new submission. The moment someone completes your form, FormMaker sends an HTTP POST request to a URL you control, with the response data in the body.

Think of it as a reverse API call. Instead of your app repeatedly asking "any new responses yet?", the form proactively tells your app the second a response arrives. That push model is what makes webhooks fast and efficient.

The key difference from a native integration or Zapier: with webhooks, the data goes straight to your own endpoint, and you decide exactly what to do with it. That makes webhooks the most flexible option for developers and technical teams.

When to use form webhooks

Webhooks are a great fit when you want to:

• Send data to your own backend or database in real time
• Trigger custom logic, like scoring a lead or provisioning an account
• Avoid polling delays that come with some automation platforms
• Build a pipeline that no off-the-shelf integration covers

If you just need to drop responses into Google Sheets or Slack, a native integration is simpler. Reach for webhooks when you need control.

What a webhook payload looks like

When a form is submitted, FormMaker sends a JSON payload to your endpoint. The exact shape is documented in the official FormMaker docs, but it generally looks like this:

{
  "event": "response.created",
  "form_id": "abc123",
  "response_id": "resp_789",
  "submitted_at": "2026-08-24T10:15:00Z",
  "answers": {
    "name": "Jordan Lee",
    "email": "jordan@example.com",
    "plan": "pro"
  }
}

Your job is to write an endpoint that receives this POST request, reads the answers object, and does something useful with it.

How to set up form webhooks step by step

Follow these steps to get your first webhook running.

1. Build the endpoint that will receive data

Create a public URL that accepts POST requests. Here's a minimal example handler:

// A simple webhook receiver
export async function handler(req) {
  if (req.method !== "POST") {
    return new Response("Method not allowed", { status: 405 });
  }

  const payload = await req.json();
  const { name, email, plan } = payload.answers;

  // Your custom logic here: save to a database, send an email, etc.
  console.log(`New submission from ${name} (${email}) on plan ${plan}`);

  // Respond quickly so the sender knows you received it
  return new Response("ok", { status: 200 });
}

The important part: return a 200 status quickly. That tells FormMaker the delivery succeeded.

2. Deploy the endpoint

Host it anywhere that gives you a public HTTPS URL, such as a serverless function or a small server. For local testing, a tunneling tool can expose your machine to the internet temporarily.

3. Register the webhook in FormMaker

1. Open your form in the FormMaker dashboard and find the Webhooks or Integrations area.
2. Paste your endpoint URL.
3. Save the webhook.

4. Send a test submission

Submit your form and watch your endpoint's logs. You should see the payload arrive. If it doesn't, check that your URL is public, uses HTTPS, and returns a 200.

Handling webhooks safely

A few practices keep your webhook reliable and secure.

Verify the request is genuine

Many providers sign webhook requests so you can confirm they really came from the service. Check the FormMaker docs for signature or secret-token details, then validate every incoming request before trusting it.

Respond fast, process later

Return 200 immediately, then do heavy work (sending emails, calling other APIs) in the background. If your endpoint is slow, deliveries can time out.

Make handling idempotent

Occasionally a webhook may be delivered more than once. Use the response_id to detect duplicates so you don't create the same record twice.

Plan for retries

If your endpoint is briefly down, well-designed webhook systems retry delivery. Make sure repeated deliveries of the same event don't cause problems.

Webhooks vs. integrations vs. the API

• Native integrations (Google Sheets, Slack) are the easiest and need no code.
• Zapier connects to thousands of apps with no code, on a short polling interval.
• Webhooks push data to your own endpoint in real time, ideal for custom logic.
• The API lets you pull data on demand and manage forms programmatically.

Many teams combine them: webhooks for instant custom processing, plus a native integration for a spreadsheet backup.

Frequently asked questions

Do I need to be a developer to use form webhooks?

You need enough technical comfort to deploy an endpoint that accepts POST requests. If that's not you, a native integration or Zapier is a better starting point.

What URL should I use?

Any public HTTPS URL you control that returns a 200 status. Serverless functions are a popular, low-maintenance choice.

What happens if my endpoint is down?

Well-designed webhook systems retry failed deliveries. Build your handler to tolerate duplicate deliveries using the response ID.

Are webhooks free with FormMaker?

Yes. FormMaker is free with unlimited forms and responses, and supports webhooks, an API, and a JavaScript SDK.

Start building with webhooks

Form webhooks give you real-time, code-level control over your submission data. Build an endpoint, register the URL, send a test, and you've got a live pipeline from your form to your own systems.

Start automating your forms free with FormMaker and put webhooks to work on your next project.