Embed a hosted inline form

A hosted inline form is a Zalify form that renders directly into a spot on your page — a footer, a sidebar, a landing section — instead of popping up. It uses the same form editor, the same List capture, and the same lead tracking as a popup form. Only the surface is different: it lives in the page.

Inline form vs. popup form

Both are built from the same form in Zalify. What changes is how they appear:

Before you begin

• A form built in Zalify and set to inline.
• A List to subscribe people to (if you're collecting subscribers).
• A stable place on your page to mount it — an element with an id or class you can target with a CSS selector.

Add a mount point

Put an empty container where you want the form to appear:

<div id="zalify-footer-signup"></div>

Point a display_form action at it

Inline forms are shown by a display_form action, configured in Zalify:

{
  "type": "display_form",
  "params": {
    "form_id": "clniphba00xwkok1qmkyip597",
    "selector": "#zalify-footer-signup",
    "mode": "replace"
  }
}

• form_id (required) — the form to render.
• selector (required) — a CSS selector for your mount point.
• mode (optional) — how the form is placed: replace (default), append, or prepend.
• shadow (optional) — set true only if you want style isolation. Defaults to false.

How it loads

On the first display_form action, the Pixel:

1. Lazy-loads the form runtime, form.js, from https://cdn.zalify.com.
2. Fetches the form document from https://app.zalify.com/api/v1/forms/<wid>/<form_id>.
3. Mounts the form's HTML into your selector using the chosen mode.
4. Wires it up through the same submission path as popup forms.

Your CSS styles it

Because inline forms skip the Shadow DOM by default, your page's stylesheet applies directly to the form — which is usually what you want, so it matches your theme without extra work. If a page style is interfering and you'd rather isolate the form, set shadow: true in the action.

Capturing leads

This works exactly like a popup form — the two share one submission pipeline:

• Input name attributes map to Zalify's fields: email, phone, firstName, lastName, language, emailMarketingConsent, smsMarketingConsent. Any other inputs are dropped, though the full payload is kept on the Submission record.
• To subscribe someone, include subscribe: { list_id, email_marketing_consent } — that adds them to the List and can start an Automation.
• On submit, the form fires form_submitted, POSTs to https://reach.zalify.com/v1/public/unisubmit, then fires lead on a successful (2xx) response.
• The form's data-zalify-form-state attribute cycles idle → submitting → success | error, so you can style each stage with CSS.

For the full breakdown of the two events and the state machine, see Collect emails with a popup form.

Consent and testing

• Inline forms respect the same consent gate as the rest of the Pixel. With consentRequired=true, the form won't render or submit until consent is granted — any display_form calls made beforehand are queued and replayed once it is. See Configure consent.
• Preview Mode (?zalify-preview=true) bypasses the consent gate so you can test. See Test your setup with Preview Mode.

Next steps

• Collect emails with a popup form — the same capture, as a popup
• Create your first popup — if you'd rather it pop up
• Send conversions to Meta, Google, TikTok & more — forward the lead event to your ad platforms