Goloris App Logo

Forms & Interactions

Learn how to create interactive forms that collect user input, trigger actions, and connect to your data sources. Build engaging experiences without writing code.

Forms let users make reservations, submit feedback, or sign up — and you can handle all of it visually.

Turning Interaction into Action

Forms transform a static app into an interactive experience. They enable users to submit data, make reservations, provide feedback, and engage with your app in meaningful ways.

📋

Illustration showing a form feeding data into a table or workflow

1. Adding a Form Component

Forms are the bridge between your users and your app's data. Start by adding a form component to your page.

Steps

  1. 1In the Builder, open the Design Tools panel on the left
  2. 2Drag the Form component into the canvas where you want it
  3. 3Add fields inside the form (e.g., Name, Email, Message, Date)
  4. 4Use the "+ Add Field" button to expand the form with more inputs
  5. 5Forms can be standalone or embedded inside a Detail Page
📸

Screenshot of a form being added to the Builder canvas

2. Configuring Form Fields

Each field in your form can be customized through the Properties panel. Configure labels, placeholders, types, and default values.

Steps

  1. 1Select a field in your form to open the Properties panel
  2. 2Label: Set the visible text for each field
  3. 3Placeholder: Add example text inside the input
  4. 4Type: Choose text, number, date, dropdown, toggle, etc.
  5. 5Required: Mark fields as mandatory
  6. 6Default Value: Pre-fill with static or dynamic @Field values
📸

Properties panel screenshot showing field options

3. Adding Validation Rules

Validation ensures users provide correct data. Define rules to check required fields, formats, and limits.

Steps

  1. 1Required fields: Mark essential fields as mandatory
  2. 2Minimum/Maximum length: Set character limits for text fields
  3. 3Numeric or email format: Validate data types automatically
  4. 4Custom validation messages: Provide clear error feedback
  5. 5Conditional validation: Coming soon - validate based on other fields
📸

Example showing invalid field state with red outline and error message

4. Defining Form Actions (onSubmit)

Decide what happens when users submit your form. You can save data, send webhooks, navigate, or show messages.

Available Actions

Save to Data Source

Link to a table and automatically store form responses.

Send Webhook

Forward data to external services or APIs for processing.

Navigate

Go to another page after successful submission.

Show Message

Display a confirmation or toast notification to the user.

Tip: Combine multiple actions for multi-step flows (e.g., Save + Navigate + Show Message).

📸

Visual showing form submit triggering a success message

5. Button & Interaction Events

All clickable elements in Goloris can trigger actions. Configure buttons, lists, and banners to create interactive experiences.

Steps

  1. 1Buttons: Navigate, share, open URL, or trigger form submit
  2. 2Lists: onItemClick → navigate to Detail page
  3. 3Banners: CTA button → link to another section
  4. 4Use the Actions tab in Properties panel to assign logic
  5. 5Combine multiple actions for complex workflows
📸

Properties panel opened on the Actions tab

6. Using Data Binding with Forms

Forms can read and prefill data dynamically using @Field syntax. Connect forms to data sources for smarter, personalized experiences.

Steps

  1. 1Use @Field syntax to auto-fill known data (e.g., @UserName, @Email)
  2. 2Combine form fields with table lookups for dropdown options
  3. 3Pre-fill forms with existing data from your tables
  4. 4Future-ready: Bi-directional sync for editing existing records
📸

Form prefilled with user data using @Field tokens

7. Best Practices for UX & Accessibility

Follow these guidelines to create forms that are easy to use, accessible, and provide excellent user experience.

Best Practices

  • Keep forms short and grouped logically
  • Use clear labels and helpful placeholders
  • Provide visual feedback for loading and success states
  • Confirm submission with messages or redirection
  • Ensure accessibility: tab order, readable contrast, screen reader support
📸

Example of a clean, accessible mobile form layout

Ready to Build Interactive Forms?

Start creating forms today. Collect user input, trigger actions, and connect to your data sources to build engaging experiences.

Open Builder
Previous Guide

Data Source & Connections

Learn how to create, manage, and connect data sources to power dynamic content in your Goloris app.

← Continue with Design
Next Guide

Loyalty Module (Rewards & Points System)

Learn how to build a point-based reward system to increase customer retention.

Schedule with Ease →