What are webhooks and how do I use them?

Webhooks are used by developers to integrate Paperform form submissions into their own services. This is particularly useful if you would like to use forms within your own services or do something special or difficult with the submitted data.

This feature is exclusively available with specific pricing plans.

For non-technical teams, Direct Integrations, Zapier, or Make are more appropriate solutions for most needs.

Adding a webhook

  1. In the form editor, navigate to After Submission → Integrations & Webhooks.
  2. Click the "Webhooks" section farther down the page to open its configuration.
  3. Select the input above the "Add Webhook" button and enter your endpoint's URL.
  4. Click the "Add Webhook" button to add your webhook to the list.
Screenshot of an example webhook being typed in under After Submission → Integrations & Webhooks → Webhooks

Testing webhooks

You may test a webhook at any time by clicking the "Test" button in the "Webhooks" section. This will trigger the webhook with the latest submission's data. You may also test your webhook by simply submitting your form.

The "test" button only works if your form has been submitted at least once.

Submission payload

Webhooks POST a JSON payload on submission to the saved webhook URL(s).

Custom header support

We do not currently support the addition, removal, or modification of headers. If, for example, you require authorization for your endpoint, you'll need to include it in the webhook URL's query string.

Sample JSON payload

{  
  "data": [  
    {  
      "title": "question 1", // Title of question as defined  
      "description": "This is the first question",   
      "type": "address", // Question type  
      "key": "ba7ri", // Question pre-fill key (unique to form)  
      "custom_key": "address_1", // Custom pre-fill key (if set) 
      "value": "343 Tester Road, Snohomish, Washington, 98290, United States" // Submitted value for question
    },  
    {  
      "title": "question 2",  
      "description": "This is the second question",  
      "type": "text",  
      "key": "tgp8",  
      "custom_key": null,  
      "value": "Test 123"  
    }  
    // ...each question has its own object.  
  ],  
  "submission_id": "XXXXXXXXXXXXXXXXXXX", // Unique ID for submission.  
  "created_at": "2017-06-09 09:51:23", // Submission date  
  "ip_address": "192.168.10.1", // IP Address of submission  
  "charge": null // If a payment is made, payment information is given here  
}

Comments in the above sample JSON are for illustration purposes only. Comments included in this manner are not valid JSON.

The simplest and quickest way to examine what your unique submission structure looks like is to use a service such as Request Inspector to create a webhook URL and send test data there.

The data array in detail

Each question is represented as a single object within the data array. Its object is present under all conditions. That is, even if the question is unanswered (e.g. an optional question) or the question is hidden (whether it retains its answer when hidden or not), the object will still be present in the payload.

All of the properties of that object will also be present at all times, but may have varying values.

Possible values for the object

Property Possible value(s)
title The question's title or, if blank, ""
description The question's description or, if blank, null
type The question's type
key The question's automatically generated pre-fill key
custom_key The question's pre-fill key or, if not set, null
value The question's answer or, if no answer, null

Answer Piping in URL

The webhook URL also supports answer piping, which means that if you need to pass answers through as query string parameters, you can!

You can add answer piped values by either writing {{ key }} where "key" is the relevant question's pre-fill key, or by using the + menu to the right of the input.

Screenshot of an example webhook URL that contains answer piping in its parameters: https://webhook.example.com/my-webhook/12345?client={{ e7jcq }}&phone={{ 3j80r }}