A Flyout form slides in seamlessly from the screen edge instead of appearing in the center like a traditional popup. It provides high visibility without blocking content, perfect for mobile-optimized campaigns.
This guide shows how to create, customize, and optimize a flyout form for your store.
Before You Begin
Flyout forms use the same behavior and theme settings as popup forms. For full details on Items, Layouts, Behavior, and Theme customization, see the Popup Signup Form Guide.
The Omnisend JavaScript snippet must be installed on your website. For Shopify, BigCommerce, or WooCommerce, this is added automatically when you connect your store. For custom platforms, install the snippet manually.
Why Use a Flyout Form?
Flyouts offer three key advantages over center popups:
Non-intrusive entrance: Slides in from the screen edge instead of blocking content abruptly. Visitors can browse while the form stays visible.
Mobile-optimized: Adheres seamlessly to screen edges without horizontal margins or awkward cropping.
Persistent visibility: Remains visible while scrolling; background stays fully interactive and clickable.
💡 Best for: Mobile-first stores, exit-intent offers, and subtle list-building campaigns.
How to Create a Flyout Form
Step 1. Create a New Flyout Form
Go to Forms → Create Form → Type → Flyout → Choose a template.
💡 You can also change the style of an existing form (e.g., Popup to Flyout form) under Theme settings → Form layout.
Step 2. Customize Your Form
Use the drag-and-drop Form Builder to adjust:
Items: Add or remove fields (email, phone, name), buttons, images, text blocks, or legal consent checkboxes.
Layouts: Choose single-step or multi-step (collect email first, then phone in Step 2). Learn more about multi-step forms.
Copy: Write action-oriented headlines (e.g., "Get 15% off your first order" instead of "Subscribe to our newsletter").
Success message: Customize what visitors see after submitting (thank-you text, discount code, or redirect button).
💡 Tip: Keep fields minimal – email-only forms convert 20–30% higher than multi-field versions.
Step 3. Set Behavior Settings
Control when, where, and to whom your flyout appears:
Display Triggers
Choose one or more:
Time on page: Show after 6–10 seconds (recommended for first-time visitors).
Scroll depth: Trigger at 50% scroll (good for blog posts).
Exit intent: Display when visitors move to close the tab (desktop and mobile).
Custom trigger: Use JavaScript events for advanced scenarios. See custom triggers guide.
Note: All triggers use "OR" logic – if you set "10 seconds OR 50% scroll," the form appears when either condition is met.
Targeting
Decide who sees the form:
All Visitors: Show to everyone.
Don't Show to Existing Contacts: Target only new visitors (recommended to avoid annoying subscribers).
Page targeting: Display on specific URLs (e.g.,
/collections/sale) or exclude pages (e.g.,/checkout).Location targeting: Show to visitors in specific countries or regions.
💬 Learn more: Signup Forms Behavior Settings.
Frequency
Set how often the form reappears to the same visitor:
Once per session: Closes after dismissal; reappears in next visit.
Once per X days: Hides for 7/14/30 days after viewing.
Step 4. Customize Theme Settings
Match the flyout to your brand:
Form layout: Confirm Display Type = Flyout. Adjust width (mobile vs. desktop).
Position: Choose left or right edge (flyouts slide in from sides, not center).
Colors: Set background, button, and text colors to match your store theme.
Fonts: Use your brand fonts or Omnisend defaults.
Close button: Show/hide the X button; adjust color and style.
💬 Learn more: Signup Forms Theme Settings.
Step 5. Add a Teaser (Optional)
A teaser is a small button that stays visible after the flyout closes. When clicked, it reopens the full form.
To add: Scroll to the bottom menu in Form Builder → Add option → Teaser.
💡 Best for: Exit-intent flyouts or discount offers – gives visitors a second chance to sign up without re-triggering the full slide-in.
Step 6. Enable Your Form
Click Enable form in the top-left menu. Your flyout will go live immediately on your website.
Before enabling, double-check:
Mobile preview looks good (test on phone or use Form Builder's mobile view).
Targeting rules are correct (you don't want flyouts on checkout pages).
Legal consent checkbox is enabled if required (GDPR compliance). See GDPR guide.
Track Performance
After enabling, monitor results in Reports → Forms → Open your flyout's dedicated report.
Key metrics:
Views: How many visitors saw the flyout.
Submissions: How many submitted the form.
Signup rate: How many signed up as new subscribers.
💡 Tip: Run an A/B test to compare flyout vs. popup conversion rates for your audience.
FAQ
What's the difference between a flyout and a popup?
Flyouts slide in from the screen edge; popups appear in the center with a dimmed background. Both use the same targeting, display triggers, and customization options. Flyouts are less disruptive, especially on mobile.
Can I add a teaser to a flyout?
Yes. Add a teaser in the Form Builder (bottom menu → Add option → Teaser). After the flyout closes, the teaser button stays visible. Clicking it reopens the full form.
Should I use flyout or popup for mobile visitors?
Flyouts are better for mobile because they don't block the entire screen. Visitors can scroll and browse while the flyout stays visible on the side.
Can I collect both email and SMS in one flyout?
Yes. Add both Email Input and Phone Number fields. For higher completion rates, use a multi-step form to collect email in Step 1, phone in Step 2.
Does flyout work with exit intent on mobile?
Yes. Exit intent on mobile is based on rapid upward scroll (detected when visitors swipe to close the tab).
Can I change which side the flyout appears on (left vs. right)?
Yes. Go to Theme settings → Form layout → Position and select Left or Right. This determines which screen edge the flyout slides in from.
Can I redirect visitors to a thank-you page after signup?
Flyout forms do not support automatic redirect. Instead, add a button to your Success message (after submission) that links to your thank-you page. Alternatively, use a Landing Page form for automatic redirect functionality.
Can I schedule my flyout to show only during specific dates (e.g., Black Friday)?
Yes. Go to Behavior → Schedule and set start/end dates. Your flyout will only appear during that timeframe. Perfect for seasonal campaigns, flash sales, or limited-time offers.
Need help with something? Our Support Team is ready to assist via in-app chat or at [email protected].