How to Embed a Form on Webflow, Framer, or WordPress

A form lives in two places: the AI chat where you build it, and the website where people fill it. The second place is where the conversions happen and where most of the friction shows up.

The embed step is where forms quietly break. The iframe is too short and cuts off the bottom of the form. The WordPress install fights with the cache layer. The form looks fine on desktop and breaks on mobile.

This post covers the simplest reliable embed method, step-by-step instructions for Webflow, Framer, and WordPress, the mobile checklist, and how to track conversions in GA4 or Plausible.

First: every Brieform form has a public URL

When your AI publishes a form, Brieform returns a live public URL in the form https://brieform.app/f/your-form-slug. That single URL is the foundation of every embed below. You can also link to it directly in an email, a Slack message, or a button — embedding is optional.

The reliable embed method: iframe

The most universal way to put a hosted form on your site is an iframe. The form renders in an isolated frame, so there are zero CSS conflicts with your site, and it works on any platform — Webflow, Framer, WordPress, or hand-written HTML.

<iframe src="https://brieform.app/f/your-form-slug" width="100%" height="800" frameborder="0"></iframe>

Two things to keep in mind with iframes: set width="100%" so it's responsive, and give it a generous fixed height so the submit button is never cut off (multi-step forms are shorter per step, so size for the tallest step). If you'd rather not embed at all, link straight to the /f/your-form-slug URL from a button — it opens Brieform's clean, multi-step interface with a progress bar.

Webflow embed step-by-step

Step 1: get the form URL from Brieform

Publish the form in your AI chat (or copy its public URL from the dashboard). Build the iframe snippet above with your form's slug.

Step 2: open the Webflow page

In the Webflow designer, drag an "Embed" element onto the page where you want the form.

Step 3: paste the iframe code

Open the embed element settings, paste the snippet, then "save & close."

Step 4: publish

Publish the Webflow site and test the height on desktop and mobile to make sure nothing is cut off.

Framer embed step-by-step

Step 1: build the iframe snippet

Same snippet, with your form's slug.

Step 2: open the Framer canvas

Drag an "Embed" component onto the page.

Step 3: paste the iframe code

Paste the snippet into the component's HTML field.

Step 4: configure the size

Set width to 100% and height to a sensible default (800px works for most forms; size for the tallest step on multi-step forms).

Step 5: publish

Publish the Framer site and test on a real device, not just the Framer preview.

WordPress embed (no plugin)

WordPress is where most embed problems happen, usually because of the cache layer or a theme that strips iframes.

Step 1: build the iframe snippet

Same as above.

Step 2: open the page or post

In the block editor (Gutenberg), add a "Custom HTML" block. In the classic editor, switch to the "Text" tab.

Step 3: paste the iframe

Drop the snippet in the HTML block and save.

Step 4: clear the cache

If your site uses WP Rocket, W3 Total Cache, or a CDN, clear the cache after saving. Most WordPress embed problems are cache problems.

Step 5: test in a clean browser

Load the page in an incognito window to bypass local cache. Check that the form renders, accepts input, and submits successfully.

Mobile responsiveness checklist

Forms that look fine on desktop and break on mobile are the most common embed failure. Check these before declaring the form live.

• Width: iframe set to width="100%", not a fixed pixel value.
• Height: tall enough that the submit button is visible on mobile (size for the tallest step on multi-step forms).
• Tap targets: fields and the submit button are comfortably tappable (Brieform handles this by default).
• Keyboard handling: focusing a field shouldn't hide it behind the mobile keyboard (Brieform handles this).
• Test on real devices: iOS Safari and Android Chrome at minimum — DevTools mobile mode isn't enough.

Tracking conversions in GA4 or Plausible

A form embedded in an iframe lives on a different domain, so it can't directly fire events into your site's analytics. The clean, reliable way to track a submission is a redirect.

Redirect to a thank-you page on your domain. Brieform's submission options include a redirectUrl — set it so that after a respondent submits, they land on a thank-you page you host (for example yoursite.com/thanks). That page fires the conversion event natively, the same way any page on your site would:

<!-- on yoursite.com/thanks -->
<script>
  gtag('event', 'form_submission', { form_name: 'contact' });
  // or, for Plausible:
  // plausible('Form Submission', { props: { form: 'contact' } });
</script>

This needs no cross-domain messaging and works on every platform. If you'd rather not build a thank-you page, you can instead set a custom success message (successMessage) that confirms the submission inline — but for conversion tracking, the redirect-to-thank-you-page approach is the most dependable.

You can also reconcile conversions after the fact: ask your AI client to pull the form's responses via Brieform's get_responses tool and compare the count against your analytics for a given period.

🚀 Try it now — Build a form to embed in your AI chat with Brieform →

Free to start. No credit card required.

FAQ

Does Brieform have a WordPress plugin?

Not at the time of writing — and you don't need one. The iframe embed (or a direct link to the form's /f/your-form-slug URL) works on every WordPress install in the large majority of cases. A plugin is only relevant if your theme actively strips iframe tags.

How do I track a submission as a conversion?

Set the form's redirectUrl to a thank-you page on your own domain and fire the GA4/Plausible event there. It's the most reliable approach across platforms.

Will it slow my site?

No meaningful impact. The iframe loads after your page content, so it doesn't block your initial render.

Can I customize how the embedded form looks?

Yes — in Brieform you can apply any of 8 theme presets (or a custom color and font) before publishing. The iframe is sandboxed, so you style the form in Brieform rather than from your parent site's CSS."