How to Embed a FlexForm Form on Your WordPress Website

Embedding a FlexForm form on your WordPress website takes two things: one script tag in your theme header and one HTML block on the page where the form should appear. There is no FlexForm WordPress plugin to install, no shortcode to register, and no jQuery dependency to worry about. This guide walks through every supported method — the Block editor, the WordPress Customizer, Elementor and Divi, and direct theme edits — so you can pick the one that fits your setup.

The FlexForm web embed is a vanilla JavaScript script under 5KB. It loads asynchronously and renders forms in four modes: inline (in place on the page), popup (modal on button click), slider (panel that slides in from the side), and fullscreen (full-viewport overlay). The same script handles all four — you switch modes with a single data-flexform-type attribute on the embed div.

Why embed instead of using a WordPress form plugin

WordPress has several capable form plugins — WPForms, Gravity Forms, Ninja Forms, Fluent Forms. They work, and for sites that only need a contact form sending email to one inbox, they are a reasonable fit. The trade-offs surface when you need more.

First, performance. Most WordPress form plugins load jQuery, their own runtime, and CSS on every page of your site — even pages without a form. The FlexForm embed loads only on pages that contain the embed div, and the script itself is under 5KB. On a Lighthouse audit, this is usually the difference between a form plugin adding 200–500ms of Total Blocking Time vs FlexForm adding 20–40ms.

Second, the form lives outside WordPress. If you ever migrate WordPress sites, change themes, or move to a static site generator, the form, its submissions, its CRM integrations, and its conditional logic move with you — they are FlexForm-side data, not stuck in your WP database. Same form embedded on a marketing site, a SaaS app, and a partner portal stays in sync.

Step-by-step: add the embed script to WordPress

You only need to add the script tag once. There are four common ways to do it — pick the one that matches how you usually edit your site.

1. 1

   Method A — Theme header.php (most reliable)

   Go to Appearance → Theme File Editor → header.php. Paste the FlexForm script tag right before the closing </head> tag. Save. The script is now loaded on every page of your site. Note: if your theme gets updated, this edit can be overwritten — use a child theme or the Customizer method to protect the change.

2. 2

   Method B — WordPress Customizer (no theme edit)

   Many themes expose an Additional CSS/JS field via Appearance → Customize. Paste the script tag there. This survives theme updates. If your theme doesn't expose this field, install a small plugin like 'Insert Headers and Footers' or 'Code Snippets' — both are well-maintained and add a one-time global injection point.

3. 3

   Method C — Elementor or Divi theme builder

   If you use Elementor Pro or Divi, both have a Theme Builder → Header section. Add a Custom HTML widget at the top of the global header and paste the script tag. This applies the embed script to every page rendered through the page builder's templates — including landing pages, archives, and single posts.

4. 4

   Method D — WPCode or Code Snippets plugin

   For WordPress users who never touch theme files, install WPCode or Code Snippets and add a new snippet of type "HTML" with location "Site Wide Header". Paste the script tag. This is the safest method — the snippet is portable, version-controlled, and easy to toggle without breaking your site.

The script tag itself is the same regardless of method:

<script src="https://flexform.ai/embed/v1"></script>

Step-by-step: place the form on a page

With the script loaded, every page on your WordPress site can render a FlexForm form by including a div with the right attributes. The form ID comes from your FlexForm dashboard (it's the value after /f/ in the form's public URL).

Block editor (Gutenberg): Add a "Custom HTML" block (under Widgets in the block inserter) where you want the form. Paste the embed div.

Classic editor: Switch to the Text/HTML tab. Paste the embed div at the desired position.

Elementor / Divi / Beaver Builder: Drag in an HTML widget and paste the embed div.

The four embed modes

FlexForm supports four embed modes through the data-flexform-type attribute. Each one is a single HTML block — no JavaScript needed.

Inline (default)

Renders the form in place. Flows with your page layout. Best for dedicated form pages — Contact, Request a Quote, Apply Now.

<div data-flexform-id="your-form-id"></div>

Popup (modal on click)

Renders a button at the embed location; clicking opens a centered modal. Best for landing-page CTAs.

<div
  data-flexform-id="your-form-id"
  data-flexform-type="popup"
  data-flexform-size="medium"
  data-flexform-button-text="Request a Demo"
  data-flexform-button-color="#6366f1"
></div>

Slider (side panel)

Slides in from the right (or left). Non-blocking — visitors keep page context. Best for support intake and feedback.

<div
  data-flexform-id="your-form-id"
  data-flexform-type="slider"
  data-flexform-slider-position="right"
></div>

Fullscreen (overlay)

Opens a full-viewport overlay. Best for multi-step intake flows where focus matters.

<div
  data-flexform-id="your-form-id"
  data-flexform-type="fullscreen"
  data-flexform-button-text="Get Started"
></div>

Pre-filling form fields from WordPress

FlexForm reads URL query parameters and pre-fills any matching form field. This is useful when a WordPress visitor is already logged in or arriving via a campaign link.

If the form has a field with ID email, link to the page with ?email=user@example.com and the field arrives populated. The same pattern works for campaign tracking — ?utm_source=wp_homepage can flow into a hidden field that lands in your CRM.

Verifying the embed works

After saving the page, open it in an incognito window and confirm:

1. Inline embed renders: the form should appear inside the div within a second. If you see an empty space, check the browser console — the most common error is a typo in the form ID or the script tag failing to load.
2. Popup button shows: for popup mode, you should see the styled button. Click it — the modal should open. If clicking does nothing, the script likely loaded after the embed div tried to initialize. Move the script to <head> instead of footer.
3. Submission lands: submit a test entry. Check your FlexForm dashboard — the submission should appear immediately. If you've connected a CRM, confirm the record was created downstream.

Theming the form to match your WordPress site

The form's appearance — colors, fonts, button styles — is controlled in the FlexForm dashboard, not in WordPress. Set your brand colors, upload your logo, and pick a font in the form's Theme panel. The embed reflects those settings on every site that loads it.

For inline embeds, the form respects the width of the containing div. If your WordPress theme has a content container that's 800px wide, the form fills that space. To constrain it further, wrap the embed div in a sized div (<div style="max-width: 600px; margin: 0 auto;"><div data-flexform-id="..."></div></div>) — the form respects the parent.

Frequently asked questions