Embed a form on your website

A Seagit form can live on your own site instead of behind a link. The form runs inside an iframe, so your CSS cannot break it and it cannot break your page — the same approach Google Forms, Typeform and Jotform all use.

The script: a form that resizes itself

This is the snippet to use unless something stops you. The loader injects the iframe and then listens for height messages from it, so the frame grows as fields expand, validation messages appear, and the confirmation replaces the form. There is never an inner scrollbar and never a height for you to guess at.

The script is dependency-free and under 4 KB. It adds one global, SeagitForms, touches nothing else on your page, and is wrapped so that a failure means the form does not appear rather than your page breaking. It is cached for ten minutes, so a fix reaches every site that embeds a form within minutes.

<div data-seagit-form="g-1787891599359-pc7mx2i"></div>
<script src="https://forms.seagit.com/embed.js" async></script>

The iframe: works where scripts do not

Some hosts strip <script> tags — Notion, and the cheaper tiers of several website builders. A plain iframe still works there, and needs nothing from us at all.

The trade is height. Without the script there is no way for the form to tell your page how tall it has become, so you set a fixed height. Pick one that fits the longest state of your form, which is usually the form with every validation message showing. Too small and respondents get a scrollbar inside the frame; too large and you get white space under it.

<iframe
  src="https://forms.seagit.com/embed/g-1787891599359-pc7mx2i"
  width="100%"
  height="600"
  style="border:0"
  title="Form"
></iframe>

Embedding a password-protected form

A private form embeds with the same snippet — nothing extra to configure. What respondents meet inside the frame is the password gate, and the form appears in its place once they enter the password. The demo below is a real private form, so this is the actual gate rather than a picture of one.

The questions are not sent to the browser until the password is accepted. They are not in the page source, and they are not in the embed's server-rendered data — a private form embedded on a public page gives away nothing but its existence. That is the point of the gate: knowing where the form is must not be enough to read it.

Which one should I use?

Options you can set on the placeholder

All four are optional. data-seagit-height only sets the height before the first measurement arrives — after that the form sizes itself — so it is worth setting only if you want to avoid a visible jump on a slow connection.

<div
  data-seagit-form="g-1787891599359-pc7mx2i"
  data-seagit-theme="light"
  data-seagit-height="480"
  data-seagit-title="Contact us"
></div>
<script src="https://forms.seagit.com/embed.js" async></script>

Why is my embedded form an empty box?

Nine times in ten it is the allowed-sites list in Settings → Embed. When that list is not empty and does not include the site doing the embedding, the browser refuses to load the frame before any of our code runs. Nothing can be rendered in its place, so the visitor sees a blank rectangle and no error appears anywhere — not in your console, not in ours.

An empty list means every site may embed the form, which is why a freshly pasted snippet works with no configuration. The list is an opt-in restriction: the moment you add one entry, everywhere else is blocked.

Reacting to a submission on your own page

With the script embed, the form tells your page when someone completes it, so you can fire your own analytics or move the visitor on. Two messages are sent: seagit:resize as the height changes, and seagit:submitted once. Both carry v: 1 so a future change to the format is recognisable rather than guessed at.

No answers ever cross that boundary — the messages carry a height and nothing else. Always check event.origin before acting on any message, as below, or another frame on your page could impersonate the form.

window.addEventListener('message', function (event) {
  if (event.origin !== 'https://forms.seagit.com') return;

  if (event.data && event.data.type === 'seagit:submitted') {
    // The visitor completed the form. Fire your own analytics, or redirect.
    console.log('form submitted');
  }
});

What respondents see

The embedded form has no Seagit navigation, header or footer — only your form on a transparent background, plus a small “Powered by Seagit Forms” link that opens in a new tab so nobody loses a half-completed form by clicking it. Submissions are stored, exported and forwarded to your webhooks and Slack channels exactly as they are from the hosted link. An embedded form is the same form, in a different place.