Embedding Forms

FluidForms makes it easy to embed your forms directly on your website, giving you full control over how forms appear and interact with your visitors.

Getting Started

To embed a form:

1. Open your form in the editor
2. Click Publish in the top right corner
3. Navigate to the Embed tab
4. Choose your preferred layout
5. Copy the embed code
6. Paste it into your website's HTML

Embed Layouts

FluidForms offers four distinct embed layouts to match different use cases:

Standard (Inline)

Embeds the form directly into your page content, just like any other element.

Best for:

• Landing pages
• Dedicated form pages
• Blog posts with embedded forms
• Contact pages

Features:

• Form appears inline with page content
• Scrolls naturally with the page
• Takes up the full width of its container
• No overlay or popup behavior

Popup (Modal)

Displays a button that opens the form in a modal overlay when clicked.

Best for:

• Lead capture without disrupting page flow
• Newsletter signups
• Gated content downloads
• Non-intrusive data collection

Features:

• Customizable button text and color
• Form appears in centered modal
• Darkened background overlay
• User can close the modal to return to page
• Optional auto-open on page load

Configuration:

• Button Color: Customize the trigger button's color to match your brand
• Auto-open: Automatically show the form when visitors land on the page
• Auto-open Delay: Wait a specified time (in milliseconds) before auto-opening

Floating (Chat Widget)

Adds a floating chat bubble in the bottom-right corner of your page.

Best for:

• Support and help forms
• Feedback collection
• "Contact Us" availability without dedicated page
• Always-accessible forms across your site

Features:

• Persistent floating button in bottom-right corner
• Opens form in a chat-style panel
• Doesn't interfere with page content
• Optional tooltip text to encourage engagement
• Customizable bubble color

Configuration:

• Bubble Color: Match your brand or make it stand out
• Tooltip Text: Add hover text like "Need help? Chat with us!"
• Auto-open: Automatically open the widget on page load
• Auto-open Delay: Control timing of automatic opening

Full Page

Opens the form in a completely new full-screen view.

Best for:

• Complex multi-step forms
• Application processes
• Surveys requiring full attention
• Forms that need maximum screen space

Features:

• Displays a button that navigates to full-screen form
• No distractions from page content
• Optimized for complex or lengthy forms
• Clean, focused user experience

Configuration:

• Button Color: Customize the trigger button to match your site

Embedding Code

Once you've configured your layout, FluidForms generates the embed code automatically. The code includes configuration attributes for your chosen layout and options. You can always click on Preview to see how your embedding settings look on a sample page before adding them to your own website.

Advanced Configuration

Styling Integration

The embedded form automatically inherits some styling from your website for a seamless integration. You can further customize appearance using CSS:

/* Target the form container */
[data-ff-form] {
  max-width: 600px;
  margin: 0 auto;
}

/* Style the trigger button */
[data-ff-trigger] {
  font-family: inherit;
  border-radius: 8px;
}

Multiple Forms

You can embed multiple forms on the same page. You only need to include the embed script once, but each form needs its own embed code with unique configuration:

<!-- Contact Form (Inline) -->
<a data-fluidforms-id="contact-form-id" data-layout="inline"></a>

<!-- Newsletter Signup (Popup) -->
<a data-fluidforms-id="newsletter-form-id" data-layout="modal"></a>

<!-- Load the FluidForms embed script once -->
<script src="https://app.fluidforms.ai/embed.js"></script>

Preview Before Publishing

Before embedding on your live website, you can preview how the form will look:

1. In the Publish modal's Embed tab, click Preview
2. A new window opens showing the form with your chosen layout
3. Test the user experience and interactions
4. Return to adjust settings if needed

Best Practices

Choosing the Right Layout

• Standard: When the form is the primary content or purpose of the page
• Popup: When you want lead capture without disrupting the user's current activity
• Floating: When you want forms accessible across multiple pages
• Full Page: When the form requires focus and has multiple steps

Performance

• Embed scripts load asynchronously and won't block page rendering
• Forms are cached for faster subsequent loads
• File uploads are optimized for performance

User Experience

• Don't overuse auto-open: Only use for critical forms to avoid annoying visitors
• Use appropriate delays: Give users time to engage with page content first (2-5 seconds minimum)
• Match your brand: Customize colors to maintain visual consistency
• Test on mobile: All layouts are responsive, but verify on actual devices

Accessibility

FluidForms embeds are built with accessibility in mind:

• Keyboard navigation support
• Screen reader compatible
• ARIA labels and roles
• Focus management for modals

Troubleshooting

Form not appearing?

• Verify the form is published
• Check that the embed code is correctly placed in your HTML
• Ensure JavaScript is enabled on your site
• Check browser console for errors

Styling conflicts?

• Your site's CSS might be interfering; use more specific selectors
• Check for CSS frameworks that might override form styles
• Use browser dev tools to inspect conflicting styles

Multiple forms interfering?

• Ensure each form has a unique data-fluidforms-id
• Don't place multiple forms with the same ID on one page

Next Steps

• Publishing Forms - Learn about form publishing and management
• AI Features - Understand how AI enhances embedded forms
• Integrations - Connect your embedded forms to other tools