Getting Started with Smartform Design
Smartforms are interactive forms you can build and customize in Studio. The design panel lets you create, style, and configure every aspect of your form, from layout to logic.
Opening the Design Panel
- Go to the Studio workspace.
- Select the Smartforms tab.
- Click on the form you want to design or create a new one.
Key Features
- Drag & Drop Builder: Easily add sections, rows, columns, and items to your form.
- Live Preview: Instantly see changes as you design.
- Properties Panel: Configure appearance, behavior, and logic for each element.
- Actions: Publish, activate, or duplicate your Smartform.
Smartform design elements
| Design elements | Explained |
|---|---|
| Page | A page form can be styled with background colors, margins, paddings, and type of form |
| Section | A form can be divided into sections that can be styled to fit design requirements |
| Row | A section can be divided into rows which can define margins, paddings, and colors |
| Column | Columns can be inserted into rows and positioned through span settings. A column can be defined with paddings, margins, and colors |
| Elements | An element can be placed into a row or column |
Typical Workflow
- Add Sections: Start by adding sections to organize your form.
- Insert Rows & Columns: Structure your layout for optimal user experience.
- Add Items: Place input fields, text, images, and other elements.
- Configure Properties: Set alignment, colors, margins, and more.
- Set Visibility Rules: Make your form dynamic by showing/hiding elements based on user input.
- Preview & Test: Use the preview to ensure everything works as expected.
- Publish: Save and activate your Smartform for users.
Tips
- Use duplication to quickly copy elements and maintain consistency.
- Preview your form often to catch layout or logic issues early.
- Explore the Construction panel for advanced logic and workflow configuration.
Ready to start? Jump into the Action, Page, or Document guides for more details on each design feature!