Form Widget

Add a floating form to any website with a single code snippet. Works on all plans, mobile-friendly, and fully customisable.

Overview

The form widget lets visitors open your form without leaving the page. It loads your form in an embedded overlay, so the form inherits whatever design you set up in the Form Designer — fields, theme, captcha, consent, and all.

Choose from three styles:

All three are available on every plan, including Personal (free). On the Personal plan, the form page inside the widget shows a small "Powered by FormBlade" link. Upgrade to Pro or Business to remove it.

How to add the widget

1. Open your form in the dashboard and go to the Integration tab
2. Select Widget (the first option)
3. Pick a style: Popup Modal, Slide-in Panel, or Corner Tab
4. Copy the generated <script> tag
5. Paste it into your website, just before the closing </body> tag

That's it. The widget appears on every page that includes the script.

Widget styles

Popup Modal

A floating button in the bottom-right corner. Clicking it opens a centered modal with a semi-transparent backdrop. The modal is responsive: on mobile it takes the full screen width with padding, on desktop it caps at 540px.

Visitors close it by clicking the X button or clicking outside the modal.

Slide-in Panel

Same floating button, but the form slides in from the right edge of the screen as a side panel. On mobile (screens under 420px) it takes the full width. The panel has a header bar with a title and close button.

Good for longer forms because the full-height panel gives more vertical space than a centered modal.

Corner Tab

A rotated tab fixed to the right edge of the screen (vertically centred). Clicking it opens a compact card (400px wide, 520px tall) anchored to the bottom-right corner. On mobile, the card stretches to fill the available width.

Ideal for always-visible feedback buttons that do not obstruct content.

Quick embed

The simplest way to add the widget — one script tag with data attributes:

<script src="https://formblade.com/widget.js?v=5d80b6dd"
  data-form="your-endpoint-id"
  data-label="Contact us"
  data-color="#6366f1"></script>

Place it before </body>. The widget button appears in the bottom-right corner.

Configuration

All options are set via data-* attributes on the script tag:

Open triggers

By default the widget opens when the visitor clicks the button. You can change this to open automatically:

Time delay

Open the form after a delay (e.g., 5 seconds after page load):

<script src="https://formblade.com/widget.js?v=5d80b6dd"
  data-form="contact"
  data-open="time"
  data-open-value="5000"></script>

Scroll percentage

Open when the visitor scrolls past a certain point (e.g., 50% of the page):

<script src="https://formblade.com/widget.js?v=5d80b6dd"
  data-form="contact"
  data-open="scroll"
  data-open-value="50"></script>

Exit intent

Open when the visitor moves the mouse toward the browser chrome (about to leave). Desktop only — not triggered on mobile.

<script src="https://formblade.com/widget.js?v=5d80b6dd"
  data-form="contact"
  data-open="exit"></script>

With all triggers, the visitor can always close the form and click the button to reopen it. Combine with data-show-once="true" to only show the auto-open once per visitor.

Animated emoji

Add an animated emoji to the button to draw attention:

<script src="https://formblade.com/widget.js?v=5d80b6dd"
  data-form="contact"
  data-emoji="👋"
  data-emoji-animation="wave"
  data-label="Say hello"></script>

Available animations:

The emoji appears before the label text. Works with any emoji character.

Notification dot

A pulsing red dot on the button to draw attention. Disappears after the visitor opens the form for the first time (remembered via localStorage).

<script src="https://formblade.com/widget.js?v=5d80b6dd"
  data-form="feedback"
  data-label="Feedback"
  data-dot="true"></script>

Show once / hide after submit

data-show-once="true" — after the visitor closes the widget, it does not appear again on future page loads. Useful for announcements or one-time surveys.

data-hide-after-submit="true" — after a successful submission, the widget disappears permanently for that visitor. Good for newsletter signups or feedback forms where you only want one response.

Both use localStorage, so clearing browser data resets them.

Mobile behaviour

All widget styles are mobile-friendly out of the box:

• Popup Modal — the modal uses width:100% with padding, so it fills the screen on small devices. The iframe height uses vh units to fit the viewport.
• Slide-in Panel — the panel has max-width:420px with width:100%, so on phones it becomes a full-width sheet. The iframe fills the remaining height.
• Corner Tab — the card uses width:calc(100% - 32px) with max-width:400px, so it adapts to any screen size.

The floating button itself uses fixed positioning with bottom:24px;right:24px, which works well on all devices. On very small screens, you may want to reduce the padding to 10px 16px.

Form design & view counts

The widget loads your form page (/f/your-id) inside an iframe. This means:

• The form uses the same design you configured in the Form Designer — fields, theme, colours, captcha, consent checkboxes, and file uploads all carry over.
• Each time a visitor clicks the button and the form loads, it counts as a form view in your dashboard analytics.
• Submissions made through the widget are identical to any other submission — they appear in your inbox, trigger email notifications, trigger integrations, and count toward your monthly limit.

Platform notes

• WordPress — paste the script in a Custom HTML block, or add it to your theme's footer via Appearance → Theme Editor (before </body>).
• Wix — go to Settings → Custom Code → Add Custom Code. Paste the script, set placement to "Body - end".
• Squarespace — go to Settings → Advanced → Code Injection → Footer. Paste the script.
• Webflow — go to Project Settings → Custom Code → Footer Code. Paste the script.
• Shopify — go to Online Store → Themes → Edit Code → theme.liquid. Paste the script before </body>.
• Static sites — paste directly in your HTML before the closing </body> tag.

Troubleshooting

The widget does not appear

• Check that the script is placed before </body>, not inside <head>.
• Open the browser console (F12) and look for errors.
• If your site uses a Content Security Policy (CSP), make sure formblade.com is allowed in frame-src.

The form looks different from the designer preview

Make sure you saved your form design. The widget loads the live form endpoint, so unsaved changes will not appear.

The form does not submit

Check that the form is active (toggle in the dashboard). Deactivated forms return a 410 error.

What's next?

• Form Designer — customise fields, themes, and layout
• Platform Guides — step-by-step setup for WordPress, Wix, and more
• Captcha — add spam protection to your widget form
• Privacy & Compliance — consent checkboxes and data retention