Embedding a Form on Your Website: Three Ways, and When to Use Each
- guides
- embedding
- developers
Hosting a form on app.fastformbuilder.com is fine for a quick link, but most of the time you want the form on your own site — your domain, your page, your design. FastFormBuilder gives you three ways to do that. They're not ranked; each is the right answer for a different situation.
This guide is written from the inside: we build and maintain all three paths, so the trade-offs below are the real ones, not marketing.
1. The one-line script (easiest)
Paste a single tag where you want the form to appear:
<script src="https://app.fastformbuilder.com/embed.js" data-form="YOUR_FORM_ID"></script>
The loader fetches your form's current configuration and renders it in place. The big advantage: edits you make in the builder go live automatically — no need to touch your site again. Spam protection (hCaptcha) is wired up for you.
Use it when you control the page's HTML but don't want to manage form markup yourself — landing pages, most CMS "custom HTML" blocks, plain static sites.
Caveat: if your CMS strips
<script>tags (some locked-down page builders do), this option won't work. That's what the next two are for.
2. The styled copy-paste (no script tag needed)
This variant gives you the complete form as HTML plus a small block of inline CSS, so it looks polished out of the box without loading anything from us at render time:
<style>/* ...self-contained form styles... */</style>
<form class="ffb-form" action="https://app.fastformbuilder.com/api/forms/YOUR_FORM_ID/submissions" method="POST">
<!-- your fields -->
<button class="ffb-submit" type="submit">Submit</button>
</form>
<script>/* ...inline submit handler... */</script>
Use it when script-tag embeds are blocked, or when you want the form's markup to live in your page so it loads instantly. The trade-off is the mirror image of option 1: because the HTML is now a copy, changing the form in the builder won't update an already-pasted form — you re-copy it.
3. The raw HTML (full control)
Same as the styled version, but without our CSS. You get clean, class-named markup and nothing else.
Use it when you have a design system and want the form to inherit your site's styles. You write the CSS against the ffb- classes (.ffb-field, .ffb-label, .ffb-input, and so on) and it'll match everything around it.
Choosing in one breath
| If you want… | Use |
|---|---|
| Set it and forget it; edits auto-update | Script |
| No script tags allowed, but keep good defaults | Styled |
| To style it yourself with your own CSS | Raw |
Two things to know about all three
- Submissions land in the same place. However you embed, responses show up in your dashboard and export to CSV like any other form.
- File uploads are disabled in embeds. A file field renders as a disabled input with a note. Uploads need the hosted form page, where we can handle them securely. If you need files, link to the hosted form instead of embedding.
Pick the one that matches how much control you want, paste it, and you're collecting responses on your own site.