Mobile traffic continues to grow year over year, which means your popup forms need to work flawlessly on small screens.
This guide shows you how to create separate mobile and desktop forms, adjust sizing and timing to comply with Google's guidelines.
Note: This guide applies to Popup and Flyout forms only. Embedded and Landing Page forms display on all devices by default and do not have visibility settings. Learn more about form types.
Create Separate Mobile & Desktop Forms
While Omnisend forms automatically adjust to screen width, desktop designs may not display optimally on mobile, images can get cut off, forms may become too long, and text may be harder to read on small screens. To ensure the best mobile experience, create optimized versions for each device:
Step 1. Go to Forms → select your popup → click the three-dot menu → Copy.
💡 You can also create a new mobile-only form. Go to Forms → Create form → Form settings → Mobile-only.
Step 2. Rename the duplicate (e.g., "Spring Sale Popup – Mobile").
Step 3. Optimize the mobile version:
Reduce width to 300–500px (Theme settings → Form layout).
Use single-field layout (email only) or max 2 fields.
Adjust or remove images (or position at top via Theme settings → Layout).
Increase button size for tap-friendliness.
Reduce text – mobile users have shorter attention spans.
Step 4. Set Behavior → Visibility to Mobile only in the mobile form.
Step 5. In your original form, set Behavior → Visibility to Desktop only.
Step 6. Save and enable both forms.
💡 Tip: Test both forms on actual devices to see how they behave.
Google Mobile Friendly Rules for Popups
Google penalizes mobile popups that block content immediately after a user lands on a page. Avoid these practices:
Showing a popup that covers the main content immediately after the user navigates from search results.
Displaying a standalone interstitial, the user must dismiss before accessing content.
Using a layout where above-the-fold content appears as an interstitial.
Allowed popups:
Legal obligation notices (cookie consent, age verification).
Login dialogs for private content.
Banners using reasonable screen space (easily dismissible).
Best Practices for Mobile Popups
Once you've created your mobile-optimized form, follow these best practices to maximize conversions and comply with Google's mobile-friendly guidelines. These tips help you balance visibility with user experience.
1. Adjust Popup Size
Mobile popups shouldn't fill the entire screen. Reduce form width in Theme settings → Form layout (recommended: 300–500px for mobile).
Adjust text size: Select text items and choose smaller font sizes.
💡 Keep the copy brief as mobile users scan quickly.
Adjust image: Images may not display as expected on mobile due to screen size. To control mobile image display, adjust or remove images in your mobile form, or position them at the top via Theme settings → Layout.
2. Use Proper Timing
Show popups after users engage with your content (scroll depth, page visits, or time on page). Avoid immediate display; Google penalizes popups that block content on arrival.
Adjust timing in Behavior → Display:
Time on page: 6–10 seconds.
Scroll depth: 50% or more.
Page visits: 2+ pages.
Exit intent: When user is about to leave (works on mobile via scroll speed detection).
3. Set Visibility for Mobile & Desktop
Create separate forms for mobile and desktop users to ensure optimal layout for each device. Adjust visibility in Behavior → Visibility:
Mobile only (smartphones and tablets).
Desktop only (laptops and desktops).
4. Target Specific Pages
Don't show popups on every page. Use Behavior → Targeting to control where forms appear:
Appears on URL: Show on specific pages (e.g., prod uct pages, blog posts).
Does not appear on URL: Exclude checkout, cart, or thank-you pages.
Visitor targeting: Show to all visitors, new visitors only, or existing contacts.
💡 Tip: If you used "contains" with your homepage URL (e.g., "mysite.com"), the popup shows on all pages because every page contains that URL. To show the form on homepage only, change targeting to "is" with your exact homepage URL.
5. Use Clear, Actionable CTAs
Mobile popups are small. Make your call to action obvious. Use action verbs that indicate exactly what happens when users submit:
✅ "Get 15% Off"
✅ "Send My Discount"
✅ "Subscribe & Save"
❌ "Submit" (vague)
6. Limit Form Fields
Request only essential information. Mobile users won't fill out lengthy forms; phones are for quick actions.
Recommended:
Email only (fastest conversion)
Email + phone (if running SMS campaigns)
Email + first name (for personalization)
Avoid: Multiple fields, checkboxes, dropdowns.
7. Adjust Teaser Size for Mobile
If your popup includes a teaser (clickable tab at screen edge), reduce font size in Teaser → Style to make the teaser smaller on mobile.
FAQ
Why doesn't my embedded form have visibility settings?
Embedded forms don't have device visibility settings. They display wherever you place the embed code, on all devices. If you need device-specific control (mobile-only or desktop-only), use a Popup or Flyout form instead, which include Behavior → Visibility options.
Can I show different images on mobile vs desktop?
Yes, but you need to create two separate forms. Design your desktop form with the images you want, then duplicate it. In the mobile version, adjust or remove images, then set Behavior → Visibility to Mobile only. Set your desktop form to Desktop only.
Need someone to walk you through it? Contact our Support Team through in-app chat or at [email protected].