• Forms
  • Quick Start Guide

Quick Start Guide

This guide will help you create your first form in under 15 minutes.

What You’ll Build

A simple employee information form with: - Text input fields (name, email) - A date picker (hire date) - A dropdown selection (department) - Validation rules - A submit button

Prerequisites

  • Access to the Ambience Forms module
  • mod-form and mod-form-designer privileges

Step 1: Create a New Form

  1. Navigate to the Forms page in Ambience
  2. Click the Add button in the upper right corner
  3. Enter a name: Employee Information
  4. Select Blank Form from the “Copy From” dropdown
  5. Click OK

The Form Designer will open with a blank form.

Step 2: Add Layout Structure

Forms need a layout structure before adding input fields.

  1. In the top row, ensure Blocks is selected
  2. Drag a Column component onto the root in the form structure
  3. The column appears in the form preview on the right

Step 3: Add Input Fields

Now add input fields to collect employee information.

  1. In the top row, select Inputs from the dropdown
  2. Drag a Text Input onto the column you created
  3. In the Component Properties panel at the bottom:
  • Set Id: employeeName
  • Set Label: Employee Name
  • Check Mandatory Field
  1. Drag another Text Input onto the column
  2. Configure it:
  • Set Id: email
  • Set Label: Email Address
  • Set Input Type: email
  • Check Mandatory Field
  1. Drag a Date Input onto the column
  2. Configure it:
  • Set Id: hireDate
  • Set Label: Hire Date
  • Check Mandatory Field
  1. Drag a Select onto the column
  2. Configure it:
  • Set Id: department
  • Set Label: Department
  • Check Mandatory Field
  • In Choices, add options:
    • Value: engineering, Label: Engineering
    • Value: sales, Label: Sales
    • Value: hr, Label: Human Resources
    • Value: finance, Label: Finance

Step 4: Add a Submit Button

  1. In the top row, select Actions from the dropdown
  2. Drag a Button Bar onto the column
  3. The button bar comes with a default Submit button

Step 5: Configure Form Properties

  1. Click on root in the form structure
  2. In the Component Properties panel:
  • Set Label: Employee Information Form
  • Set Label Mode: Vertical
  • Check Scroll To Error (automatically scrolls to validation errors)

Step 6: Test Your Form

  1. Click the More Actions icon (three dots) in the top row
  2. Select Run Form
  3. In the dialog, select New Tab
  4. Click OK

The form opens in a new tab. Try: - Submitting without filling fields (validation errors appear) - Entering an invalid email format - Filling all fields correctly and submitting

Step 7: Save Your Form

The form auto-saves as you work. You can verify by checking the Forms management page - your new form appears in the list.

What’s Next?

You’ve created a basic form! Now explore:

Common Next Steps

Add Server-Side Validation

  1. Create an ETL chainset with validation logic
  2. Add a Validation Endpoint step to mark it as a validator
  3. In the form’s root properties, select your chainset in the Validator field

Connect to a Workflow

  1. Add a Workflow State component to your form (under Others)
  2. Configure it with your workflow ID
  3. The form will create workflow instances on submission

Store Form Results

Form submissions are automatically stored in MongoDB. Use the form.ReadFormResults ETL step to query submitted data.

Troubleshooting

Form doesn’t appear in the list - Check that you have the mod-form privilege - Verify the form is enabled - Check workgroup filters

Validation not working - Ensure mandatory fields are checked in component properties - For custom validation, verify the ETL chainset has a Validation Endpoint step

Submit button does nothing - Check browser console for errors - Verify all mandatory fields are filled - Check that validation passes

Learn More

Next: Core Concepts