Optimizing Form Layout for Responsive Mobile Views

Introduction

Configure the elements of your form to transition from a two-column layout to a single-column layout as the screen width decreases. This adjustment significantly enhances the user experience on mobile interfaces.

How does it work?

Follow these steps to implement the changes effectively.

1. Add the following CSS to a Custom HTML element within your form. This code ensures that form elements adapt responsively to screen size changes:
   

   <style>
   @media only screen and (min-width: 900px) {
       #section1 .form-cell{
           width: 48%;
       }
   }
   @media only screen and (max-width: 900px) {
       #section1 .form-cell{
           width: 98%;
       }
   }
   </style>

2. To apply these styles effectively, adjust the column properties of the form section:
   
   

   • Access the column settings and set the layout to Horizontal Layout.
     

     The behavior of the Form Layout

     • Above 900px screen width: The form displays in a two-column layout, utilizing approximately half the width for each column.
     • Below 900px screen width: The layout shifts to a single column, with each form element expanding to occupy most of the column width, aligning left-to-right.
       
       

     This approach maintains a clean, organized appearance and ensures that forms remain user-friendly and accessible on smaller screens. With these simple steps, you can significantly improve the mobile responsiveness of your forms.