How to Embed a Form on WordPress, Webflow, Squarespace and Next.js

Short answer: use the embed snippet by default, switch to an iframe when your theme's CSS fights it, and use a direct hosted link when you cannot or do not want to touch the site. All three work on every platform below; the differences are in where you paste them.

Embedding a form is meant to take two minutes and frequently takes an afternoon. The reasons are consistent across platforms, and knowing them in advance removes most of the afternoon.

The three methods

Embed snippet. A small script that renders the form inside your page. It inherits your site's fonts and feels native. It is also exposed to your theme's CSS, which is where nearly all embed problems originate.

Iframe. The form loads in an isolated document. Your CSS cannot reach it and its CSS cannot reach you. Rendering is guaranteed consistent, at the cost of looking slightly pasted-in and needing manual height management.

Direct link. Send visitors to a hosted form page. No site changes at all. Underrated — for a form promoted by email, SMS or a QR code on a vehicle, a link is not a compromise, it is the correct answer.

Method	Setup time	Style control	Page weight	Best for
Embed snippet	Minutes	Inherits your theme	Script on every view	Most sites, most of the time
Iframe	Minutes	Isolated, predictable	Script on every view	Aggressive themes, agency work
Direct link	Seconds	Hosted page	None on your site	Email, SMS, QR codes, print
Plain HTML + endpoint	Under an hour	Entirely yours	None until submit	Developers, performance-critical pages

That last row is the developer path and it is the fastest option available — nothing loads until someone submits. It is covered separately in the static-site form backend guide.

WordPress

Use a Custom HTML block in the block editor. Paste the snippet, preview, publish. In a classic theme, a Custom HTML widget in a sidebar or a page template works the same way.

Do not use the Code Editor for the whole post unless you are comfortable there — switching a post to code view and back has a habit of reformatting blocks you did not intend to touch.

You do not need a plugin. A hosted form is just markup. Every plugin you add is another update, another potential conflict, and another component with access to your site, so skipping one is a genuine benefit rather than a limitation.

The two things that break it on WordPress:

Aggressive theme CSS. Themes commonly style every input and button globally, and those rules reach inside the embed. If the form renders but looks wrong, this is why.

Security plugins stripping scripts. Some hardening plugins remove script tags from post content on save. The symptom is distinctive — the form works in preview and vanishes on the live page. If you see that, the iframe method sidesteps it entirely.

Webflow

Use an Embed element, which is available on paid site plans. Drop it where the form should sit and paste the snippet.

Webflow is the easiest of the four in practice, because its CSS is class-scoped by design rather than applied to bare element selectors. Embeds usually render correctly on the first attempt.

Watch the Designer canvas. Embeds often do not render properly inside the Designer even when they are perfectly fine live. Publish to a staging domain and check there rather than debugging against the canvas, which will send you looking for a problem that does not exist.

Set the container width deliberately. An embed inside a full-width section can render at whatever width it likes. Wrap it in a div with a max width — around 600px suits most forms.

Squarespace

Use a Code Block. Add a block, choose Code, paste, save.

Check your plan first. Code and embed blocks have historically been unavailable on the cheapest tiers, and the plan structure changes periodically, so confirm before you design a process around it. If code blocks are not available to you, the direct link works on every plan without exception — a button linking to a hosted form page is a perfectly good solution and takes seconds.

Squarespace CSS is opinionated. More so than WordPress in some respects, particularly around form elements and buttons. If the embed renders badly and you would rather not fight it, the iframe is the pragmatic choice here more often than on other platforms.

Next.js and React

If your site is server-rendered or has API routes available, skip the embed. A plain form posting to a hosted endpoint gives you complete control of the markup and loads nothing at render time.

If you do want the embed, load the script with next/script and strategy="lazyOnload" so it does not compete with your page's own JavaScript. Do not put a raw script tag in a component and expect it to behave — React's rendering lifecycle and third-party scripts that mutate the DOM have a long history of disagreeing.

For a statically exported site with no server runtime, you need a hosted endpoint or an embed — there is no third option, because there is nothing running to receive the POST. That constraint and its consequences are covered in the static-site backend guide.

The two mistakes that break embeds everywhere

Never testing on a real phone. Browser dev tools' device emulation is not the same thing. Real phones have real keyboards that cover half the screen, real autofill behaviour, and real touch targets. Test on an actual device before you consider it done — a form that scrolls the page under the keyboard on submit is a mobile-only failure that emulation will not show you.

Not distinguishing the same form used on several pages. Submissions land in one place, which is convenient right up until you want to know which page converted. Add a hidden field carrying the page name, or duplicate the form per page. Without it, page-level conversion cannot be measured at all — and that is one of the four numbers worth tracking, per form analytics that actually matter.

Where to place the form

Placement affects conversion more than the embed method does.

Above the fold on a dedicated landing page. If the whole page exists to capture the form, do not make people scroll to it.

After the value on a content page. On a service page, the visitor needs to understand what you do before being asked to commit. A form at the top of a page that has not yet explained anything converts poorly.

Both, on long pages. Two instances of the same form on a long page is not redundant — it catches people at different points of readiness. Distinguish them with a hidden field so you learn which position works.

Not in a popup on mobile. Interstitials are penalised in search on mobile and they are widely disliked. If you must use one, trigger it on exit intent on desktop only.

More on the page-level decisions in AI forms that increase landing page conversion.

After it renders, check three things

Submit it yourself from a real browser. Not the preview. The live embedded form on the live page. This is the step people skip and it is the one that catches the notification going to an address nobody monitors.

Confirm where the notification lands. And whether that inbox is genuinely watched. Response speed is the metric most tied to whether submissions become revenue, and the most common cause of slow response is a notification arriving somewhere nobody looks — the SMS versus email comparison covers the routing options.

Watch for spam within the first fortnight. A newly public form gets found by scrapers quickly and the submissions arrive in bursts. Filtering handles it invisibly; the layered approach is in stopping form spam without a CAPTCHA.

Building the form itself

None of the above helps if the form asks too much. The most common failure is not the embed — it is eleven fields where four would do.

Generating a form from a plain description gets you a sensible starting field set in seconds, and then you cut. Generated forms reliably over-collect, over-validate and mark too many fields required, which is consistent enough to work through as a checklist — see what AI can and cannot do with form questions. If you are digitizing an existing paper form, the PDF conversion path is faster than rebuilding it by hand.

Embedding works the same on every BotForms plan. See features, pricing for plan limits, or start a 30-day trial and have a form live on your site in about ten minutes.