Forms

Forms are step-by-step intakes with their own public link. Build them by hand, from a template, or describe what you need and let AI draft the questions.

• Question types: single/multi choice, short and long text, labelled field groups, sliders for budget and timeline, statements, and contact buttons.
• Any choice can be a free text option: switch on “free text” next to it and picking it opens a field. What gets typed is what lands in the results, so an answer reads “Shopify” and not “Other”.
• Sections group questions; respondents see one step at a time with progress.
• Theme it per form: brand color, typeface, corner style, header strip, or inject custom CSS.
• Book a call inside the form: add a Booking question and pick one of your booking types. Put it first to book before the questions, or last to book once they are done. The call is filed with the answers.
• Every visit counts once; you see starts, completions, completion rate and time-to-finish.

Embed on your site

Every form also works inside your own website. Copy embed code in the builder's share menu gives you a ready iframe snippet: the form drops its own chrome (cover strip and logo) so it blends into your page. The URL takes a few optional knobs:

Auto-height

An iframe cannot measure what is inside it, so a fixed height either crops the form or leaves a gap. With fit=1 the form posts its height to your page, and a small script sizes the frame, animated, on every step change. Turn on Auto-height in the share menu and both snippets are generated for you:

<iframe src="https://www.systemos.so/f/your-form?embed=1&fit=1"
  style="width:100%;border:0;display:block" scrolling="no"></iframe>

<script>
window.addEventListener("message", function (e) {
  if (!e.data || e.data.type !== "systemos:height") return;
  document.querySelectorAll("iframe").forEach(function (f) {
    if (f.contentWindow !== e.source) return;
    if (f.dataset.sysosSized) f.style.transition = "height 320ms cubic-bezier(0.23, 1, 0.32, 1)";
    f.dataset.sysosSized = "1";
    f.style.height = e.data.height + "px";
  });
});
</script>

The script goes on the page once and serves every SystemOS embed on it. With auto-height, align and nav do nothing: the frame is exactly as tall as the form.

Embedded or on its own link, it is the same live form. Edits go live everywhere at once, and responses land in the same place.

The iframe is for keeping our form and restyling it. If you would rather build the form yourself, in your own markup, and only send us the answers, that is the Forms API page.