A horizontal rule divider is used to create a clear separation between different sections or groups of fields within a form. It is shown as a grey horizontal line across the form and helps improve readability and user experience by visually breaking up long or complex forms. While it doesn’t collect or display data, it plays an important role in organizing content, making the form easier to scan and understand.
When you should use a horizontal rule
- To break up long and complex pages in a form by visually separating sections
- To improve readability by grouping related fields together
When you should avoid using a horizontal rule
- In very short forms as it may result in cluttering the layout
- If your form already uses a lot of them - overusing dividers may make the form harder to follow
Guidelines
Do:
- Pair dividers with section headings to clearly explain what each section is about
- Use sparingly and only when required to not overwhelm the customer
Don't:
- Use the dividers purely for decorative purposes - it should serve a purpose
Add a name element
- Navigate to Structure > Webforms > Forms and locate your webform by typing its name into the search.
- Open your webform and navigate to Build > + Add element.
- In the Select an element popup, select the Horizontal rule element.
- Add a unique Key so that it can be identified in the form
- Select the Save + Add element button to add the divider to the form
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.