Webflow Email to Webhook Integration

Why Connect Webflow to Inbound Email

Webflow empowers builders to create applications without writing code. Email is a natural input channel for many no-code apps — contact forms, appointment requests, and customer feedback all arrive via email. JsonHook makes it trivial to receive those emails as structured JSON data that Webflow can read, display, and act upon.

Connecting your inbound email to Webflow through JsonHook unlocks a range of high-value automation scenarios:

• Populate a data table with records parsed from incoming emails
• Trigger page logic or workflows when a specific email address receives a message
• Display inbound email data in a custom dashboard built on Webflow
• Connect contact form submissions delivered by email to your app's user table
• Build an email-driven approval flow without writing a single line of code

Webflow supports Webflow CMS API (Collection Items endpoint), which makes it a natural target for JsonHook's outbound POST requests. Every email that hits your JsonHook address is parsed within milliseconds and delivered to Webflow as a clean JSON object — no polling, no manual export, no middleware server to maintain.

Setting Up Webflow with JsonHook

The following steps walk you through connecting JsonHook to Webflow. The entire setup typically takes under ten minutes.

1. Step 1: In Webflow, create a CMS Collection for email submissions with fields: Subject (Plain Text), From (Plain Text), Body (Rich Text), and Received Date (Date/Time).
2. Step 2: Generate a Webflow API token from Account Settings → Integrations → API Access.
3. Step 3: In Make or n8n, create a workflow triggered by the JsonHook webhook URL. Add an HTTP Request action to POST https://api.webflow.com/collections/{collection_id}/items with the API token in the Authorization header.
4. Step 4: Map subject to the Subject field, from.address to the From field, text to the Body field, and date to the Received Date field. Publish the item after creation.

Once the connection is active, every email sent to your JsonHook address will be automatically parsed and forwarded to Webflow. You can test the integration by sending a plain-text email to your JsonHook address and verifying that the payload appears in Webflow within a few seconds.

JsonHook supports Webflow CMS API (Collection Items endpoint) on the Webflow side, so no additional configuration is needed in Webflow beyond the steps above. If Webflow requires header-based authentication for incoming webhooks, add the required headers in the JsonHook endpoint configuration under Advanced Settings.

Example Workflow: When a press inquiry email arrives, create a new CMS item in the Press Inquiries collection

This walkthrough demonstrates one concrete way to use JsonHook with Webflow. The scenario: When a press inquiry email arrives, create a new CMS item in the Press Inquiries collection.

When an email matching this scenario arrives, JsonHook parses the raw SMTP message and constructs the following JSON payload before POSTing it to your Webflow endpoint:

{
  "messageId": "",
  "from": {
    "name": "Jane Smith",
    "address": "[email protected]"
  },
  "to": [
    { "address": "[email protected]" }
  ],
  "subject": "When a press inquiry email arrives, create a new CMS item in the Press Inquiries collection",
  "text": "Hi, I need help with my account. Please contact me at your earliest convenience.",
  "html": "
Hi, I need help with my account...
",
  "date": "2026-03-15T10:32:00.000Z",
  "attachments": [],
  "headers": {
    "x-priority": "1"
  }
}

Webflow Collection Item fields (inside fields object): subject → subject, from.address → from-email, text → body, date → received-date. Set _archived: false and _draft: false to publish immediately, or _draft: true for editorial review.

Once Webflow receives this payload, it can execute any downstream action — whether that is posting a notification, creating a record, updating a field, or triggering an entire multi-step workflow. The key advantage is that the data arrives as structured JSON, so Webflow never needs to parse raw email text or deal with MIME encoding.

Payload Mapping for Webflow

JsonHook delivers a consistent JSON schema for every parsed email. The table below shows which JsonHook fields map to the equivalent fields in Webflow. Use this as a reference when configuring your Webflow Webflow CMS API (Collection Items endpoint).

Not every field will be present in every email. Always check for null or missing values before mapping to required fields in Webflow. For text-only emails, html will be empty; for HTML-only emails, text may be empty or auto-generated from the HTML. The attachments array will be an empty array when no files are attached.

Best Practices for Webflow Email Integration

Following these best practices will make your Webflow email integration more reliable, easier to debug, and simpler to scale as your email volume grows.

• Use dedicated addresses per workflow. Create a separate JsonHook inbound address for each distinct Webflow workflow you want to trigger. This makes routing explicit and avoids a single endpoint becoming a bottleneck for all email types.
• Validate the payload before acting. In Webflow, add a conditional check at the start of your workflow to confirm that required fields like from.address and subject are present and non-empty before executing downstream actions.
• Test with real emails first. Use JsonHook's delivery log to inspect the raw JSON payload before wiring up Webflow. Confirm that all the fields you plan to map are actually populated by your email source.
• Handle errors gracefully. Configure Webflow to catch webhook delivery failures and send an alert. JsonHook will retry failed deliveries, but your Webflow endpoint should return a 2xx status promptly to acknowledge receipt.
• Keep secrets out of email content. Avoid routing emails that contain passwords, API keys, or PII through workflows unless you have appropriate data-handling controls configured in Webflow. Use JsonHook's HTTPS delivery to protect data in transit.