Gravity Forms

How to integrate Gravity Forms with Webflow

Choose based on needs: iframe embedding for quick deployment, webhook transmission via Zapier/Make for real-time CMS transmission, or REST API integration for two-way sync and complex transformations. See Gravity Forms REST API v2 and Webflow APIs for specifications.

All three methods are feasible. Iframe embedding requires minimal technical knowledge. Webhook transmission needs basic Zapier/Make familiarity. API integration requires server-side development experience but enables the most powerful customizations.

Use the iframe embed method

Displays Gravity Forms within Webflow pages using the custom code embed element. Preserves all functionality (conditional logic, payments, file uploads) without API integration.

Limitations: Custom code size constraints, no same-form multiple embeds (ID conflicts), x-frame-options blocking. Resolve x-frame-options via Cloudflare reverse proxy, hosting provider modifications, security plugin adjustments, or Webflow Enterprise headers.

WordPress setup

Use the shortcode: [gravityform id="1" title="false" description="false" ajax="true"]

Parameters:

• id: Form ID (required)
• title/description: true or false
• ajax: true (required for iframe to prevent page reloads)

Webflow setup

Add a custom code embed element with: <iframe src="https://your-wordpress-site.com/form-page/" width="100%" height="600" frameborder="0"></iframe>

Key considerations

• All Gravity Forms features work inside iframe
• Style isolation requires custom CSS for visual consistency
• Both sites require HTTPS

Best for lead capture, surveys, and file submissions. CMS sync requires Zapier/Make middleware.

Use webhook transmission with Zapier or Make

Gravity Forms Webhooks Add-On POSTs submission data to middleware services, which create/update Webflow CMS collection items via API. Best for one-way form-to-CMS data flow.

The setup includes the following steps:

1. Install Webhooks Add-On at Forms > Settings > Add-Ons
2. Navigate to form Settings > Webhooks > Add New
3. Configure: Request URL, Method (POST default), Format (JSON/FORM), Headers, Body (All Fields or specific)
4. Set conditional logic if needed
5. Test submission

The payload structure looks like the following:

{
  "form_id": "1",
  "entry_id": "123",
  "form_title": "Contact Form",
  "date_created": "2026-01-13 10:30:00",
  "input_1": "John Doe",
  "input_2": "john@example.com"
}

Transform numeric field IDs to Webflow field slugs (input_1 → "name", input_2 → "email").

Middleware mapping (Zapier/Make):

1. Select Create Item for Webflow collection
2. Map fields: input_1 → name, input_2 → email, entry_id → slug
3. Ensure required fields (slug) are populated
4. Test integration

Webhooks are sent immediately after submission, support multiple endpoints per form, and don't consume WordPress database storage.

Build with Webflow and Gravity Forms APIs

REST APIs enable two-way sync, custom validation, and complex integrations. Requires server-side code for authentication and data transformation. See the working with the CMS guide for Webflow-specific implementation details.

Authentication

• Gravity Forms: OAuth 1.0a (recommended) or Basic Auth. Generate keys at Forms > Settings > REST API
• Webflow: Bearer token (site settings) or OAuth 2.0 for multi-site. Header: Authorization: Bearer YOUR_TOKEN

Key endpoints:

• Submit entries: POST /gf/v2/forms/{form_id}/submissions
• Retrieve entries: GET /gf/v2/entries
• Create CMS items: POST /v2/collections/{collection_id}/items
• List CMS items: GET /v2/collections/{collection_id}/items
• Update entries: PUT /gf/v2/entries/{entry_id}

Sync form submissions to Webflow CMS

1. Configure webhook to your server
2. Transform field IDs to Webflow slugs
3. POST to Webflow collection endpoint

const webflowData = {
  fieldData: {
    name: gravityData.input_1,
    email: gravityData.input_2,
    slug: `lead-${Date.now()}`
  }
};

Dropdown/radio fields require option IDs, dates need ISO 8601 format, references need valid item IDs.

Process payment data

Gravity Forms achieves PCI compliance by never storing raw card data. Payments flow through gateway add-ons (Stripe, PayPal, Square, Mollie) using tokenization. Only transaction metadata syncs to Webflow — raw payment data cannot be transferred.

Handle file uploads

Requires Content-Type: multipart/form-data. Files store at /wp-content/uploads/gravity_forms/. Webflow CMS items reference file URLs; files remain on WordPress server.

Bidirectional sync

Two-way sync requires custom server-side code with deduplication logic, loop prevention, and conflict resolution. Not recommended for non-developers.

Rate limits: Webflow allows 60 requests/minute (Starter/Basic) or 120/minute (CMS/Business). Site Publish limited to 1/minute. Implement exponential backoff for 429 errors.

What You Can Build

Integrating Gravity Forms with Webflow lets you create advanced form workflows with conditional logic, payments, and approval routing that sync data to your site.

• Multi-step lead qualification funnels: Conditional logic shows/hides form sections based on user input. Qualified leads sync via webhooks to Webflow CMS collections through Zapier/Make.
• Payment-enabled registration pages: Accept course enrollments or event registrations with Stripe/PayPal/Square/Mollie. Sync registration data to Webflow CMS for dynamic attendee directories.
• Client onboarding workflows: Multi-stage intake forms with Gravity Flow add-on for approvals. Sync submissions to Webflow CMS for client-facing status dashboards.
• Dynamic testimonial collections: Embed feedback forms via iframe, then use webhooks to automatically populate Webflow CMS testimonial collections for display on your site.