Jotform Webhooks: Convert Form Data to JSON

Jotform can send every form submission to a webhook URL, but the receiving API often expects a clean JSON document rather than multipart form fields. The practical solution is to receive the Jotform webhook, parse its rawRequest field, select the values you need, and forward a new JSON body.

This guide uses a Webhook Relay JavaScript function, so there is no parsing server to deploy.

What Jotform sends

Jotform's webhook setup guide shows that you add an endpoint under Settings > Integrations > WebHooks. It also documents a rawRequest value that can be JSON-decoded to access the submitted answers.

In Webhook Relay, parsed multipart or URL-encoded fields are available under r.formData. Each key holds an array because a form may submit the same name more than once:

const rawRequest = r.formData.rawRequest[0]
const submission = JSON.parse(rawRequest)

Use the request log to inspect a real sample from your form. Question keys differ between forms and can change when fields are renamed.

1. Create the webhook destination

Open Webhook Relay public forwarding, create a destination for your API, and copy the generated input URL.

For initial testing, use Webhook Bin as the destination so you can see both the original form fields and the transformed request without touching a production API.

2. Add the webhook in Jotform

In the Jotform Form Builder:

1. Open Settings.
2. Select Integrations.
3. Search for WebHooks.
4. Paste the Webhook Relay input URL.
5. Complete one test submission.

Jotform allows multiple webhook URLs, but a single Webhook Relay input is easier to manage when the same submission must go to several systems.

3. Inspect rawRequest

Open the received request in the Webhook Relay log. A simplified rawRequest value may decode to:

{
  "q3_fullName": { "first": "Ada", "last": "Lovelace" },
  "q4_email": "[email protected]",
  "q5_company": "Analytical Engines Ltd",
  "q6_message": "Please contact me about the API."
}

The values above are synthetic. Copy the keys from your own test submission before writing the mapping.

4. Convert the Jotform submission to JSON

Attach this function to the output:

const values = r.formData || {}
const rawRequest = values.rawRequest && values.rawRequest[0]

if (!rawRequest) {
  r.stopForwarding()
  return
}

let submission

try {
  submission = JSON.parse(rawRequest)
} catch (error) {
  r.stopForwarding()
  return
}

const name = submission.q3_fullName || {}
const payload = {
  source: "jotform",
  submission_id: values.submissionID && values.submissionID[0],
  name: [name.first, name.last].filter(Boolean).join(" "),
  email: submission.q4_email,
  company: submission.q5_company,
  message: submission.q6_message
}

if (!payload.submission_id || !payload.email) {
  r.stopForwarding()
  return
}

r.setMethod("POST")
r.setHeader("Content-Type", "application/json")
r.setBody(JSON.stringify(payload))

Replace q3_fullName, q4_email, q5_company and q6_message with the keys from your form. The result is a predictable API request:

{
  "source": "jotform",
  "submission_id": "6000000000000000000",
  "name": "Ada Lovelace",
  "email": "[email protected]",
  "company": "Analytical Engines Ltd",
  "message": "Please contact me about the API."
}

Add destination authentication

Store the destination credential in the function's configuration variables and add it at delivery time:

r.setHeader("Authorization", "Bearer " + cfg.get("DESTINATION_API_TOKEN"))

Do not put an API token in the Jotform form, webhook URL or function source.

Fan out one submission

Add multiple outputs when different teams need the same form:

• Send compact JSON to your CRM.
• Post a formatted summary to Slack.
• Store the full approved field set in an internal API.
• Send only routing metadata to an automation system.

Each output can have its own function. That avoids forcing one oversized payload onto every destination.

Handling files and sensitive fields

File-upload fields and encrypted forms need deliberate treatment. Jotform notes that encrypted forms send encrypted data through the webhook. Do not assume a transform can decrypt it without the appropriate key and approved handling process.

For ordinary forms:

• Forward only fields required by the destination.
• Avoid logging secrets, identity documents or health information.
• Validate required fields before delivery.
• Use the submission ID as an idempotency key when the destination supports one.
• Apply retention and access controls appropriate to the form data.

Troubleshooting

r.formData.rawRequest is undefined

Check the original Content-Type and request log. Multipart parsing requires the original boundary parameter, and URL-encoded parsing requires the correct content type. Also confirm the Jotform integration sent an actual submission rather than a different test request.

JSON.parse fails

Logically inspect the first rawRequest value in the request viewer. Do not parse the full multipart body as JSON. The JSON string is the field value.

Fields are empty after editing the form

Jotform question keys may differ from their visible labels. Send a new test submission and update the mapping to the keys currently present in rawRequest.

Jotform retries the request

Jotform documents a 30-second webhook timeout. Keep the receiving path fast and make the destination idempotent using submissionID, because any webhook system may redeliver after an ambiguous failure.

For more field-mapping examples, see the webhook transformation cookbook, multipart form-to-JSON reference, and URL-encoded form reference.