Embed a Form on Your Website

CraftForm supports four embed modes, each with a different use case:

• Inline — the form sits directly in the flow of your page. Best for contact, feedback, and conversion-focused forms.
• Popup — opens on click or after a delay, covers the page with a modal. Best for waitlists and lead magnets.
• Slider — slides in from the edge. Less intrusive than a popup, good for newsletter signups.
• Side tab — a persistent tab on the edge of the screen. Ideal for feedback widgets.

Each mode uses the same underlying embed snippet — only a single parameter changes. Switching modes after deploy is a one-line edit.

1. In CraftForm, open your form and click Embed.
2. Pick Inline or Popup and copy the snippet.
3. In WordPress, edit the page you want to embed on.
4. Add a Custom HTML block.
5. Paste the snippet. Save and preview.

That is it. No plugin required, no shortcode to remember, no premium upgrade. The form resizes automatically to match its content and inherits your theme.

Webflow: add an Embed component from the Add panel, paste the CraftForm snippet, publish. Works on the free plan of Webflow.

Framer: insert an Embed element, paste the snippet. CraftForm renders inside Framer's iframe wrapper without layout issues.

Notion: use a /embed block and paste the public form URL. Notion will render it in line with the rest of your page.

Ghost: use an HTML card. Squarespace: use a Code block. Shopify: paste into a Custom Liquid section.

For React and Next.js projects, CraftForm ships an official @craftform/react package. Install with npm and drop in the component:

import { CraftForm } from '@craftform/react'

export default function Contact() {
  return <CraftForm formId="your-form-id" mode="inline" />
}

The component is fully SSR-compatible, tree-shakable, and respects your app router boundaries. No hydration mismatches, no layout shift.

Prefer not to install a package? Use the vanilla embed — a single <script> tag and a <div> works in any framework.

You can prefill any form field via URL parameters. This is powerful for personalisation — pass a user's name, email, or company from your CRM or marketing automation and the form arrives already populated.

Example: https://craftform.co/f/your-form?email=user@example.com&plan=pro

Prefill works with both inline and popup embeds. Hidden fields are also supported, which is useful for UTM tracking and attribution.

CraftForm embeds inherit your site's root CSS variables automatically. Fonts, colours, border radii — everything matches your brand without manual configuration. For pixel-perfect control, you can apply custom CSS in the form editor or via the theme prop in React.

The embed iframe is sandboxed for security but still gets access to CSS variables you define on the parent page, so dark mode, brand colours, and custom fonts all just work.

The CraftForm embed script is under 8kb gzipped. It loads asynchronously, does not block page rendering, and sets zero third-party cookies. Your Core Web Vitals stay clean — we have verified with Lighthouse that embedding a CraftForm has negligible impact on LCP, FID, and CLS.

GDPR-wise, embeds only collect data on submit. No behavioural tracking, no fingerprinting, no analytics pings. Read our full privacy policy for details.

Ready to embed? Grab your form from the dashboard, or start by building a free form online in 2 minutes.