Formcrafts - a form and survey platform for Salesforce, HubSpot, etc
  1. Templates
    1. All templates illustration
      All templates
    2. Application forms illustration
      Application forms
    3. Calculation forms illustration
      Calculation forms
    4. Lead generation forms illustration
      Lead generation forms
    5. Customer service illustration
      Customer service
    6. Evaluation forms illustration
      Evaluation forms
    7. Survey and feedback illustration
      Survey and feedback
    8. Operations forms illustration
      Operations forms
    9. Payment forms illustration
      Payment forms
    10. Booking and registration illustration
      Booking and registration
    11. Salesforce forms illustration
      Salesforce forms
    12. Other forms illustration
      Other forms
  2. Features
    1. 18 Form Fields illustration
      18 Form Fields
    2. 19 Integrations illustration
      19 Integrations
    3. Conditional Logic illustration
      Conditional Logic
    4. Multi-step Forms illustration
      Multi-step Forms
    5. Calculations illustration
      Calculations
    6. Partial Submissions illustration
      Partial Submissions
    7. Save & Resume illustration
      Save & Resume
    8. Payments illustration
      Payments
    9. Hidden Fields illustration
      Hidden Fields
    10. Dynamic Dropdowns illustration
      Dynamic Dropdowns
    11. Engagement analysis illustration
      Engagement analysis
    12. Multilingual forms illustration
      Multilingual forms
  3. Pricing
  4. Help
  5. Login
  6. Signup
    →
  • Help index
  • Features
    • Conditional logic
    • Prefill forms
    • Multi-step forms
    • Calculations
    • Partial submissions
    • Field references
    • Save and resume
    • Hidden fields
    • Dynamic lookup
    • Workflows
    • Dynamic dropdowns
    • Multilingual forms
    • Privacy mode
    • Success message
    • Form redirect
    • GA/GTM
    • Accept payments
    • Linked forms
    • Disable form
  • Styling
    • Custom CSS
    • Custom fonts
    • Color scheme
    • Form background
  • Analytics
    • Test mode
    • Overview
    • Field analytics
    • Form engagement
  • Workflows
    • Send emails
    • Form redirect
    • Success message
    • Webhooks
    • Create PDF
    • ActiveCampaign
    • Asana
    • Mailchimp
    • Front app
    • Freshdesk
    • Google Sheets
    • Pipedrive
    • Linear
    • Klaviyo
  • Sharing
    • Custom form link
    • Embed on a page (inline)
    • Embed on a page (popup)
    • Embed in emails
    • Embed on WordPress
    • Embed on Shopify
    • Embed on Squarespace
  • Salesforce
    • Overview
    • Create records
    • Update records
    • Related records
    • Dynamic picklists
    • Attach files
    • Create PDFs
    • Form prefill
  • HubSpot
    • Overview
    • Create contact form
    • Create lead capture form
    • Create customer survey
    • Prefill HubSpot form
    • Embed on HubSpot page
    • Uninstall
  • Zendesk
    • Create ticket form
    • Create CSAT survey
    • Embed on Help Center
    • Prefill ticket form
  • Admin
    • Users
    • Custom domain
    • Vanity subdomain
    • Subscription
  • Developers
    • Embed Library
    • API keys
    • API v1
    • API v2
  • Others
    • Partner program
    • GDPR compliance
    • Workflow logs
    • White labeling
    • Form speed
    • Zapier
    • Migration
  • Contact
  1. Help
  2. ›
    Workflows
  3. ›
    Webhooks

Configure webhooks

On this page
  1. Configuration
    1. Method
    2. Webhook URL
    3. Request signature
  2. Logs
  3. Data structure

Configuration

Webhooks are automatic notifications sent over the web, triggered by specific events. In our case the event is a new form response.

When a new form response is created we send a notification (along with the response data) to the configured webhook URL in real-time.

The webhook action offers 3 settings:

Method

Formcrafts supports two ways of sending webhooks:

  1. Form: This sends the webhook using the content-type of application/x-www-form-urlencoded. The data itself is encoded as key-value pairs, separated by &.

  2. JSON: This sends the data using the content-type of application/json. The data itself is encoded using JSON format.

Webhook URL

This must be a public URL that can accept POST requests. This is where we send the notification when a new form response is created.

Request signature

Your webhook URL is public, which means means that anyone can send data to this URL, which creates a security issue. To prevent this, Formcrafts can optionally send a signature along with the data. You can use this signature to verify that the data is indeed coming from Formcrafts, and hasn’t been tampered with.

The signature is sent via the x-formcrafts-signature header. To verify the signature, you need to do the following:

  1. Use the HMAC SHA256 algorithm to calculate the hash of the request body using the secret key.
  2. Encode the hash in base64 format.
  3. Prefix the hash with sha256=
  4. Compare the signature sent by Formcrafts with the one you calculated. If they match, then the request is valid.

Here is a code sample on achieving the above using Node.js with the Express framework.

const express = require('express')
const crypto = require('crypto')
const app = express()
const port = 3000

const verifySignature = function (receivedSignature, payload) {
  const hash = crypto
    .createHmac('sha256', "123")
    .update(payload)
    .digest('base64')
  return receivedSignature === `sha256=${hash}`
}

// When using "Form" type webhook
app.use(express.urlencoded({
  verify: (request, _, buffer) => {
    const signature = request.headers['x-formcrafts-signature']
    if (signature && verifySignature(signature, buffer) === false) {
      throw new Error("Invalid signature.");
    }
  },
  extended: true
}));

// When using "JSON" type webhook
app.use(express.json({
  verify: (request, _, buffer) => {
    const signature = request.headers['x-formcrafts-signature']
    if (signature && verifySignature(signature, buffer) === false) {
      throw new Error("Invalid signature.");
    }
  },
  extended: true
}));

app.post('/webhook', async (request, response) => {
  console.log('Received data', request.body)
  return response.status(200).send('OK')
})

app.listen(port, () => {
  console.log(`Webhook app listening on port ${port}`)
})

Logs

Formcrafts keeps a record of all successful and failed webhooks which you can view using the Logs button on the top-left corner of the form editor.

Learn more about Workflow logs.

Data structure

The data sent to the webhook URL in JSON format would look like this:

{
  "response_id": "1234",
  "created_at": "2024-02-23T20:12:30.081833+00:00",
  "form_id": "abcd1234",
  "form_name": "My form",
  "workspace_id": "e132bf87",
  "timezone": "America/Toronto",
  "page_url": "https://app.formcrafts.com/abcd1234?test=true",
  "test": true,
  "workflow_data": [
    {
      "workflow_id": "workflow1",
      "action_id": "action1",
      "provider": "zendesk",
      "object": "ticket",
      "data_type": "Hidden",
      "data": "12345"
    }
  ],
  "response_data": {
    "One line input": "Jack",
    "Number": "123",
    "Email": "[email protected]",
    "Phone": "+16479173435",
    "Comment": "This is a comment",
    "Hidden": "some_value",
    "Card": "100",
    "Datepicker": "2021-06-06",
    "Timepicker": "14:30",
    "NPS": "8",
    "Rating": "5",
    "Tabular": [
      [
        "Jane",
        "32",
        "Marketing"
      ]
    ],
    "Multiple Choice": [
      {
        "label": "Billing",
        "value": "billing"
      }
    ],
    "Dropdown": [
      {
        "label": "Canada",
        "value": "CA"
      }
    ],
    "Slider": {
      "label": "50 people",
      "value": "50"
    },
    "File upload": [
      {
        "id": "0b40f670-6881-49c1-97e5-3fb4c70a317e",
        "name": "some-image.png",
        "size": 92000,
        "mimetype": "image/png",
        "url": "https://app.formcrafts.com/protected/dashboard/file?id=0b40f670-6881-49c1-97e5-3fb4c70a317e"
      }
    ]
  }
}

For the Form method the data would be sent as key-value pairs, in this format:

response_id=1234&created_at=...

The data sent by JSON is more comprehensive and easier to work with.

Minimal, fast, and powerful. Try now.
Formcrafts - a form and survey platform for Salesforce, HubSpot, etc

Subtle Web Inc,
225 Railway St E,
T4C 2C3, Cochrane AB

Salesforce AppExchange partner logo HubSpot app partner logo
Templates
Application formsLead generation formsSurvey & feedback formsEvaluation formsSupport request formsBooking & registrationContact forms
Comparisons
vs AllFormAssemblyTypeformJotformWufooSurveyMonkey
Features
Conditional logicSalesforce formsHubSpot formsZendesk ticket formsEmail formsIntegrationsForm fields
Resources
Help centerBlogDeveloper APIGDPRStatusReport abuseContact us
Company
About usNonprofitCase studiesSecurityTerms and privacy