Jotform

Jotform brings conditional logic, 40+ payment gateways, file uploads, and e-signatures to any page on your site, the kind of advanced form capabilities the native forms don't cover. Embed a form inline, push submissions into CMS collections, and new entries publish as live pages automatically.

That makes it a fit for agencies building client sites, small businesses capturing leads and payments without developers, educational institutions running course registrations, healthcare practices handling patient intake on Gold or Enterprise HIPAA plans, and nonprofits collecting donations or managing hiring workflows.

How to integrate Jotform with Webflow

What is Jotform? Jotform is an online form builder and workflow automation platform used by 35+ million people. It offers a drag-and-drop Form Builder, 20,000+ templates, conditional logic, e-signatures, and 40+ payment gateway integrations. Submission data lives in Jotform Tables, a spreadsheet-database hybrid with reporting views.

Reach for this combination when the native forms cannot do the job. Build a form in Jotform when you need payment collection or branching logic, then embed it into your page. The same applies when file uploads exceed the native 10 MB limit. From there, route submissions into the CMS to generate CMS-backed pages.

The Jotform integration supports embeds, Zapier automations, and API-based builds. Use Code Embed elements to drop a Jotform form into any page — no coding required. Zapier automation connects Jotform submissions to CMS collections without writing code. For full control over CMS sync and submission data, pair the Data API with the Jotform API on a server you control.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Embed a Jotform form with Code Embed elements

Embedding is the primary no-code path because Jotform has no Marketplace app. Generate an embed snippet in Jotform, then paste it into a Code Embed element. This works for inline forms placed directly in a page section. Both companies maintain official integration docs at webflow.com/integrations/jotform and jotform.com/integrations/webflow.

Jotform offers several embed methods, each accessed the same way. Open Form Builder, click Publish, then Embed, then pick your method and copy the code.

• JavaScript embed loads the form in an iframe and auto-adjusts height. It reflects Form Builder changes instantly and suits most sites.
• iFrame embed displays the form in a dedicated iframe with no site script interaction. Use it when scripts conflict.
• Lightbox opens the form in a modal overlay triggered by a button or link, or on page load.
• Feedback Button adds a floating tab that opens the form in a modal when clicked from anywhere on the site.

Choose the embed method based on placement: inline on the page, modal, or a persistent site-wide trigger.

To embed a form inline:

1. In Jotform Form Builder, click Publish > Embed, then copy the embed code.
2. Open the Add panel and drag a Code Embed element onto your page.
3. Paste the Jotform embed code and click Save and Close.

The Code Embed element supports HTML, CSS in <style> tags, and JS in <script> tags only. Server-side languages like PHP, Python, and Ruby won't run here. Custom code cannot exceed 50,000 characters, though Jotform's JavaScript embed is compact and fits well within that cap. If the default script embed does not render, switch to the iFrame method from the Jotform Publish section.

Embed a site-wide Feedback Button

For a form that follows visitors across every page, use Jotform's Feedback Button snippet. It renders a floating tab that opens the form in a modal. Place this snippet in your Custom code in head and body tags settings rather than on a single page.

To add a site-wide form:

1. In Jotform, generate the Feedback Button embed code from Publish > Embed.
2. Go to Site settings > Custom Code and paste the snippet into the Footer code field. See Custom code in head and body tags for placement details.
3. Publish your site to activate the button.

Both the Code Embed element and site custom code fields require a paid site plan. You can't embed custom code on the free Starter plan.

Embed a form inside a CMS collection

You can place a Jotform form inside a CMS item, useful when different collection items need different forms. A contact page with multiple locations can pull the correct form src per location tab from a Collection field.

To embed a form in a CMS item:

1. Open your CMS collection and select an item with a Rich text field.
2. In the Rich text field, press Return, click the plus icon, and select HTML embed.
3. Paste the Jotform iFrame embed code and save.

Script-based Jotform iframes can render at 10px height inside a Collection List. Add this CSS rule: iframe[src*="jotform"] {min-height:600px!important;}. Add it to your page or site custom code.

Connect Jotform to the CMS with Zapier

Zapier is the only no-code path for syncing Jotform submissions to the CMS. It offers an official Jotform connection with instant triggers and six pre-built templates. A new form submission can create a live CMS item automatically, and entries become published pages without API work. Jotform's Webflow integration page documents this flow.

The connection supports these triggers and actions:

• Jotform New Submission trigger → Webflow Create Live Item action
• Jotform New Signed Document trigger → Webflow Create Live Item action
• Webflow New Form Submission trigger → Jotform Create Submission action
• Webflow New Order trigger → Jotform Create Submission action

Six pre-built templates cover the common patterns. They include templates that create live CMS items from new Jotform submissions and update existing items on each new entry.

Build with the Webflow and Jotform APIs

For real-time sync with full control, connect the two systems through their APIs. This path suits developers who need to map form fields to CMS schemas. It also supports deduplication and custom logic on each entry. You'll need server-side development since custom code fields cannot run PHP, Python, or other backend languages.

For API builds, use the Jotform API for form data, submissions, and webhook registration. Jotform webhooks trigger real-time events when a form receives a submission. The Data API handles CMS collection items and form submissions.

Jotform supports exactly one webhook event, a new form submission. If you expect richer events like edits or deletions, poll the API instead.

Sync Jotform submissions to the CMS via webhook

The webhook pattern pushes each submission to your endpoint in real time, where you transform it and create a CMS item. Jotform sends the payload as form-data with Content-Type application/octet-stream, with a rawRequest field containing the full submission as a JSON-encoded string.

To build the sync:

1. Register the webhook with POST https://api.jotform.com/v1/form/{myFormID}/webhooks. Include webhookURL and apiKey as parameters.
2. On each POST to your endpoint, parse the body and JSON-decode rawRequest to extract field values like q3_name and q8_email.
3. Map those values into a fieldData object matching your collection schema. Use GET /form/{id}/questions to discover question IDs and labels.
4. Call POST https://api.webflow.com/v2/collections/{collection_id}/items/live with a Bearer token and CMS:write scope to create and publish the item.

Your endpoint must respond within Jotform's 30-second timeout. Use the event_id field inside rawRequest to deduplicate retried deliveries. For encrypted forms, only encrypted data passes through the webhook.

Publish CMS items and manage submissions

Beyond creating items, the APIs let you update entries and publish site changes programmatically. Use these when a submission edits an existing member page or product listing rather than creating a new one.

To update and publish:

• Update live items in bulk with PATCH https://api.webflow.com/v2/collections/{collection_id}/items/live, up to 100 at once.
• Retrieve submission data to sync with GET https://api.jotform.com/form/{formID}/submissions?apiKey={apiKey}, which supports offset, limit, filter, and orderby.
• Publish the site with POST https://api.webflow.com/v2/sites/{site_id}/publish using sites:write scope.

The publish endpoint allows one successful publish queue per minute, so batch your CMS changes before triggering a publish.

What can you build with the Jotform Webflow integration?

Integrating Jotform with Webflow lets you run advanced forms and CMS-backed pages without native form limitations.

• Membership directories: Registration forms create member pages in the CMS with photos and bios. Contact details sync into the same collection item. New submissions publish as live directory entries through Zapier or the CMS API.
• Event registration systems: Conference forms generate attendee lists with session preferences and dietary requirements, then sync each entry to a CMS collection while Jotform sends automated confirmations.
• Product catalogs: Vendor submission forms create product listings with images and specifications. Pricing publishes immediately to your site as part of the new CMS item.
• Payment and application forms: Course applications or donation forms collect payments through 40+ gateways and file uploads — capabilities the native forms lack — embedded directly in your pages.

If you need more control over field mapping and deduplication, the API integration path covers those cases with full flexibility.