Most people fill out forms on their phone today, but your audience also accesses them from a notebook or tablet. To make sure your form looks great on any device, Yay! Forms lets you preview and customize the layout specifically for Desktop, Tablet, and Mobile — without having to maintain three separate forms.
How the device selector works
Above the editing canvas, you'll see a bar with three options: Desktop, Tablet, and Mobile.
- Desktop — the default base. Whatever you configure here is the reference for the other devices.
- Tablet — automatically inherits Desktop settings. Customize when you want something different.
- Mobile — inherits from Desktop by default, but with automatic adaptations for a better experience (larger buttons, repositioned images, etc.).
When the selected field has a device-specific override for Tablet or Mobile, a discreet blue dot appears on that device's tab. Hover to see details.
Available layouts per device
On Desktop and Tablet, you have 7 layout options for the media:
- Background (Full)
- Float left
- Float right
- Split left
- Split right
- Banner top
- Banner middle
On Mobile, some layouts are automatically adapted, because half-and-half side by side on a 6-inch screen doesn't work well:
- Split (left/right) → automatically becomes "image on top, content below".
- Float (left/right) → becomes "image inline above the content".
The layouts you can choose directly in Mobile mode are 4: Background, Split top (vertical), Banner top, and Banner middle. Split top is exclusive to Mobile: it splits image on top and content below, with fixed height, optimized for vertical mobile screens.
How to create a Mobile or Tablet-specific override
- Click the Mobile (or Tablet) tab above the canvas.
- Make the desired adjustment in the right sidebar. Each property can have a different value per device: layout, height, width, Image fit, Focal point, and even alt text. The most common case is to keep the same image across all devices and only vary these settings so it fits well on each screen; but you can also swap the media itself if you prefer.
- When you change something in Mobile or Tablet mode, a blue dot appears next to the modified property, indicating it has a device-specific override.
How to remove a device-specific override (revert to Desktop)
If you want to undo the override and have Mobile or Tablet inherit from Desktop again:
- Click the blue dot next to the property.
- The override is removed and that property reverts to whatever is configured on Desktop.
The dot stays on the device tab as long as at least one property of the field has an override. When all overrides are removed, it disappears.
Best practices
- Start with Mobile. Since the primary traffic for form responses tends to come from mobile, configure and preview Mobile first — that's the scenario where your form needs to be perfect.
- Then switch to Tablet and Desktop to check how it looks and adjust whatever needs to be different on those screens.
- Only customize per device when truly necessary. Each override increases your form's maintenance burden over time.
Related resources
- How to set the focal point and image fit
- How to change your image positioning
- How to add a video, GIF, image, or logo to your form
Support
If you have any questions or suggestions, send an email to [email protected]
Conclusion
With the device bar in the canvas and the override system marked by blue dots, you can ensure your form looks impeccable on any screen — without maintaining parallel forms. Start with Mobile (where most of your traffic typically lives), adjust what you need for Tablet and Desktop, and use the blue dot both as an indicator and as a shortcut to revert an override.