Where do you want your Formly’s data to be sent? Use webhooks to get every response sent straight to a compatible web app or URL as soon as it’s submitted.
What is a webhook?
In general terms, a webhook is simply a notification sent over the web, which is triggered automatically whenever a specific event occurs. In Formly, you can create webhooks that are triggered upon a form submission.
Webhooks are an advanced feature intended for Formly users who know how to handle them.
If you’re looking for a non-technical way to sync form submissions with other apps, check out integrations with Zapier, Make, Pabbly, and others.
Setup guide
Webhooks send notifications to a specified URL when triggered by an event. The event trigger is a new form submission. When someone submits a Formly form, a notification containing the response data gets sent to your URL in JSON format via a POST request.
Add a webhook
1. Open your form from your Workspace.
2. Go to the Connect panel and click on the Click Connect button in the Webhooks
3. You’ll be prompted to configure your webhook endpoint.
Endpoint URL
For the endpoint URL, set up an HTTP or HTTPS endpoint that can accept webhook requests with a POST method:
Handles POST requests with a JSON payload
Returns a successful status code (2XX) within 10 seconds
⚠️ A webhook endpoint has a 10-second timeout to process and respond to a new submission. If the processing takes longer, it's advisable to call another service internally.
Add a signing secret
You can secure your webhook by using a signing secret to verify that Formly generated a webhook request.
When this option is enabled, the webhook requests will contain a Formly-Signature header.
Add HTTP headers
You can optionally configure custom HTTP headers that will be sent with each webhook request. Click Add HTTP headers and enter the header name and value.
4. Click on Connect and you’ll be taken back to the webhooks tab.
You will see the active webhook URLs and you can connect unlimited webhook URLs and pause them by clicking the toggle.
Click the three dots next to your active webhook to view the events log. This log contains all requests made to your webhook endpoint
5. To test your webhook, click the Events log, followed by the Send test request button that appears.
You can see your delivery IDs on the left. All test deliveries are marked Test.
Click Request or Response to view requests or responses.
Warning! If you want to redeliver the test, make sure your webhook is set to On.
6. Click the X in the top right corner to return to the Webhooks tab.
7. To edit your webhook, click the three dots and select Edit.
8. To delete your webhook, click the three dots and select Delete.
Example webhook event
This example event contains every type of field that Formly supports.