Using Layout Options Settings in Divi Form Builder

The Layout Options in Divi Form Builder allow you to customize the appearance and functionality of your form fields. These settings enable you to add placeholders, adjust widths, and style various field types, enhancing the user experience.

info

Access Layout Options settings from the Field Settings

Layout Options Settings

1. General Settings
   1. Columns for Grid: Define the number of columns for the grid layout.
   2. Field Label Position: Choose the position of the field label.
   3. Enable Placeholder: Toggle this to enable a placeholder in the input field.
      1. Custom Placeholder Text: Enter the placeholder text that will appear inside the input field.
   4. Add a Description: Provide a description for the field.
      1. Description Location: Choose where the description will be displayed (e.g., below the field).
      2. Description Text: Enter the text for the description.
2. Input, Email and Password Settings
   1. Enable Icon on the Input
      1. Select Icon: Choose an icon to display inside the input field.
      2. Icon Color: Set the color of the icon.
      3. Icon Font Size: Adjust the font size of the icon.
3. Checkbox and Radio Settings
   1. Radio/Checkbox Field Style
   2. Make Radio/Checkbox Options in Grid or Line:
      1. Show Radio Options in One Line: Display radio options in a single horizontal line.
      2. Gap Between Radio/Checkbox Items: Set the spacing between individual radio or checkbox items.
      3. Grid Columns: Define the number of columns for displaying radio or checkbox items in a grid format.
4. Select Settings
   1. Select2: Enable the Select2 library for enhanced select dropdown functionality. This feature improves the user experience with search and better styling options. Make sure to enable Select2 in the Extra section of the Form Settings as well.
5. Image Upload and File Upload Settings
   1. Upload Description: Add a description to the upload field to guide users.
   2. Show Upload Icon:
      1. Upload Icon Style: Choose the style of the upload icon.
      2. Icon/Text Alignment: Adjust the alignment of the icon and text within the upload field.
      3. Upload Icon Drag Animation: Enable or disable animation for the upload icon when dragging files.

Additional Tips

By utilizing the Layout Options in Divi Form Builder, you can create more visually appealing and user-friendly forms. These settings provide flexibility in styling your form fields, ensuring they align with the overall design of your website. For more detailed information on Field Layout Options, please visit the Form Module documentation.