Auto-adjust fields in form sections | Zoho Creator Help

Auto-adjust fields in form sections

In a nutshell   

The Field Alignment form property allows you to control how form fields are aligned in forms with multiple sections. This helps avoid unnecessary spaces in each section and gives a better organized layout.

Availability 

This property:

  1. Can be enabled in all Creator pricing plans
  2. Can only be enabled by the super admin, admins, and developers, while other users will be able to view it in your application's live mode with relevant permissions.

 

1. Overview 

Forms can have multiple sections, which helps group the fields in your form so it appears more organized. When multiple sections are present in a form, all the fields in the form are considered for alignment, irrespective of their sections. This might result in uneven spacing or additional white spaces due to fields with lengthier inputs.

 

To overcome this and achieve an optimized layout, you can use the Field Alignment property. Enabling this will adjust fields in each section independently without depending on the field lengths in other sections. This is especially useful when certain sections have multi-line or rich text fields.

 

The below form shows how fields appear without enabling this property.

 

After enabling the Field Alignment property, the same form appears as below, giving a more visually consistent experience.

 

 

1.1 When to use this property 

  1. Your form has multiple sections
  2. ​You see misaligned fields with uneven spacing or additional white spaces

2. See how it works 


 

3. Use case 

Consider a Recruitment Management app where candidates enter their details in an application form. The form has multiple sections that include personal details, educational qualifications, and certification details. Since each section contains input fields of varying sizes, uneven spacing and white spaces can occur. This might cause candidates to overlook fields, mistakenly assuming white spaces mean there are no fields to complete. To address this, the Field Alignment property can be enabled for the application form to remove uneven spacing and optimize the overall layout.

4. Steps to enable this property 

  1. Go to the edit mode of your app.
  2. Select the required form and click Open Form Builder.
  3. Click the icon in the top-right corner of the builder; the Form Properties slider will appear.
  4. Tick the checkbox Auto-adjust fields in each section beneath Field Alignment.  
  5. In the live mode of the application, you can then view the fields aligned in each section independently.

 

  1. Understand Forms
  2. Manage forms