表单
/
3 min read
Collect emails with a popup form
Turn a Zalify popup into an email-capture form that subscribes visitors to a List and fires a lead event.
Add a form to a Zalify popup and the Pixel wires it end-to-end: it collects the fields, submits them to Zalify, subscribes the visitor to a List, and fires a lead conversion event — all without you writing any submit code.
Before you begin
- A popup to attach the form to — see Create your first popup.
- A List in Zalify for new subscribers to join.
Set up the form
Point the popup at a List
On the popup document, set form: { list_id } with the ID of the List new subscribers should join.
Add a form to the popup HTML
Include a <form data-zalify-form> with your inputs. The Pixel wires it automatically — no submit handler needed.
Name your inputs
Input name attributes map one-to-one to Zalify's fields. Recognized names:
email, phone, firstName, lastName, language, emailMarketingConsent, smsMarketingConsent.
Any other inputs are ignored, so you can add layout-only fields without polluting the submission.
Publish
Publish the popup. Submissions start flowing into Zalify immediately.
What happens on submit
When a visitor submits, the runtime:
- collects the form data,
- fires a
form_submittedevent, - POSTs to Zalify's submission endpoint,
- fires a
leadevent on a successful (2xx) response, and - flips the form's
data-zalify-form-stateattribute throughidle → submitting → success | error.
That state attribute lets you style each stage — for example, showing a spinner while submitting and a thank-you message on success — using CSS alone.
The two events
Both events fire so your analytics and ad platforms get clean signals:
| Event | When it fires | Payload |
|---|---|---|
form_submitted | Synchronously, before the network request | form_id, list_id, and the form fields — captures intent even if the request later fails |
lead | Only on a 2xx from the subscribe endpoint | Minimal — { email } — mapping cleanly to the lead/conversion semantics ad platforms expect |
Prefer to use your own form?
If you already have a form on your site — a footer newsletter box, for example — you don't have to rebuild it as a popup. Wire it to Zalify with one call:
window.zalify('wire_form', {
selector: '#newsletter',
list_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
form_id: 'footer_signup',
});
It reuses the exact same submission path, events, and state machine as popup forms, works with any framework, and is safe to call before the Pixel finishes booting (the call queues). Full reference: Zalify's forms guide.
Where submissions go
Every submit is stored in Zalify as a Submission, keeping the raw fields verbatim — even if the form isn't subscribing anyone to a List (useful for surveys and lead-gen). When it does subscribe, the visitor's profile is added to your List and automatically matched into any Segments whose rules they meet.
Turn a submit into a journey
A new subscriber joining a List can kick off an automation Flow — for example a welcome email. Set that up once and every popup or wired form that feeds the List triggers it.
Next steps
- Create your first popup — if you don't have a popup yet
- Send conversions to Meta, Google, TikTok & more — forward the
leadevent to your ad platforms