# Smart Form Patterns

**Design patterns** are proven, reusable solutions to common design problems.\
In the context of Smart Forms, design patterns provide a **shared language** between designers and developers, helping create forms that are **consistent, usable, and efficient**.

Using established UI patterns reduces trial‑and‑error, improves user confidence, and ensures Smart Forms are easier to understand and use.\
ONEWEB Smart Forms are built around widely accepted UI patterns that support **clarity, feedback, structure, and interaction**.

The following Smart Form patterns are supported natively on the ONEWEB platform.

***

#### WYSIWYG Pattern (What You See Is What You Get)

ONEWEB Smart Forms follow the **WYSIWYG** pattern, allowing designers to see exactly how a form will look while building it.

This pattern:

* Shows formatted results during editing
* Provides immediate visual feedback
* Increases confidence during form design
* Enables faster iteration and refinement

WYSIWYG helps designers and users achieve accurate, production‑ready results without guesswork.

***

#### Page Grid Pattern

The **Page Grid** pattern is used to organize content using rows and columns.

This pattern helps to:

* Align form elements consistently
* Create clear primary and secondary areas of focus
* Apply layout principles such as balance and proportion

Grid layouts improve readability and make complex forms easier to scan.

***

#### Input Feedback Pattern

The **Input Feedback** pattern ensures users receive immediate feedback after entering data.

This includes validation rules such as:

* **Presence validation** – required fields must be filled
* **Inclusion validation** – values must match allowed ranges or formats
* **Acceptance validation** – confirmation actions (e.g. terms and conditions)
* **Length validation** – minimum or maximum character limits
* **Uniqueness validation** – values must be unique (e.g. usernames)

When input fails validation, clear error messages guide users on how to correct their entries before resubmission.

***

#### Drag and Drop Pattern

The **Drag and Drop** pattern allows users to:

* Rearrange elements visually
* Move content from one area to another
* Perform actions through direct manipulation

This pattern improves efficiency and makes interaction more intuitive, especially during form design and layout configuration.

***

#### Calendar Picker Pattern

The **Calendar Picker** pattern simplifies date selection.

It is used when users need to:

* Select a specific date
* Choose a date range
* Filter or search data by date

Calendar pickers reduce input errors and improve accuracy for date‑based data.

***

#### Structured Input Pattern

The **Structured Input** pattern is used when user input must follow a predefined format.

Typical use cases include:

* Phone numbers
* Zip or postal codes
* Dates and time values

This pattern ensures data consistency and reduces validation errors.

***

#### Live Preview Pattern

The **Live Preview** pattern allows users to:

* See the impact of changes immediately
* Validate form behavior as fields are modified
* Adjust layouts and rules in real time

Live previews support rapid iteration and reduce rework during Smart Form design.

***

#### Morphing Controls Pattern

The **Morphing Controls** pattern displays only the controls relevant to the current context.

This pattern is useful when:

* Certain controls are needed only in specific modes
* Forms should remain uncluttered
* Advanced options should appear only when required

Morphing controls help keep Smart Forms focused and easy to use.

***

#### Navigation Tab Pattern

The **Navigation Tab** pattern separates content into logical sections using tabs.

ONEWEB supports:

* **General Tabs**
* **Two‑Layer Tab structures**

Each tab can contain one or more **1‑1 or 1‑Many modules**, allowing complex forms to be broken into manageable sections while maintaining clear navigation.

***

#### Module Tab Pattern

The **Module Tab** pattern organizes content into sections within a single screen without page refresh.

This pattern is effective when:

* Each tab contains different data structures
* Modules vary in layout (1‑1 vs 1‑Many)
* Content should be viewed independently rather than sequentially

Module tabs help manage complexity while keeping users within a single interaction context.

***

#### Design Perspective

As part of **Smart Form design best practices**:

* Choose patterns based on user tasks, not visual preference
* Combine patterns where appropriate, but avoid over‑complexity
* Keep forms structured, responsive, and predictable

Smart Form patterns provide a reliable foundation for building scalable, user‑friendly forms on ONEWEB.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/smart-forms/smart-form-patterns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.