123FormBuilder

How to integrate 123FormBuilder with Webflow

Webflow's native forms collect basic contact information but lack payment processing, conditional logic, multi-step workflows, and direct CRM connections. If you need to accept payments, route leads to Salesforce, or build HIPAA-compliant intake forms, integrate with a third-party form builder like 123 Form Builder.

You can integrate 123FormBuilder with Webflow through automation platforms like Zapier and Make.com, or build custom workflows with APIs.. Basic form embedding works with any 123 Form Builder account and a paid Webflow plan. Basic form embedding works with any 123 Form Builder account and a paid Webflow plan.

Connect forms to Webflow CMS with automation platforms

Form submissions in 123FormBuilder exist separately from your Webflow site by default, requiring manual data transfer to display submissions publicly. Zapier and Make.com solve this by automatically creating or updating Webflow CMS collection items when users submit forms, enabling you to display submission data on your live site without custom development. Make.com offers more extensive Webflow actions including asset management, inventory tracking, and order operations, making it ideal for complex workflows, while Zapier is recommended for straightforward create and update operations.

Make.com provides more Webflow CMS actions than Zapier. Beyond creating and updating items, Make.com handles asset management, inventory tracking, order processing, and automatic publishing. This makes it better suited for e-commerce implementations and complex workflows with multiple conditional branches. Zapier works well for straightforward create and update operations but lacks pre-built templates specifically for 123FormBuilder-Webflow integrations.

Zapier integration:

The Zapier 123 Form Builder integration provides two triggers: New Submission (fires when form submission received) and New Form (fires when form added to account). Connect these triggers to Webflow actions to create or update CMS collection items.

Three pre-built templates handle common scenarios:

• Create new Webflow items from new 123FormBuilder submissions
• Update Webflow live items when new 123FormBuilder forms are submitted
• Create live Webflow items from new 123FormBuilder forms

Lower-tier Zapier plans use polling intervals rather than real-time triggers, potentially creating delays between form submission and CMS updates. For real-time data synchronization, consider using 123FormBuilder native webhooks (available on Platinum+ plans) or Make.com integration instead.

Make integration:

Make.com's 123 Form Builder integration provides visual scenario building with dropdown menus and form fields. The platform supports operations beyond basic create/update actions, including asset management, order processing, and automatic publishing.

Watch for new form submissions as triggers, then route data to Webflow CMS collections, product updates, or order management actions. Make.com works well for workflows requiring inventory tracking, multi-step approval processes, or complex conditional routing.

Common workflow patterns:

• Lead directories — Populate a leads collection with form submissions and display them on your site
• Event attendee pages — Add registrants to event pages with auto-publishing
• Testimonial pipelines — Route customer feedback directly into testimonials sections
• Job application portals — Build searchable applicant databases
• Property listings — Auto-create real estate listings from submission forms

Build with Webflow and 123 Form Builder APIs

Use APIs when automation platforms can't meet your requirements. API-based integration is necessary for: real-time webhook validation with custom security logic (123 Form Builder webhooks lack HMAC signatures, requiring custom authentication), complex multi-step data transformations that involve business logic before CMS creation, rate limit optimization through custom queuing systems, and integration with internal systems that don't have Make.com or Zapier connectors. Build a custom middleware endpoint (a service that receives webhooks and transforms data before sending it to other systems) that receives webhooks from 123 Form Builder (sent as form-encoded POST data), applies your business logic, and creates items through the Webflow CMS API using authenticated requests with the required cms:write scope.

Use Make.com or Zapier instead of custom APIs for standard workflows like creating collection items from submissions, mapping form fields to CMS fields, or triggering actions in connected apps. These platforms handle authentication, rate limiting, and error handling automatically. Only build custom API integrations when you need security enhancements, custom data transformation logic, or connections to proprietary internal systems.

Set up webhook receivers for form submissions

123 Form Builder sends form data as application/x-www-form-urlencoded POST requests when users submit forms. This format sends data as key-value pairs in the request body rather than JSON format. Configure webhooks in the form's Publish section. Before activating, the platform sends an HTTP HEAD request to validate your endpoint — you must respond with a 200 status code or the webhook won't activate.

The platform fires webhooks exclusively for one event: complete form submissions. It does not trigger webhooks for partial saves, draft saves, or form edits. You can configure a maximum of 10 webhooks per form.

Critical limitation: 123 Form Builder webhooks lack cryptographic signature verification (no HMAC signatures or API keys in headers). Implement application-layer security like obscure webhook URLs, custom tokens embedded in webhook endpoints, or custom authentication headers to compensate for the absence of native webhook signature verification.

Basic plan accounts limit form submissions to 100 per month. Paid plans remove this constraint. Review the webhook documentation for configuration details and the webhook sample script for payload structure examples.

Create Webflow CMS items from form data

The Webflow CMS API doesn't provide a forms endpoint — you must create collection items instead. Authenticate with Bearer tokens requiring cms:read and cms:write scopes, then POST to the collections endpoint.

Primary endpoint:

POST https://api.webflow.com/v2/collections/{collection_id}/items


Request format:

{
 "fieldData": {
   "name": "Form Submission Name",
   "slug": "form-submission-slug",
   "email": "user@example.com",
   "phone": "+1234567890"
 }
}


Before creating items, discover your collections with GET /sites/{site_id}/collections and retrieve field schemas with GET /collections/{collection_id}. Map form field names to collection field names, ensuring data types match between systems.

Implement exponential backoff (waiting progressively longer between retry attempts) for production reliability when handling API rate limits. According to Webflow's rate limiting documentation, rate limits vary by subscription plan and are enforced with HTTP 429 responses that include a Retry-After header.

Poll for submissions through the 123 Form Builder API

When webhooks don't fit your architecture, poll for new submissions using the 123 Form Builder API v2. The API provides endpoints for listing forms and retrieving submissions with token-based authentication.

Key endpoints:

• GET /v2/forms — List all forms in your account
• GET /v2/forms/{formId}/submissions — Retrieve all submissions for a form
• GET /v2/forms/{formId}/submissions/{submissionId} — Get individual submission details

Use the US base URL https://api.123formbuilder.com/v2/ for standard accounts or https://eu-api.123formbuilder.com/v2/ for EU-based accounts. All API requests require token-based authentication. Review API v2 authentication for complete token management procedures including obtaining, refreshing, and invalidating tokens.

Rate limit constraints: 123 Form Builder's API limits Basic plans to 100 API calls per day. Paid plans provide unlimited API calls under fair usage policies. For high-traffic forms or real-time synchronization scenarios, plan API polling frequency accordingly to avoid hitting daily limits on the Basic plan.

What you can build

Integrating 123 Form Builder with Webflow enables payment collection, application processing, and automated data workflows beyond Webflow's native form capabilities.

• Healthcare patient portals — Build HIPAA-compliant intake forms for medical practices with appointment scheduling, insurance information collection, and secure file uploads. Forms can be integrated with practice management systems like Salesforce or synced to Google Sheets for data management
• Event registration sites — Create multi-step registration forms with conditional pricing, payment processing through Stripe or PayPal (requires Platinum plan or higher), and sync attendee data to Webflow CMS collections using automation platforms like Make.com or Zapier to display attendee lists on event pages
• Nonprofit donation platforms — Accept recurring and one-time donations through embedded payment forms with native MailChimp integration for email list synchronization and Make.com or Zapier automation for syncing donor data to Webflow CMS collections for public recognition walls or donor directories
• Real estate applications — Use 123 Form Builder to create application forms for tenant screening, property inquiries, and rental management that integrate with Webflow sites through JavaScript embedding or Make.com automation for CMS data synchronization