Choose a look and feel, then add the right fields for your use case.
Overview
This chapter helps you design a form that feels easy and trustworthy for users. A good layout reduces confusion, improves completion, and makes your brand look professional
You will learn how to:
- Choose a layout style (one page, multi‑step/wizard, two‑column grid, compact, etc.)
- Select a theme (light/dark and other color presets)
- Add the right field types for your use case (email, phone, dropdowns, dates, file uploads, and more)
- Improve clarity with labels, placeholders, help text, and field widths
Example: For “Request a Quote”, you might use a two‑column layout for contact details, then a wider text area for requirements. For “Event Registration”, a wizard layout can make a longer form feel simpler.
How It Works
Layouts control structure (one page, multi-step, two columns). Themes set colors. Header layout places logo and title. Field settings control labels, required status, help text, and width.
Step-by-Step Guide
- Open your form in Odoo.
- Set Layout and Theme to match your brand.
- Configure Header Layout (logo and title position) or hide header.
- Add fields and set placeholders, help text, and required flags.
- For dropdowns/radio, add options (one per line).
- Preview and adjust widths to improve readability.
Fields Table
| Label | Description | Example |
|---|---|---|
Layout |
Overall structure: Standard, Card, Minimal, Wizard, Grid, etc. |
Grid (2 Columns) |
Theme |
Color style: Light, Dark, Blue, Green, etc. |
Light |
Header layout |
How logo and title are arranged (Centered, Split, Banner, etc.). |
Centered |
Hide header |
Hides the title/logo area if you want a minimal look. |
Off |
Main accent color |
Main accent color for buttons and highlights. |
#007bff |
Question type |
Type of question: text, email, phone, number, date, file, etc. |
|
Choices (options) |
List of choices for dropdown or radio (one per line). |
Basic |
Field width |
Field width in layout (25%, 50%, 75%, 100%). |
50% |
Fields explanation
Layout
The overall form structure (example: wizard, grid, standard)
Theme
The preset color style of the form
Header layout
How the logo/title area is arranged at the top
Hide header
Hides the header area (title/description/logo)
Main accent color
Main highlight color (buttons and key accents)
Question type
The kind of input (text, email, phone, date, etc.)
Choices (options)
The list of choices for dropdown/radio/checkbox fields
Field width
How wide the field appears (25% to 100%)
Tips
- Use two columns for short inputs, one column for long text.
- Keep labels short and clear.
- Use help text for what “good” looks like (e.g., “Work email only”).
Common Mistakes
- Adding a dropdown without options — add at least one choice.
- Using long labels that wrap on mobile.
- Forgetting to set required for must-have questions.