Embed your form

Every form has an Embed tab with three copy-paste snippets. Pick the one that matches your stack — they all submit to the same endpoint and count toward the same monthly quota.

Which snippet should I use?

Iframe

The simplest option. The form lives on formbuild.io and you embed it with one tag:

<iframe
  src="https://formbuild.io/embed/YOUR_FORM_ID"
  width="100%"
  height="560"
  frameborder="0"
  style="border:0;"
></iframe>

In the Embed tab you can tweak height (320 / 480 / 560 / 720 / 900px) and width (100% or fixed pixels). The snippet regenerates as you change the settings; click Copy when you're happy.

Visible domain: visitors will see formbuild.io in network requests. If that matters for branding, use Styled HTML or Raw HTML instead.

Styled HTML

A drop-in form with built-in styling that you can tune in three dimensions:

• Primary color — drives the button background, focus ring, and input focus border

• Corners — Sharp / Rounded / Pill

• Font — System / Serif / Monospace

The snippet and the live preview regenerate as you tweak. The CSS is scoped to .fb-form, so the styling won't leak into the rest of your page:

<style>
  .fb-form { max-width: 480px; font-family: ...; }
  .fb-form input, .fb-form textarea { ... }
  /* ... */
</style>
<form class="fb-form" action="https://formbuild.io/in/YOUR_FORM_ID" method="POST">
  <label>Your name</label>
  <input type="text" name="name" required>
  <!-- ... other fields ... -->
  <button type="submit">Send</button>
</form>

Edit the inline CSS to match your brand. Change colors, fonts, border radii — all the usual suspects.

Raw HTML

No styling. The form inherits whatever CSS your site provides:

<form action="https://formbuild.io/in/YOUR_FORM_ID" method="POST">
  <label>Your name</label>
  <input type="text" name="name" required>
  <!-- ... -->
  <button type="submit">Send</button>
</form>

Ideal if you already have form styles on your site (Tailwind, a design system, etc.). Drop it in and it picks up your existing look.

Live preview in the dashboard

The Embed tab shows a live preview next to each snippet. The preview reflects what your visitors will actually see:

• Iframe — preview shows our default styling (same as what loads in the iframe). Click Open standalone to view the embed URL in a new tab.

• Styled HTML — preview renders with the snippet's inline CSS so you see the actual styling that ships in the snippet.

• Raw HTML — preview strips dashboard styles so you see something close to an unstyled browser default.

Submitting in the preview is intercepted — it never sends a real response.

Editing fields later

Add or rename fields on the Fields tab. After you save, switch back to Embed — the snippets and preview regenerate with the updated fields. Copy the new snippet and replace the old one on your site.

CORS and same-origin

Form submissions to /in/YOUR_FORM_ID work from any origin — we send permissive CORS headers on submission endpoints. The iframe URL (/embed/YOUR_FORM_ID) is also framable from any origin in production, so the iframe option works on any site.

Next steps

• Auto-responder — send a confirmation back to the submitter

• Success page — customize the thank-you behavior

• Spam protection — honeypot and reCAPTCHA