Popups and signup forms: the parts, in plain words

31 parts and 12 phrases. Apps in this area include Privy, Justuno, OptiMonk, Klaviyo forms, Wisepops.

Displayforms.displayShowWhat the form looks like on the page, what makes it appear and who sees it.

Form typeforms.display.typeShowThe shape a form takes on the page.

How to extend

SlotMany side by sidestorefront.slot.global.footer storefront.slot.global.overlayA popup plugin renders its forms in a page-level slot; the footer signup is Litestore's own embedded form.

Part	Litestore today	How to extend
Embedded form`forms.display.type.embedded`An embedded form sits in the page itself, such as in the footer, and stays in place as the visitor scrolls.	Core`modules/storefront/shell/footer/footer-newsletter.tsx`	Slot · many
Popup`forms.display.type.popup`A popup opens in the middle of the screen over a dimmed page and closes with a button or a click outside it.	Plugin	Slot · many
Slide-in panel`forms.display.type.slide_in`A slide-in panel slides in from a corner or side of the page and leaves the rest of the page usable.	Plugin	Slot · many
Full screen`forms.display.type.full_screen`A full-screen form covers the whole window until the visitor submits or closes it.	Plugin	Slot · many
Bar`forms.display.type.bar`A bar is a thin full-width strip at the top or bottom of the page with a short message or field.	Plugin	Slot · many
Reopen tab`forms.display.type.reopen_tab`A reopen tab is a small tab that stays on screen after a form is closed and reopens it when clicked.	Plugin	Slot · many
Prize game form`forms.display.type.prize_game`A prize game form asks for an email before the visitor spins a wheel or scratches a card to reveal a random offer.	Plugin	Slot · many

What makes it appearforms.display.triggerShowThe visitor behaviour that opens a form.

How to extend

Core onlyDisplay triggers run in the popup plugin's own script on the storefront.

Part	Litestore today	How to extend
On page load`forms.display.trigger.page_load`This trigger opens the form as soon as the page loads.	Plugin	Core only
Time on page`forms.display.trigger.time_on_page`This trigger opens the form after the visitor has been on the page for a set number of seconds.	Plugin	Core only
Scroll depth`forms.display.trigger.scroll_depth`This trigger opens the form once the visitor scrolls past a set share of the page, such as half.	Plugin	Core only
Leaving the page`forms.display.trigger.page_exit`This trigger opens the form when the cursor moves toward the top of the window on desktop, or on a quick scroll up or back tap on mobile.	Plugin	Core only
Inactivity`forms.display.trigger.inactivity`This trigger opens the form after the visitor has not moved, scrolled or typed for a set time.	Plugin	Core only
On click`forms.display.trigger.click`This trigger opens the form when the visitor clicks a chosen button or link.	Plugin	Core only

Who sees itforms.display.targetingShowThe rules that limit which visitors and pages a form shows on.

How to extend

Core onlyTargeting rules run in the popup plugin's own script on the storefront.

Part	Litestore today	How to extend
Page rule`forms.display.targeting.page_rule`A page rule shows or hides the form on pages whose address matches a pattern.	Plugin	Core only
Device`forms.display.targeting.device`A device rule shows a form only on desktop or only on mobile.	Plugin	Core only
New or returning visitor`forms.display.targeting.visitor_type`A visitor rule shows a form only to first-time visitors or only to returning ones.	Plugin	Core only
Hide from subscribers`forms.display.targeting.hide_subscribers`This rule stops a signup form from showing to visitors already on the list.	Plugin	Core only
Show frequency`forms.display.targeting.frequency`A frequency rule sets how many days must pass before a closed form shows to the same visitor again.	Plugin	Core only
Cart rule`forms.display.targeting.cart_rule`A cart rule shows a form only when the cart value or contents match a condition.	Plugin	Core only

Fields and checksforms.fieldShowWhat the form asks for and how bad entries are rejected.

How to extend

ProviderOne per storenewsletter list providerThe fields a signup collects are handed to the one configured list provider.

Part	Litestore today	How to extend
Email field`forms.field.email`The email field collects the address and rejects text that is not a valid email.	Core`modules/customers/storefront/newsletter/schema.ts`	Provider · one
Name fields`forms.field.name`Name fields collect a first and last name with the signup.	Core`modules/customers/storefront/newsletter/schema.ts`	Provider · one
Phone field`forms.field.phone`A phone field collects a number for text messages, usually with its own consent wording.	Plugin	Provider · one
Custom question`forms.field.custom`A custom question asks for extra data, such as a birthday or interests, and saves the answer on the contact.	Plugin	Provider · one
Hidden bot field`forms.field.hidden_bot_field`A hidden bot field is left empty by people and filled by bots, so signups that fill it are rejected.	Core`modules/customers/storefront/newsletter/schema.ts`	Provider · one
Throwaway address check`forms.field.disposable_email_check`This check rejects email addresses from known disposable mailbox services.	Core`modules/email/disposable-email.ts`	Provider · one

Steps, offer and resultforms.flowShowThe screens a form walks through, the reward it gives and where the signup goes.

How to extend

EventMany side by sideevent.customer.createdA signup that creates an account raises the customer created event that welcome flows listen to.

Part	Litestore today	How to extend
Multi-step form`forms.flow.multi_step`A multi-step form asks for the email first and a phone number or question on a following screen.	Plugin	Event · many
Signup offer`forms.flow.offer`A signup offer is a discount or free shipping code shown or emailed after the form is submitted.	Plugin	Event · many
Success state`forms.flow.success_screen`The success state replaces or marks the form after submission to confirm the signup.	Core`modules/customers/storefront/newsletter/newsletter-form.tsx`	Event · many
Send to list`forms.flow.list_handoff`The list handoff passes the signup and its source and campaign tags to the email list provider.	Core`modules/customers/newsletter/providers.ts`	Event · many

Testing and resultsforms.testingShowHow form versions are compared and measured.

How to extend

Core onlyForm tests and their counts live in the popup plugin that shows the forms.

Part	Litestore today	How to extend
A/B test`forms.testing.ab_test`An A/B test shows two versions of a form to separate groups of visitors and compares their signup rates.	Plugin	Core only
Signup rate`forms.testing.signup_rate`The signup rate is the share of visitors who saw a form and submitted it.	Plugin	Core only

Phrase	Made of
exit-intent popup	forms.display.trigger.page_exit forms.display.type.popup
spin to win	forms.display.type.prize_game forms.field.email forms.flow.offer
teaser	forms.display.type.reopen_tab
flyout	forms.display.type.slide_in
embedded signup form	forms.display.type.embedded forms.field.email
welcome popup	forms.display.trigger.time_on_page forms.display.type.popup forms.flow.offer
scroll trigger	forms.display.trigger.scroll_depth
two-step popup	forms.display.type.popup forms.flow.multi_step
popup A/B testing	forms.testing.ab_test
do not show to subscribers	forms.display.targeting.hide_subscribers
page targeting	forms.display.targeting.page_rule
lead capture	forms.field.email forms.flow.list_handoff

Popups and signup forms