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. 

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

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 

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, or the page may be penalized by search algorithms. Learn more about intrusive interstitials and SEO

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 Behaviors tab. 

Click_outside_the_form_to_close_setting_with_Mobile_disabled.png

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 below may be hard to click on a mobile device: 

Form_Close_icon_-_too_small.png

However, this form’s close icon is easy to see and access: 

Form_Close_icon_-_big_enough.png

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 tab: 

  • 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. 

Dropshadow_on_popup.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 tab. 

Popup_left_right_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 tab, 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.

Dock_flyout_to_top.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 tab). 

Flyout_drop_shadow.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. 

Additional Resources 




x
Was this article helpful?
1 out of 1 found this helpful