Responsive Mode in WYSIWYG Authoring
This feature is available through the early access program. To request access, send an email with your GitHub organization name and repository name from your official address to aem-forms-ea@adobe.com. For example, if the repository URL is https://github.com/adobe/abc, the organization name is adobe and the repository name is abc.
Introduction to Responsive Forms
In today鈥檚 multi-device world, your forms need to look great and function well on screens of all sizes - from desktop monitors to smartphones. The responsive mode in Universal Editor helps you achieve this by letting you preview and test your forms across different device sizes during the authoring process.
The Universal Editor enables you to create forms that automatically adapt to different screen sizes, providing an optimal user experience regardless of the device being used.
Preview Forms in Responsive Mode for Different Devices
The Universal Editor provides an Emulator icon located at the top-right corner of the screen that allows you to preview pages across different device sizes and test the behavior of your responsive design for a better user experience.
To preview a form in responsive mode:
-
Open the form in Universal editor for editing.
-
Click the
-
Select a device format:
- Desktop (default)
- Tablet
- Mobile
- Custom (specify width and height)
You can also use the Screen Rotator icon to toggle between portrait and landscape orientations when previewing on tablet or mobile devices.
The Universal Editor provides different emulators to preview forms on various devices. The table below lists the available emulator types along with their corresponding device representations:
Layout Capabilities
Universal Editor allows you to create easy-to-use forms that offer dynamic experiences to end users. The form layout controls how items or components are displayed in a form.
Universal Editor supports the following types of layouts for forms:
Panel Layout
Panel layout is useful for organizing related fields in a way that makes it easier to navigate and find corresponding content. The panel layout arranges form components within distinct sections or panels in forms.
Example: A job application form might use panels to separate 鈥淧ersonal Information,鈥 鈥淓ducation,鈥 鈥淲ork Experience,鈥 and 鈥淩eferences鈥 into distinct sections.
Responsive behavior: On smaller screens, panels typically stack vertically, maintaining their distinct groupings while adjusting to the narrower width.
You can use the panel component to add the panel layout in a form. For detailed instructions on how to configure various properties of the panel component, refer to the panel component article.
Wizard Layout
The wizard layout helps simplify a complex form by breaking it into distinct steps. Each step represents a different part of the process, and users navigate through the steps sequentially, often with Next and Back buttons. You can use the wizard layout to create a form that involves multiple sections or steps.
Example: An insurance claim form might use a wizard to guide users through providing incident details, uploading evidence, entering personal information, and reviewing the submission.
Responsive behavior: On mobile devices, the wizard maintains its step-by-step approach but adjusts the content within each step to fit the narrower screen, often stacking elements that would appear side-by-side on larger screens.
You can use the wizard component to add the wizard layout in a form. For detailed instructions on how to configure the various properties of the wizard component, refer to the wizard component article.
Accordion Layout
The accordion layout displays content in collapsible sections or panels in an Adaptive Form. When a section is expanded, it displays the content within, while other sections remain collapsed. This layout is ideal for displaying large amounts of information in a compact form.
Example: A product configuration form might use accordion sections for 鈥淏asic Options,鈥 鈥淎dvanced Features,鈥 鈥淎ccessories,鈥 and 鈥淧ayment Plans,鈥 allowing users to focus on one aspect at a time.
Responsive behavior: Accordions work particularly well on mobile devices as they naturally conserve vertical space by showing only the expanded content section, making them ideal for smaller screens.
You can use the accordion component to add the accordion layout in a form. For detailed instructions on how to configure the various properties of the accordion component, refer to the accordion component article.
How to choose the right layout?
It is important to select the right layout to optimize user experience and form functionality. The table helps you understand the different layout options available and guides you in selecting the most suitable layout based on your specific needs and use cases:
- Backward: 鈥淏ack鈥 button
- Optional skipping steps
Best Practices for Responsive Forms
To ensure your forms provide the best experience across all devices, follow these best practices:
-
Design for mobile first: Start by designing your form for mobile devices, then enhance for larger screens. This approach ensures the core functionality works on the smallest screens.
-
Use appropriate field types: Choose field types that work well on touch devices:
- Use dropdowns instead of radio buttons when there are many options
- Use date pickers designed for touch input
- Ensure buttons and touch targets are at least 44px x 44px
-
Simplify for smaller screens:
- Display fewer fields per row on mobile devices
- Consider hiding optional fields behind a 鈥淪how more鈥 option
- Break complex forms into more steps on mobile
-
Test thoroughly: Always test your forms on actual devices or using the emulator mode in Universal Editor to ensure they function properly across screen sizes.
-
Consider loading times: Optimize image sizes and minimize required resources, especially for mobile users who may have slower connections.