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 Webflow with a third-party form builder like 123FormBuilder.

The easiest way to set up your 123FormBuilder Webflow integration is by using Webflow’s custom Code Embed elements. You can also use automation platforms like Zapier or Make to automatically create Webflow CMS items from 123FormBuilder.

If you need even more customization and have the technical skills, you can build custom workflows using the 123FormBuilder API and Webflow Data API v2.

Use custom Code Embed elements in Webflow

123FormBuilder uses JavaScript-based embedding that automatically adjusts height based on content without manual dimension configuration. This solves the common issue with Webflow's standard Custom Code Embed element, which requires manual height configuration and often creates unwanted scrollbars or excessive whitespace.

You need a paid Webflow plan to access the Embed widget required for integration. Forms display only on published sites, not in Designer preview mode. The setup takes about five minutes and requires no coding knowledge.

Implementation steps:

1. Open your form in 123FormBuilder and navigate to the Publish section
2. Copy the JavaScript embed code provided
3. In Webflow Designer, drag an Embed widget from Add → Widgets to your target location
4. Paste the JavaScript code into the Embed widget
5. Click Save & Close, save your Webflow changes, and publish your Webflow site

Note: Forms will only display on your published site, not in the Webflow preview mode.

Embed method options

• JavaScript embed (recommended): Automatically adjusts form height based on content without manual configuration, eliminating scrollbars and excessive whitespace. Best for inline forms that need to feel native to your page design.
• iFrame embed: Standard iframe integration requiring manual height configuration. Use when you need strict content isolation or have specific security requirements for embedded content.
• Lightbox popup: Opens forms in modal overlays triggered by button clicks. Ideal for subscription forms, lead capture, or registration flows that shouldn't interrupt page browsing.
• Floating button: Adds a persistent button that follows users as they scroll, opening forms on click. Works well for contact forms or support requests that should be accessible from any page location.
• Auto-popup: Displays forms automatically based on time delays, scroll depth, or exit intent. Best for promotional offers, newsletter signups, or time-sensitive announcements.

Capabilities:

• Responsive height adjustment automatically fits form content without scrollbars
• Template library with 3,000+ pre-built forms for payments, registrations, and applications
• Payment processing through 15+ gateways, including Stripe, PayPal, and Square (Platinum plan or higher)
• Conditional logic with field rules, form rules, and email rules for dynamic behavior
• File uploads for document collection (any paid plan starting at Gold, $24.99/month)

Connect forms to Webflow CMS with automation platforms

Form submissions in 123FormBuilder exist separately from your Webflow site by default. Use Zapier or Make to automatically create or update Webflow CMS collection items when users submit forms.

If you need actions like creating and updating items, handling asset management, inventory tracking, order processing, and automatic publishing, use Make. Zapier works well for straightforward create and update operations.

Zapier integration

The Zapier 123FormBuilder 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

Note: 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.com integration

Make.com's 123FormBuilder 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 works well for workflows requiring inventory tracking, multi-step approval processes, or complex conditional routing.

Some common workflow patterns include:

• Lead directories that populate a leads collection with form submissions
• Event attendee pages that add registrants with auto-publishing
• Testimonial pipelines that route customer feedback into testimonials sections
• Job application portals with searchable applicant databases
• Property listings that auto-create real estate listings from submission forms

Build with Webflow and 123FormBuilder APIs

Use APIs when automation platforms can't meet your requirements — for example, real-time webhook validation with custom security logic, complex multi-step data transformations, rate limit optimization through custom queuing systems, or integration with internal systems that don't have Make or Zapier connectors.

Important: Use Make or Zapier instead of custom APIs for standard workflows like creating collection items from submissions or mapping form fields to CMS fields. These platforms handle authentication, rate limiting, and error handling automatically.

Set up webhook receivers for form submissions

123FormBuilder sends form data as application/x-www-form-urlencoded POST requests when users submit forms. 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. You can configure a maximum of 10 webhooks per form.

Critical limitation: 123FormBuilder webhooks lack cryptographic signature verification (no HMAC signatures or API keys in headers). For sensitive data (healthcare, financial), consult with a development team to implement proper security validation through middleware services like Firebase Cloud Functions, Vercel, or AWS Lambda.

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:

Request format:

json

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

Implement exponential backoff 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 123FormBuilder API

When webhooks don't fit your architecture, poll for new submissions using the 123FormBuilder 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.

• Rate limit constraints: 123FormBuilder's API limits Basic plans to 100 API calls per day. Paid plans provide unlimited API calls under fair usage policies.
• Note for high-volume implementations: If expecting 1,000+ submissions per day, test thoroughly in staging before going live. Webflow's rate limits (60-120 requests per minute depending on plan) combined with 123FormBuilder's API limits could create bottlenecks.

What you can build

Connect 123FormBuilder with Webflow to enable payment collection, application processing, and automated data workflows beyond 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 integrate with practice management systems or sync to Google Sheets for data management.
• Event registration sites: Create multi-step registration forms with conditional pricing and payment processing through Stripe or PayPal (requires Platinum plan or higher). Sync attendee data to Webflow CMS collections using automation platforms 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. Use Make or Zapier automation to sync donor data to Webflow CMS collections for public recognition walls or donor directories.
• Real estate applications: Create application forms for tenant screening, property inquiries, and rental management that integrate with Webflow sites through JavaScript embedding or Make automation for CMS data synchronization.