This article will walk you through using the powerful Mobile Editor in SourCherry’s Forms, Surveys, and Quizzes builder. Customize visuals and text for mobile devices without affecting your desktop layout — for a perfectly responsive and engaging experience.
TABLE OF CONTENTS
- What is the Mobile Editor?
- Key Benefits of the Mobile Editor
- How To Use the Mobile Editor
- Mobile Header & Background Images
- Mobile Font Styling
- Frequently Asked Questions
What is the Mobile Editor?
The Mobile Editor is a new feature in SourCherry that gives you dedicated tools to customize how your forms, surveys, and quizzes look on mobile devices. Instead of compromising between mobile and desktop, you can now style each experience independently — ensuring your content always looks polished and performs well across every screen size.
Key Benefits of the Mobile Editor
Delivering a smooth, mobile-first experience is key to keeping users engaged. This feature allows you to fine-tune visual elements on mobile without affecting your desktop design.
Upload custom header and background images just for mobile
Independently adjust font family, font size, and font weight
Style specific text elements: Labels, Short Labels, Placeholders
Preview and test mobile design before publishing
Ensure forms remain user-friendly and on-brand across devices
Increase completion rates by enhancing the mobile user experience
How To Use the Mobile Editor
Follow these steps to activate and configure your form, survey, or quiz using the Mobile Editor.
Open any form, survey, or quiz from your builder dashboard.
Click the Device Toggle at the top of the screen to switch to Mobile View.
In Mobile View, the right-hand panel will now offer mobile-specific settings:
Layout Style: Choose your preferred mobile layout.
Mobile Header Image: Upload an image specifically for mobile headers.
Mobile Background Image: Upload a mobile-specific background image.
Font Settings:
Adjust Font Family
Change Font Size
Modify Font Weight
These font settings apply individually to:
Labels (e.g., “First Name”)
Short Labels (e.g., field headers in condensed formats)
Placeholder Text (e.g., “Enter your email”)
Once complete, click Save, then Preview to test your mobile design.
5. When satisfied, publish your form — now fully mobile-optimized!
Separate Style Panels for Desktop and Mobile
Independent style controls keep each device crisp without CSS overrides. Match layout to screen size while preserving brand consistency.
Per-device style properties
- Background color, padding, border, font weight (add alignment, line-height, letter spacing if present – Needs Confirmation)
- Styles set on Mobile do not overwrite Desktop, and vice versa.
- True 0 px padding on Mobile: In Mobile View, you can set Top and Bottom padding to 0 px for true zero spacing. Mobile styles are device-scoped, so this does not change Desktop padding.
Content vs. Style on Mobile
Content and presentation are configured separately. Edit mobile-specific text for clarity, and fine-tune mobile-only styles for legibility.
Behavior
- Content: You may use different copy on Mobile.
- Style: Spacing, borders, and typography are device-scoped.
- Reset/Copy: If available, use Reset or Copy from Desktop to speed setup (Needs Confirmation).
Mobile Header & Background Images
Images scale differently on mobile screens. With this feature, you can upload images specifically optimized for small devices, ensuring your design looks clean and purposeful.
Why this matters:
Mobile users interact vertically — use tighter, portrait-style images.
Prevent image cropping or distortion that often happens when desktop images scale down.
Mobile Font Styling
Text that reads well on desktop can feel cramped or oversized on a mobile screen. Use the Mobile Editor to adjust font elements individually for a smoother mobile reading experience.
Available Controls:
Font Family: Choose from available system or custom fonts
Font Size: Set exact px size for clarity on small screens
Font Weight: Use bold, light, or normal to enhance visibility
Elements Affected:
Labels — These guide users to fill fields properly
Short Labels — Ideal for condensed layouts or multi-column sections
Placeholders — Useful for subtle input cues
Frequently Asked Questions
Q: Will changes in Mobile View affect my desktop layout?
No — all edits made in Mobile View apply only to mobile. Your desktop design remains untouched.
Q: Can I use different header and background images for mobile?
Yes! Upload mobile-specific images that better fit smaller screen ratios without affecting your desktop version.
Q: Can I preview only the mobile version before publishing?
Absolutely. Use the Preview button while in Mobile View to test what your users will see on mobile.
Q: Are font changes global or element-specific?
Font settings can be configured individually for Labels, Short Labels, and Placeholders — giving you complete control.
Q: Do all SourCherry plans include the Mobile Editor?
Yes, this feature is included in all plans that offer Forms, Surveys, or Quizzes.
Next Steps
Test your top forms with mobile customization to improve engagement.
Split test mobile-optimized vs. shared designs.
Explore more ways to enhance UX with styling options and smart fields.
Analyze mobile-specific conversion data using analytics tools.