Guide to Optimizing Popup and Flyout Forms for Mobile

read
Last updated at:

Overview 

Learn about mobile form design best practices, including how to optimize your Klaviyo popup and flyout forms for mobile visitors. 

General Guidelines for Mobile Form Design 

Online shoppers are increasingly using their mobile devices to discover new stores, browse products, and make purchases. Around 70% of Klaviyo form views come from mobile devices, so it’s more important than ever to make sure your website looks as good on mobile as it does on desktops, and that includes your signup forms. 

General Form Best Practices

Many of the best practices for desktop forms apply to mobile devices as well: 

  • Make sure it’s easy to close, so visitors don’t get frustrated and leave your site 
  • Keep it short and sweet: consider a multi-step form if you have a lot of fields
  • Use colors with high contrast for readability, especially for your form’s submit button
  • Add value to your visitor’s experience by offering a discount or incentive

Mobile-Specific Form Best Practices

In addition to these universal guidelines, there are mobile-specific best practices that can take your mobile forms to the next level. 

  • If your form collects SMS consent, consider using click-to-text, so visitors can subscribe to SMS without typing in their phone number
  • Keep content to a single column, so it’s easy to fill out on a small screen
  • Use concise field labels that fit on a single line 
  • If your form is set to display on all devices and includes a side image, leave the “Display on mobile” side image setting off 
  • Use a form teaser so mobile visitors can open and close the form as desired

SEO and Mobile Forms 

It’s important to consider mobile SEO best practices, particularly when creating forms on your homepage or other landing pages. Forms that appear on common organic search landing pages shouldn’t cover up your site’s content or disrupt a visitor’s experience; otherwise, the page may be penalized by search algorithms. Learn more about intrusive interstitials and SEO.

To avoid Google’s penalty on sites with intrusive interstitials, use mobile forms with a long time delay and a teaser that displays before the form is opened. This allows site visitors to browse your site and open the form when they’re ready, so it doesn’t cover up content they want to view.

Optimizing Popups

A popup form appears in the middle of a visitor’s screen, often covering much of the page’s content. While a popup is visible, visitors can’t interact with other elements of the page: they’ll need to either close the form or fill it out in order to continue browsing. This makes popups more disruptive, but also higher-converting, than other form types. 

You can choose whether the popup closes if a visitor taps or clicks outside the form area using the Dismissal settings in the Targeting & Behaviors section. 

form_dismissal.jpg

Disabling the Click outside the form to close setting on mobile can help decrease accidental form closures, but make sure your close icon (the form’s X button) is large enough to be easily clicked — even on a small screen. 

For example, the close icon in the form on the left may be hard to click on a mobile device. However, the close icon in the form on the right is easy to see and click. 

side_by_side_forms.jpg

To visually separate your popup from the rest of your site, use one or both of the following Form Background settings found in the Styles section: 

  • Overlay color
    Use a semi-opaque overlay to draw focus to your form and dim your site’s content as long as the form is open 
  • Drop shadow
    A drop shadow provides subtle shading around your form to separate it from the surrounding content 

These settings will be reflected in both the desktop and mobile versions of your form. 

drop_shadow.gif

By default, mobile popups are centered on the screen and run edge-to-edge. To make the form look more like a popup on mobile devices, add left and right margins in the Form Styles section of the Styles section. 

side_margin.gif

Optimizing Flyouts 

When a flyout form appears, mobile visitors are still able to interact with your site behind the form, unless Mobile Overlay is turned on. They can choose to close the form, fill it out, or leave it open as they continue browsing. In general, this makes flyouts less intrusive than popups. 

By default, a flyout form will appear in the same way on both desktop and mobile. For example, if it’s set to display in the bottom right corner, it will do so on all device types. To optimize your flyout for a mobile device, navigate to the Styles section, then select Dock to Bottom or Dock to Top from the Mobile Flyout Position menu. When this setting is selected, your form will fly out from the top or bottom of the screen and cover a portion of the screen from edge to edge.

flyout.gif

To visually separate your flyout from the rest of your site, use a Mobile Overlay or Drop Shadow (found in the Form Background settings of the Styles section). 

mobile_overlay.gif

Mobile Overlay

Mobile overlays are semi-transparent elements that draw focus to your form and dim your site’s other content as long as the form is open. When this setting is turned on, mobile visitors will not be able to click any other elements on your site until they fill out or close the form. Mobile overlays on flyout forms do not appear when the form is viewed on a desktop. 

Drop Shadow

A drop shadow provides subtle shading around your form to separate it from the surrounding content. Drop shadow settings affect both the mobile and desktop versions of your form. 

Next Steps

Once you've optimized your forms for mobile devices, try A/B testing your form designs to better understand your site visitors' preferences. 

Additional Resources 




x
Was this article helpful?
6 out of 10 found this helpful