Embedding a Form on Your Website

Keep respondents on your site by embedding your form directly. CraftForm supports iFrame, popup, and inline embed methods — each takes under 2 minutes to set up.

Step 1 — Get your embed code

Inside the form builder, click the Share button in the top-right corner. Switch to the Embed tab. You'll see three embed options with ready-to-copy code snippets for each method.

Tip: Replace your-form-slug in all code examples below with your actual form slug (visible in the Share panel).

Embed methods

Standard iFrame embed

The iFrame embed places your form directly inside a webpage. It looks native to your site and the respondent never leaves.

<iframe
  src="https://craftform.co/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
  title="Contact Form"
  allow="camera; microphone"
>
  Loading form...
</iframe>

Popup embed

The popup embed shows a button on your page. When clicked, your form opens in a centered modal overlay.

<!-- Add this script once, before </body> -->
<script src="https://craftform.co/embed/popup.js" async></script>

<!-- Place this button anywhere on your page -->
<button
  data-formcraft-popup="your-form-slug"
  data-label="Book a demo"
>
  Book a demo
</button>

Inline embed (auto-height)

The inline embed auto-resizes to fit the form content perfectly — no scrollbars, no fixed height.

<!-- Add this script once, before </body> -->
<script src="https://craftform.co/embed/inline.js" async></script>

<!-- Place this div where you want the form -->
<div
  data-formcraft-inline="your-form-slug"
  style="width: 100%"
></div>

Platform-specific guides

Webflow▼

1. In Webflow, drag an Embed component onto your page canvas.
2. Paste your CraftForm iFrame code into the HTML embed field.
3. Click Save & Close, then publish your site.
4. For the popup embed, paste the script tag into Project Settings → Custom Code → Footer Code.

WordPress▼

1. Edit the page or post where you want the form.
2. Add a Custom HTML block (Gutenberg editor) or a Text widget (Classic editor).
3. Paste the iFrame or inline embed code.
4. For popup embeds, add the script tag via a plugin like WPCode or in your theme's footer.php.

Squarespace▼

1. Edit the page and add a Code Block where you want the form.
2. Paste the iFrame code inside the Code Block.
3. Squarespace restricts external scripts — use the iFrame embed (not popup) for best results.

Notion▼

1. In Notion, type /embed on your page.
2. Paste your CraftForm form URL (e.g. https://craftform.co/f/your-form-slug).
3. Notion will render an embedded preview. Resize the block as needed.
4. Note: Notion embeds show a preview — respondents can submit directly from Notion.

Framer▼

1. In Framer, add an Embed component from the Component panel.
2. Set the source URL to your CraftForm form URL.
3. Alternatively, use a Code Component and paste the iFrame HTML.
4. For popups, add a Script component pointing to the CraftForm popup.js URL.

Custom styling options

You can customize the form's appearance to match your brand from the builder's Design tab. Changes apply everywhere the form is embedded — no need to update your embed code.

Background color, font, and button color — set in the Design tab.

Transparent background — enable in the Design tab to let your site's background show through the iFrame.

Custom CSS — available on PRO. Add your own CSS rules to override any default styles.

Form width — control with CSS on the container element wrapping your iFrame.

← Back to Help Center