How to embed an HTML form on your website

Method 1: Script embed (recommended for most sites)

Visual form builders like forms.app and Tally provide a script tag plus a container element. The script injects the form and often handles responsive height.

forms.app script embed

<div data-formsapp-id="YOUR_FORM_ID" data-formsapp-embed></div>
<script src="https://forms.app/static/embed.js" defer></script>

Paste this into a raw HTML block in WordPress, Webflow, Notion sites, or any static page. Replace YOUR_FORM_ID with the ID from your forms.app publish panel.

Method 2: Iframe embed

Iframes sandbox the form completely. Styling is limited to what the builder allows, but setup is one line and Content-Security-Policy rules are straightforward.

Generic iframe pattern

<iframe
  src="https://form-provider.com/embed/FORM_ID"
  width="100%"
  height="500"
  frameborder="0"
  title="Contact form"
  loading="lazy">
</iframe>

Jotform and Cognito Forms both offer iframe codes from their publish screens. Set an explicit title for screen readers.

Method 3: Native HTML with remote action

When you want full CSS control, write the markup yourself and POST to a hosted endpoint. This is not an "embed" in the widget sense, but it is the pattern static-site developers prefer.

Formspree on static HTML

<form action="https://formspree.io/f/YOUR_ID" method="POST">
  <label>Email
    <input type="email" name="email" required autocomplete="email" />
  </label>
  <label>Message
    <textarea name="message" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

Basin and Getform work the same way with different endpoint URLs.

Where to paste embed code

• Static HTML / Hugo / Jekyll: Paste into your template or a partial; script embeds go before </body>.
• React / Vue / Svelte: Use a client component or dangerouslySetInnerHTML only for trusted builder scripts; prefer their official React helpers when available.
• WordPress: Custom HTML block or shortcode plugin; avoid pasting scripts in the classic editor without unfiltered HTML capability.
• Webflow: Embed element for iframes/scripts; or use native Webflow form elements if you do not need portability.

CSP and performance tips

If you use a strict Content-Security-Policy, whitelist the embed provider's script and frame sources. Load embed scripts with defer. For iframes, use loading="lazy" when the form is below the fold.

Related reading

• HTML contact form builders — field and spam recommendations
• HTML form vs JavaScript form — when to add AJAX
• Best HTML form builders — full comparison table