Formly

How to integrate Formly for Webflow with Webflow

Formly extends Webflow forms through an attribute-based JavaScript system that works with Webflow's native form submission system, as the native forms lack conditional logic and multi-step functionality.

You can integrate Formly through the Webflow Marketplace app, implement the script and attribute method with JavaScript embedding, or build with the Webflow API for backend automation. The marketplace app provides visual attribute configuration, the script method offers direct implementation control, and Webflow API integration enables server-side CMS operations and webhook processing.

Use the Formly for Webflow app

Install the Formly app from the Webflow Marketplace to add multi-step form functionality through Formly's attribute-based system. The app lets you add Formly attributes like data-form="step", data-form="next-btn", and data-form="submit-btn" directly in Webflow without manual code editing. This works for users who want to avoid managing custom JavaScript while still implementing advanced form features.

The marketplace app provides these capabilities:

• Multi-step form creation with visual step configuration
• Automatic progress indicators showing completion status
• Custom navigation buttons for forward and backward movement
• Input validation with error messaging
• Press enter to progress for keyboard navigation
• Access to cloneable templates from the Formly library

The marketplace app includes both free and Pro features depending on your Formly plan. Basic plan users get core multi-step functionality and 10+ form enhancements. Pro plan subscribers ($180/year with monthly option available) unlock FormlyLogic conditional branching, form memory for progress saving, pre-fill inputs via URL parameters, multiple success messages, and additional Pro features including multiple redirects, quiz validation, CMS select inputs, and editable steps.

The app works with Webflow's native integrations and supports workflow automation that connects Webflow form submissions to third-party applications. When users submit Formly-enhanced Webflow forms, you can create automated workflows using integration platforms to process the submission data. For example, route form submissions from Webflow through Zapier to create contacts in your CRM, send team notifications, or update spreadsheets based on the data collected through your Formly multi-step form.

One Formly instance per page is supported. Multiple forms on the same page are not possible, though different pages on the same site can each have their own Formly form.

Script and attribute method

The script and attribute method embeds Formly's client-side JavaScript library in Webflow projects while applying form configuration through data attributes in Webflow's visual interface.

This approach enables multi-step forms, conditional logic (Pro), quiz validation (Pro), and form memory (Pro) without marketplace app dependencies. Setup involves adding a single script tag to project footer code and assigning attributes through element settings.

Navigate to your Webflow project settings, select Custom Code, and paste this script in the Footer Code section before </body>:

<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"></script>

Placing JavaScript before the closing body tag is recommended for optimal performance according to Webflow's custom code documentation.

Apply these attributes to form elements through Webflow's visual interface:

• Form element with data-form="multistep" to enable Formly functionality
• Step containers with data-form="step" to each section wrapper
• Next button with data-form="next-btn" for forward navigation
• Back button with data-form="back-btn" for backward navigation
• Submit button with data-form="submit-btn" on the final step
• Progress indicator with data-form="progress" to progress bar elements

Add attributes through the element settings panel in Webflow.

Conditional logic setup requires Pro plan features. Add data-logic-extra="true" to the form element, then use data-go-to="branch-name" on radio buttons and data-answer="branch-name" on step containers. This system enables branching patterns for different user paths based on form responses.

Quiz validation uses Pro plan features to score responses. Configure quiz functionality by following the quiz validation documentation, which covers correct answer marking and score calculation.

Pre-fill inputs from URL parameters using the prefill feature. You can automatically populate form fields with values passed via URL query parameters. This is useful for pre-populating fields in email campaign landing pages and reducing user friction during form entry.

This method requires proper form structure. Formly works with existing Webflow forms but doesn't replace them. Build your form using Webflow's native form builder first, then add Formly attributes to convert it into a multi-step experience.

Technical requirements:

• JavaScript must be enabled in the browser
• Formly script must load before form initialization (place in Project Settings > Custom Code section before </body> tag)
• Form must use Webflow's native form component (Formly is an enhancement layer that only works with native Webflow forms, not custom HTML)
• Submit button must remain inside the form element for proper functionality

Build with the Webflow API

Formly operates entirely client-side with no REST API. All server-side operations use the Webflow API for data management, webhook configuration, and CMS synchronization. This approach enables custom workflows like automated CMS item creation from form submissions, real-time webhook processing, and third-party system integration.

Use cases for Webflow API integration include syncing form submissions to CMS collections automatically via Webflow webhooks, building approval workflows that publish submissions after review through CMS API operations, creating custom dashboards that display submission data retrieved from Webflow, and connecting forms to external CRMs or marketing platforms through Zapier integrations. These server-side operations require API integration. The marketplace app and script method handle client-side form enhancement but cannot automate backend data workflows, CMS synchronization, or webhook processing.

Authenticate with Webflow APIs

Use OAuth 2.0 for user-specific access across multiple Webflow sites, while Site Tokens offer simpler authentication for single-site tools and internal integrations. OAuth provides user-specific access across multiple Webflow sites and is recommended for production environments, whereas Site Tokens are limited to specific site access. The Webflow authentication reference details both methods with security considerations.

OAuth flow starts by redirecting users to https://webflow.com/oauth/authorize with your client_id, redirect_uri, and requested scopes. After user approval, exchange the authorization code for an access token at POST https://api.webflow.com/oauth/access_token:

const response = await fetch('https://api.webflow.com/oauth/access_token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    client_id: 'your_client_id',
    client_secret: 'your_client_secret',
    code: 'authorization_code',
    redirect_uri: 'your_redirect_uri',
    grant_type: 'authorization_code'
  })
});

When integrating Formly forms with Webflow through the REST API for data operations, these Webflow OAuth scopes are required:

• sites:read for listing accessible sites
• cms:read for retrieving form submissions from CMS
• cms:write for creating or updating CMS items
• forms:read for accessing form submission data

Site Tokens provide faster setup for internal tools or single-site integrations. Generate tokens in site settings and include in request headers as Authorization: Bearer {token}. Site Tokens are designed for limited scope access compared to OAuth tokens according to Webflow's authentication documentation. For detailed security best practices and scope information, consult the Webflow authentication reference documentation.

Rate limits vary by Webflow plan according to rate limit documentation:

• Starter and Basic plans have 60 requests per minute
• CMS, Business, and eCommerce plans have 120 requests per minute
• Enterprise plans have custom limits (negotiable)
• All plans have maximum 1 site publish operation per minute

Track remaining requests using the X-RateLimit-Remaining and X-RateLimit-Limit response headers provided by Webflow's API. When you encounter a 429 (Too Many Requests) response, implement exponential backoff based on the Retry-After header value, typically 60 seconds.

Configure webhooks for real-time notifications

Webhooks enable real-time form submission processing without API polling. When users submit Formly-enhanced forms, Webflow sends POST requests to configured endpoints with submission data, enabling instant CRM updates, email notifications, or CMS item creation. This approach eliminates rate limit concerns from polling (60-120 requests/minute depending on plan) and reduces latency from minutes to milliseconds. Webhook configuration requires endpoint URL setup, payload parsing logic, and security validation.

Register webhooks through Webflow to receive instant notifications when users submit forms built with Formly. Webflow sends POST requests to your endpoint with submission data, enabling real-time processing without polling. The webhook creation endpoint accepts site ID, trigger type, and destination URL. Formly does not provide API endpoints. All webhook management is handled through Webflow's infrastructure.

Create a form submission webhook:

const webhook = await fetch(`https://api.webflow.com/v2/sites/${siteId}/webhooks`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    triggerType: 'form_submission',
    url: 'https://your-server.com/webhook-handler',
    filter: {
      name: 'form_name_optional'
    }
  })
});

Webhook payload structure from the form submission webhook reference:

{
  "triggerType": "form_submission",
  "payload": {
    "name": "Contact Form",
    "siteId": "65427cf400e02b306eaa049c",
    "data": {
      "First Name": "John",
      "Last Name": "Smith",
      "email": "[email protected]"
    },
    "submittedAt": "2025-01-15T14:30:22.117Z",
    "id": "6321ca84df3949bfc6752327",
    "formId": "65429eadebe8a9f3a30f62d0"
  }
}

When a user submits a Formly-enhanced form in Webflow, the webhook sends this POST request to your configured endpoint:

• triggerType identifies this as a form_submission event
• payload.name contains the human-readable form name
• payload.siteId contains the unique identifier for the Webflow site
• payload.data contains key-value pairs of user-submitted field data
• payload.submittedAt contains the ISO 8601 timestamp of submission
• payload.id contains the unique submission identifier for deduplication
• payload.formId contains the form element ID for routing to specific handlers

Process webhook data in your endpoint:

app.post('/webhook-handler', async (req, res) => {
  try {
    const { triggerType, payload } = req.body;

    if (triggerType !== 'form_submission') {
      return res.status(400).send('Invalid trigger type');
    }

    if (!payload || !payload.data || !payload.id) {
      return res.status(400).send('Invalid payload structure');
    }

    const { name, siteId, data, submittedAt, id, formId } = payload;
    const formData = data;

    // Create CMS item, update CRM, send notifications, etc.

    res.status(200).send('Webhook processed');
  } catch (error) {
    console.error('Webhook processing error:', error);
    res.status(500).send('Internal server error');
  }
});

Webflow webhooks lack cryptographic signature validation. Dashboard-created webhooks cannot verify request authenticity through signatures. Use alternative security measures like IP allowlisting or payload structure validation.

Use webhooks instead of polling to stay within Webflow's API rate limits (60-120 requests per minute depending on plan). Polling wastes API calls and introduces delay, while webhooks deliver data instantly as submissions occur.

Sync form submissions to Webflow CMS

Create CMS collection items automatically from form submissions using the CMS Items API. This enables self-updating member directories, automated testimonial collections, or dynamic product catalogs built from user submissions.

List collections to discover your target collection ID using the Webflow API endpoint GET https://api.webflow.com/v2/sites/{site_id}/collections. This endpoint returns all available collections within your Webflow site, including their IDs, which you'll need for subsequent CMS operations like listing items or creating new collection entries.

const collections = await fetch(`https://api.webflow.com/v2/sites/${siteId}/collections`, {
  headers: { 'Authorization': `Bearer ${accessToken}` }
});

Create a CMS item from form submission data using the create CMS item endpoint at POST https://api.webflow.com/v2/collections/{collection_id}/items:

async function createCMSItem(collectionId, formData) {
  try {
    const response = await fetch(
      `https://api.webflow.com/v2/collections/${collectionId}/items`,
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${process.env.WEBFLOW_API_TOKEN}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          isDraft: false,
          isArchived: false,
          fieldData: {
            name: formData['First Name'] + ' ' + formData['Last Name'],
            slug: formData['email'].split('@')[0],
            email: formData['email'],
            submittedDate: new Date().toISOString()
          }
        })
      }
    );

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(`Webflow API error: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`);
    }

    return response.json();
  } catch (error) {
    console.error('CMS item creation failed:', error);
    throw error;
  }
}

Update existing CMS items when users submit forms multiple times using the Webflow update items endpoint. This code demonstrates a Webflow CMS API update operation using the PATCH endpoint. Formly operates exclusively as a client-side JavaScript enhancement layer and does not interact with Webflow APIs directly.

Form submissions from Formly-enhanced forms flow through Webflow's native form system or webhook handlers to third-party services. If you need to programmatically update Webflow CMS items based on form submissions, use this pattern in your server-side webhook handler (Node.js, Python) that receives the form submission event, not within the client-side Formly implementation.

Publish items after review or approval using the publish endpoint. Form submissions can be created as draft CMS items according to Webflow's API documentation. Use the POST /collections/{collection_id}/items endpoint to create draft items (by setting "isDraft": true), then use the POST /collections/{collection_id}/items/publish endpoint to publish approved items to the live site. This enables a content approval workflow where submissions appear as drafts for staff review before publication.

Retrieve submissions stored as CMS collection items using the list items endpoint with pagination, filtering, and sorting parameters such as limit, offset, sort, and filters:

const collectionId = 'your_collection_id';
const accessToken = 'your_webflow_api_token';

try {
  const submissions = await fetch(
    `https://api.webflow.com/v2/collections/${collectionId}/items?limit=100&offset=0`,
    {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      }
    }
  );

  if (!submissions.ok) {
    throw new Error(`Failed to fetch submissions: ${submissions.status} ${submissions.statusText}`);
  }

  const data = await submissions.json();
} catch (error) {
  console.error('Error retrieving CMS items:', error);
}

Map form field names to Webflow CMS collection field slugs carefully using the webhook payload structure. Mismatched field names cause data syncing errors. Test webhook payload parsing and CMS field mapping logic thoroughly before production deployment.

Connect to automation platforms

Connect Formly-enhanced Webflow forms to automation platforms for no-code workflow creation. When users submit multi-step Formly forms in Webflow, you can trigger automated actions in thousands of third-party applications without writing custom code.

Zapier integrates with both Formly (via a trigger for new Formly responses) and Webflow (via a Form Submission trigger), allowing you to connect Formly-enhanced Webflow forms to 5,000+ apps.

Example workflow for Webflow form to HubSpot CRM:

1. User completes Formly multi-step form on your Webflow site
2. Webflow's native form handler processes the submission and stores the data
3. Zapier's Formly trigger detects the new form submission event from Webflow
4. Zapier extracts the submission data captured through Formly's multi-step interface
5. Zapier creates or updates a contact in HubSpot CRM with the Webflow form field data
6. HubSpot automatically assigns the lead to the appropriate sales representative based on territory rules

This workflow demonstrates the complete data flow. Formly enhances the user experience with multi-step progression, Webflow handles the actual form submission and data storage, and Zapier automates the transfer of that Webflow-stored data to HubSpot.

Example workflow for Webflow form to Salesforce with Slack notification:

1. Lead submits contact form on Webflow site enhanced with Formly's conditional logic
2. Webflow's form handler processes and stores the submission with all qualification data
3. Zapier's Formly + Salesforce integration captures the Webflow form submission event
4. Zapier creates Salesforce lead record using the data from Webflow's form submission
5. Zapier sends Slack notification to #sales channel with lead details extracted from Webflow
6. Sales team receives real-time alert about high-value prospect captured through Webflow

This demonstrates the integration architecture. Formly provides the enhanced UX with conditional logic on the Webflow form, Webflow's native system handles the actual data submission, and Zapier automates the downstream workflow from Webflow to Salesforce and Slack.

What you can build

Integrating Formly with Webflow enables multi-step forms, conditional workflows, and automated data processing for collecting and acting on user information.

• Lead qualification funnels: Build progressive profiling forms that reveal different questions based on answers, routing enterprise leads to sales teams while self-service users receive automated onboarding emails
• Interactive calculators and assessments: Create solar installation calculators, mortgage estimators, or health assessments that gather input through guided steps and display personalized results
• Automated CMS population systems: Route form submissions to Webflow CMS collections through webhooks and Zapier, building self-updating member directories, testimonial galleries, or product catalogs that publish after staff approval