Skip to main content
Layout elements are non-input fields that help you structure and organize your forms, making them more readable, user-friendly, and visually appealing. They guide users through the form, provide context, and break up long sections into manageable parts. This guide covers the various layout elements available in Formora and how to use them effectively. Unlike input fields, layout elements don’t typically collect data and thus don’t have properties like “Required” or “Placeholder.” However, they may support conditional logic to be shown or hidden dynamically.

​
Available Layout Elements

Use headings to add titles or section headers within your form. This helps to create a clear hierarchy and group related fields.Use Cases:
  • Titling distinct sections (e.g., “Personal Information”, “Contact Details”, “Feedback Section”).
  • Breaking up long forms into logical parts.
  • Providing a main title for the form content itself (though the form also has its own overall title setting).
Specific Properties:
  • Text Content: The actual text of the heading.
  • Heading Level: Typically H1, H2, H3, H4, H5, H6, allowing you to set semantic and visual importance. (Formora may offer a simplified size selection like Small, Medium, Large).
  • Text Alignment: Left, center, or right alignment of the heading text.
  • Color & Font Styling: May inherit from form theme or allow specific overrides.
A heading element in a form, such as 'Section 1: Contact Information'.

Example: Heading element used to title a section of a form

Allows you to insert blocks of static text directly into your form. This is useful for providing instructions, disclaimers, explanations, or any other contextual information.Use Cases:
  • Providing detailed instructions for a complex section or field.
  • Displaying a welcome message or introduction at the start of a form.
  • Including disclaimers, terms and conditions, or privacy notes.
  • Adding descriptive text between fields.
Specific Properties:
  • Text Content: The paragraph text. Formora might support basic Markdown or a rich text editor for formatting (bold, italics, links, lists).
  • Text Alignment: Left, center, or right.
  • Color & Font Styling: Inherits from theme or allows overrides.
A static paragraph element used for instructional text in a form.

Example: Static Paragraph element providing instructions within a form

A visual separator, typically a horizontal line, used to create a clear break between different sections or groups of fields on your form.Use Cases:
  • Visually separating distinct sections of a single-page form.
  • Creating a pause point or logical break before a new group of questions.
Specific Properties:
  • Line Style: Solid (default), dashed, dotted.
  • Thickness: The weight or height of the line.
  • Color: The color of the divider line.
  • Margins/Padding: Space above and below the divider to control visual separation.
  • Width: Full width or a percentage of the form width.
A divider line element used to visually separate form sections.

Example: Divider element separating two sections of a form

Page breaks are fundamental to creating multi-page forms (forms with a layout_type of multi_page or similar). Inserting a page break divides your form into distinct steps or pages that users navigate sequentially.How it Works:
  • Adding a Page Break element in the Form Builder signifies the end of one page and the beginning of the next.
  • Formora will automatically add navigation controls (e.g., “Next” and “Previous” buttons) to multi-page forms.
  • A progress bar or step indicator is often displayed to show users their location within the form.
Use Cases:
  • Long surveys or questionnaires.
  • Complex application forms.
  • Step-by-step registration processes.
  • Quizzes or assessments divided into sections.
Associated Form-Level Settings (Not field properties, but related to multi-page layout):
  • Progress Bar Display: Show or hide a progress indicator.
  • Navigation Button Labels: Customize text for “Next”, “Previous”, “Submit” buttons.
  • Save and Continue Later: (If supported) Allows users to save partial progress on multi-page forms.
Illustration of a form with a page break, next/previous buttons, and a progress bar.

Example: A multi-page form showing a page break and navigation buttons

The “Page Break” might not be a draggable field from the toolbox but rather a function or property of how the multi_page layout type is handled, where each field potentially becomes its own page, or specific “break” elements are inserted. Refer to Layout & Theming for more on form layout types.

​
Using Layout Elements Effectively

  • Don’t Overuse: While helpful, too many layout elements can make a form feel cluttered. Use them purposefully.
  • Maintain Consistency: Use consistent heading levels and styling for a professional look.
  • Improve Flow: Use dividers and page breaks to guide the user logically through the form.
  • Provide Clarity: Use paragraph elements for necessary instructions right where users need them.
By thoughtfully incorporating layout elements, you can significantly improve the structure, clarity, and overall user experience of your Formora forms. Next, explore Advanced Input Fields for more specialized data collection needs.
⌘I