Managed Forms

A managed form has no markup of yours. You add fields, rules, header, footer and a theme in the dashboard, and the HTML library renders the form from a blueprint the server sends with the session. Use it when a non-developer owns the form, or when you want a form up in a minute and do not need custom markup.

Embed

1. Open the form in the dashboard, set Render mode to Managed, and build the fields.

2. Put an empty host where the form should appear:

   <snip-form data-key="YOUR_FORM_KEY"></snip-form>

3. Load the library before the closing body tag:

   <script src="https://cdn.snipform.io/api/v2/sf.iife.js" defer></script>

The host stays empty until a visitor interacts with the area. The session then opens, the blueprint arrives, and the form renders in place. From there it behaves exactly like a hand-written form: same session model, same spam protection, same tracking.

Note

Anything you put inside the host is replaced by the rendered form. The one exception is sf-success: if present, its content is used on success instead of the dashboard thank-you, with %field% substitution as described in Success content.

Field types

Builder label	Type	Renders as	Value
Text	text	input type="text"	string
Email	email	input type="email"	string
Paragraph	textarea	textarea with four rows	string
DropDown	select	select with a disabled placeholder option	the selected key
Checkboxes	check	one input type="checkbox" per option	array of keys
Multiple Choice	radio	one input type="radio" per option	the selected key
Confirmation	bool	a single checkbox with value true	true when ticked

Text, Email, Paragraph and DropDown take a placeholder. DropDown, Checkboxes and Multiple Choice take a list of options, each with a key (the value sent) and a label.

Validation

Each field’s rules are chosen in the builder, with a default message you can edit:

Rule	Applies to	Default message
Required	Text, Email, Paragraph, DropDown, Multiple Choice	This field is required
At least one	Checkboxes	Please select at least one option
Email	Email	Please enter a valid email
Valid URL	Text	Please enter a valid url
Numeric Value	Text	Please enter a valid number
Must select	Confirmation	Please check to continue

Rules are compiled on the server from the stored field definitions, so the page cannot change them. Errors render under each field as the visitor submits.

Markup and classes

The renderer produces standard library markup with directives already in place, so everything in Error states and Submit states applies. The structure:

<form class="sf-managed sf-managed--inset-label sf-managed--light">
    <div class="sf-managed-header">...your header HTML...</div>

    <div class="sf-managed-field">
        <div class="sf-managed-field-inner">
            <label>Email</label>
            <input type="email" name="email" sf-validate:required="..." sf-validate:email="...">
        </div>
        <span if-error="email" then-show-text></span>
    </div>

    <div class="sf-managed-field sf-managed-field--group">
        <label>Interests</label>
        <div class="sf-managed-field-options">
            <label><input type="checkbox" name="interests" value="design"> Design</label>
        </div>
    </div>

    <div class="sf-managed-actions">
        <button type="submit" on-submit-text="Submitting...">Send</button>
    </div>

    <div class="sf-managed-footer">...your footer HTML...</div>
</form>

Class	On
sf-managed	the form
sf-managed--inset-label, sf-managed--outset-label, sf-managed--hidden-label	the form, from the chosen style
sf-managed--light, sf-managed--dark	the form, from the website theme setting
sf-managed-header, sf-managed-footer	the header and footer blocks
sf-managed-field	every field wrapper
sf-managed-field-inner	the bordered label + control area of text-like fields
sf-managed-field--group, sf-managed-field-options	Checkboxes and Multiple Choice
sf-managed-field--bool	Confirmation
sf-managed-actions	the submit button row

Theme

Three label styles: Inset Label (label inside the bordered area, the default), Outset Label (label above the control) and Hidden Label (no label; the label text becomes the placeholder). Pick light or dark to match the page the form lives on.

Colours set in the builder arrive as CSS custom properties on the form element:

Property	Default	Used for
--sf-color	#0ea5e9	accent, focus
--sf-color-border	#cbd5e1	field borders
--sf-color-label	#334155	labels
--sf-color-text	#0f172a	text
--sf-color-btn	#0ea5e9	button background
--sf-color-btn-hover	#0369a1	button hover
--sf-color-btn-text	#bae6fd	button text

The stylesheet is injected once as style#sf-managed-styles. To override it, target form.sf-managed from your own stylesheet; anything you set on the custom properties or with higher specificity wins.

form.sf-managed {
    --sf-color-btn: #111827;
    --sf-color-btn-text: #ffffff;
    max-width: 32rem;
}

Switching modes

Render mode lives in the form’s settings and can be changed at any time. Switching to Headless makes the server read fields and rules from your markup again, as described in the HTML library. Switching to Managed makes it ignore the markup and send the blueprint. The key does not change, so the embed stays the same; only what is inside the host matters.

Managed forms stop where the builder stops: seven field types, six rules, no custom directives. When you need a date picker, a tel input, regex rules or your own layout, switch to headless or use React.