Optimizing Forms, Surveys, and Quizzes for Mobile Devices

Introduction to Mobile Optimization

Your audience interacts with your content on a variety of devices. To ensure forms, surveys, and quizzes provide the best possible experience on smartphones and tablets, your CRM includes a dedicated Mobile Editor. This tool allows you to customize the visual presentation of your content specifically for mobile screens, independent of your desktop design, ensuring a professional and user-friendly experience everywhere.

Understanding the Mobile Editor

The Mobile Editor is a specialized mode within the form, survey, and quiz builder. It provides a separate set of styling controls that apply only when your content is viewed on a mobile device. This means you can fine-tune layouts, images, and typography for smaller screens without altering or compromising your carefully crafted desktop version.

Activating the Mobile Editor

To begin customizing for mobile, follow these steps:

1. Open an existing form, survey, or quiz from your dashboard, or create a new one.
2. Look for the device toggle control near the top of the builder screen.
3. Click this toggle to switch from the default Desktop View to Mobile View.

Once in Mobile View, the settings panel on the right will update to show options specific to mobile styling.

Mobile-Specific Styling Options

Layout and Images

You can tailor the visual structure for mobile users:

• Layout Style: Select a layout optimized for vertical scrolling on mobile devices.
• Mobile Header Image: Upload a distinct image to be used in the header when viewed on mobile. This allows you to use a portrait-oriented or cropped version that fits small screens better than a desktop image might.
• Mobile Background Image: Similarly, you can set a background image specifically for the mobile view to ensure it displays correctly without unwanted cropping or distortion.

Typography for Mobile

Text that is perfectly legible on a desktop monitor can be difficult to read on a phone. The Mobile Editor lets you adjust font properties for key text elements individually:

• Font Family: Choose from available fonts.
• Font Size: Set the text size in pixels for optimal readability.
• Font Weight: Make text bold, light, or normal to improve visibility.

These typography settings can be configured separately for three types of text within your form fields:

1. Labels: The text that identifies a field (e.g., "Email Address").
2. Short Labels: A condensed version of the label, useful in tighter layouts.
3. Placeholder Text: The example text inside a field before a user types (e.g., "you@example.com").

Advanced Styling and Spacing

The editor provides independent control over other style properties like background color, padding, borders, and alignment for the mobile view. Styles you set here do not overwrite your desktop settings, and vice versa. For instance, you can set top and bottom padding to zero pixels in the mobile view to create a compact layout without affecting the spacing on the desktop version.

Previewing and Publishing

Before making your changes live, always preview your work. While in Mobile View, use the Preview button to see exactly how your form will appear on a mobile device. Test the user experience to ensure all elements are clear and easy to interact with. Once you are satisfied, save your changes and publish the form. It will now automatically display the appropriate, optimized version based on the device used to view it.

Common Questions

Do changes in the Mobile Editor affect the desktop design?

No. All edits made while in Mobile View are scoped exclusively to mobile devices. Your desktop layout and styling remain completely unchanged.

Can I use different text content on the mobile version?

Yes. You can edit the text of labels, placeholders, and other content directly within the Mobile View to provide copy that might be clearer or more concise for mobile users. This content change is separate from the visual style settings.

Is there a way to copy styles from the desktop version to speed up setup?

The builder may include options to reset styles or copy certain properties from the desktop view as a starting point for your mobile customization. Look for relevant buttons or options in the mobile styling panel.

Best Practices

Use the Mobile Editor to audit your most important forms and surveys. Consider using portrait-oriented images for mobile headers and backgrounds. Prioritize legibility by increasing font sizes or weights for key labels on smaller screens. By providing a seamless mobile experience, you can improve user engagement and increase completion rates for your forms.