Elfsight Contact Form

How to integrate Elfsight Contact Form with Webflow

Adding Elfsight Contact Form to your Webflow site lets you collect leads, manage customer inquiries, and automate data capture. The integration supports everything from simple contact forms to multi-step surveys with conditional logic.

The easiest way to integrate the Elfsight Contact Form widget with Webflow is using Webflow custom Code Embed element or by adding custom code to your site's head or footer sections. If you need more custom solutions, consider building with Elfsight's and Webflow's APIs.

Use Webflow's Code Embed element

Create professional contact forms using Elfsight's visual builder and embed them on your Webflow site with a simple code snippet. This method requires no coding knowledge and takes just minutes to set up.

Key capabilities:

• Drag-and-drop form builder with 20+ field types including text, email, dropdowns, checkboxes, and rating scales
• Instant email notifications when visitors submit forms
• Popup and inline display options with customizable triggers
• Built-in spam protection with CAPTCHA support
• Third-party integrations with Google Sheets, Mailchimp, and Zapier

Start by selecting a template in the Elfsight editor, customize your fields and design, then copy the generated embed code. In Webflow, add an Embed element to your page and paste the code. Your form displays immediately after publishing.

Add custom code to your project

Add Elfsight forms site-wide or on specific pages using Webflow's custom code settings. This method suits scenarios where you want forms to appear conditionally or across multiple pages.

Follow the steps below to set up your widget across your whole site:

• Navigate to Site Settings > Custom Code
• Paste the widget code in the Head Code or Footer Code section
• Configure display rules in Elfsight to control where forms appear

If you only want the form to appear on certain pages, do the following:

• Open page settings for your target page
• Add the widget code to the Inside  tag section
• Set form triggers like scroll percentage or time delays in Elfsight

Custom code injection provides more flexibility for advanced implementations while maintaining the no-code setup process through Elfsight's interface.

Build with Webflow and Elfsight APIs

While Elfsight primarily operates as a widget service, advanced users can extend functionality by combining Elfsight forms with Webflow's API. This approach enables custom workflows like syncing form submissions to Webflow CMS Collections or triggering automated actions.

Core capabilities:

• Store submissions in Webflow CMS using the Collections API
• Automate with webhooks through Zapier or Make
• Custom data processing via serverless functions
• Advanced field mapping between Elfsight and Webflow

Note that Elfsight doesn't provide direct API endpoints for form submissions. Instead, use automation platforms like Zapier to capture Elfsight data and push it to Webflow's API. This requires technical knowledge but enables powerful integrations beyond standard widget functionality.

Automation platform integration

Connect Elfsight forms to Webflow CMS using Zapier or Make. These platforms act as middleware, capturing form submissions and creating CMS items automatically.

Setup process:

• Configure Elfsight integrations in your form settings
• Create automation workflows in Zapier or Make
• Map form fields to Webflow CMS Collection fields
• Test data flow with sample submissions

Common automations include creating CMS items for each submission, updating existing records, or triggering multi-step workflows based on form responses. While this method requires more setup than direct embedding, it provides extensive customization options for data handling.

What you can build

Integrating Elfsight Contact Form with Webflow enables powerful lead capture and customer communication systems.

• Professional service intake forms: Build multi-step consultation request forms for law firms or agencies that qualify leads before scheduling, complete with conditional logic and automated follow-ups
• E-commerce support centers: Create product inquiry forms with dropdown menus for order numbers and issue types, automatically routing submissions to relevant support teams
• Event registration systems: Design RSVP forms with custom fields for dietary preferences and session selections, syncing attendee data to Google Sheets for easy event management
• Real estate inquiry portals: Deploy property viewing request forms with dynamic fields that change based on buyer or seller selection, capturing detailed requirements for better lead qualification