Skip to main content

Form Builder Guide

The visual form builder lets you create sophisticated forms without coding. Drag, drop, and configure fields to build exactly what you need.

Builder Interface​

Main Areas​

Left Panel - Field Palette​

All available field types:

  • Basic inputs
  • Selection fields
  • Advanced fields
  • Layout elements
  • Special fields

Center - Form Canvas​

Your form design area:

  • Drag fields here
  • Arrange layout
  • Preview appearance
  • Test interactions

Right Panel - Properties​

Configure selected elements:

  • Field settings
  • Validation rules
  • Logic conditions
  • Display options

Top Toolbar​

Quick actions:

  • Save: Save progress
  • Preview: Test form
  • Publish: Make live
  • Settings: Form options
  • Undo/Redo: Revert changes

Building Your Form​

Step 1: Form Setup​

  1. Click "Create Form"
  2. Choose "Start from Scratch"
  3. Enter form name
  4. Add description
  5. Select category

Step 2: Add Fields​

Drag fields from palette to canvas:

Basic Process​

  1. Select field type
  2. Drag to position
  3. Drop in place
  4. Configure properties
  5. Test behavior

Field Placement​

  • Drop between fields to insert
  • Drop on section to add inside
  • Drag existing fields to reorder
  • Use guidelines for alignment

Step 3: Configure Fields​

Click any field to edit:

General Settings​

  • Label: What users see
  • Name: System identifier
  • Description: Help text
  • Placeholder: Example text
  • Default Value: Pre-filled

Validation​

  • Required: Must complete
  • Pattern: Format rules
  • Min/Max: Value ranges
  • Custom Rules: Advanced logic

Display Options​

  • Width: Full, half, third
  • Visibility: Always, conditional
  • Read-only: View only
  • Hidden: Backend data

Field Types Deep Dive​

Text Inputs​

Short Text​

Use for: Names, codes, brief answers
Max length: 255 characters
Options:
  - Pattern validation
  - Auto-capitalize
  - Input masks

Long Text​

Use for: Comments, descriptions
Max length: 5000 characters
Options:
  - Rich text editor
  - Character counter
  - Min/max length

Email​

Use for: Email addresses
Validation: Automatic format check
Options:
  - Confirm field
  - Domain restrictions

Number Fields​

Integer​

Use for: Whole numbers
Options:
  - Min/max values
  - Step increments
  - Thousand separators

Decimal​

Use for: Precise values
Options:
  - Decimal places
  - Currency format
  - Percentage display

Calculated​

Use for: Auto-computed values
Options:
  - Formula builder
  - Reference other fields
  - Rounding rules

Selection Fields​

Use for: Single choice from many
Options:
  - Search enabled
  - Groups/categories
  - Dynamic options

Radio Buttons​

Use for: Single choice (few options)
Options:
  - Horizontal/vertical
  - Other option
  - Images

Checkboxes​

Use for: Multiple selections
Options:
  - Select all
  - Min/max selections
  - Columns layout

Date & Time​

Date Picker​

Use for: Single dates
Options:
  - Min/max dates
  - Disable dates
  - Date formats

Time Picker​

Use for: Time selection
Options:
  - 12/24 hour
  - Minute intervals
  - Time zones

Date Range​

Use for: Start/end dates
Options:
  - Linked validation
  - Duration display
  - Presets

Special Fields​

Photo Upload​

Features:
  - Multiple photos
  - Camera capture
  - Annotations
  - Compression
  - Required photos

Signature​

Features:
  - Touch/mouse draw
  - Type option
  - Clear/redo
  - Timestamp
  - Legal text

GPS Location​

Features:
  - Auto-capture
  - Map display
  - Address lookup
  - Accuracy level
  - Manual entry

Barcode Scanner​

Features:
  - Camera scan
  - Multiple formats
  - Manual entry
  - Validation
  - Lookup data

Layout & Organization​

Sections​

Group related fields:

Creating Sections​

  1. Drag Section element
  2. Name the section
  3. Drag fields into it
  4. Configure properties

Section Options​

  • Collapsible: Save space
  • Conditional: Show/hide
  • Repeatable: Dynamic count
  • Instructions: Guide users

Columns​

Arrange fields horizontally:

Column Layouts​

  • 2 columns (50/50)
  • 3 columns (33/33/33)
  • Custom splits (70/30)
  • Responsive behavior

Pages​

Break long forms:

Multi-page Setup​

  1. Add page breaks
  2. Configure navigation
  3. Add progress bar
  4. Set page titles

Page Logic​

  • Skip pages conditionally
  • Validate before advance
  • Save progress
  • Back navigation

Adding Logic​

Conditional Display​

Show/hide based on answers:

Simple Conditions​

Show "Damage Details" when "Damage Found" = "Yes"

Complex Logic​

Show "Warranty Claim" when:
  "Under Warranty" = "Yes" AND
  "Purchase Date" < 1 year ago

Dynamic Requirements​

Make fields required conditionally:

Require "Explanation" when "Rating" < 3

Calculations​

Compute values automatically:

Basic Math​

Total = Quantity * Unit Price

Complex Formulas​

Labor Cost = Hours * Rate * (1 + Overtime Multiplier)

Skip Logic​

Guide users through form:

If "Service Type" = "Installation"
  Skip to "New Equipment Section"
Else
  Continue to "Repair Section"

Advanced Features​

Data Sources​

Pull information dynamically:

From Assets​

  • Asset specifications
  • Service history
  • Current readings
  • Location data

From Accounts​

  • Contact information
  • Service addresses
  • Preferences
  • History

External APIs​

  • Part catalogs
  • Pricing data
  • Weather info
  • Compliance databases

Repeating Sections​

For variable counts:

Use Cases​

  • Multiple equipment checks
  • Room-by-room inspection
  • Part line items
  • Photo collections

Configuration​

  • Min/max repeats
  • Add/remove buttons
  • Labels for each
  • Nested fields

Form Templates​

Reuse form designs:

Save as Template​

  1. Design form
  2. Save as template
  3. Categorize
  4. Share with team

Use Templates​

  1. Create from template
  2. Modify as needed
  3. Maintain link
  4. Update all instances

Mobile Optimization​

Design Considerations​

  • Single column layout
  • Large touch targets
  • Minimal scrolling
  • Clear labels
  • Smart defaults

Mobile-Specific Features​

  • Camera integration
  • GPS capture
  • Offline mode
  • Voice input
  • Gesture support

Testing​

Always test on mobile:

  1. Preview on phone
  2. Check all fields
  3. Test logic
  4. Verify photos
  5. Check offline

Form Settings​

General Options​

  • Name: Internal identifier
  • Title: User-facing name
  • Category: Organization
  • Tags: Search/filter
  • Icon: Visual identifier

Behavior Settings​

  • Save Progress: Auto-save
  • Confirmation: Show message
  • Redirect: After submit
  • Notifications: Email alerts
  • Workflows: Trigger actions

Access Control​

  • Who can fill: Permissions
  • Who can view: Results access
  • Public link: External access
  • Expiration: Time limits
  • Submission limits: Max count

Best Practices​

Form Design​

  1. Logical flow: Group related fields
  2. Clear labels: No ambiguity
  3. Help text: Guide users
  4. Progress indicators: Show position
  5. Error prevention: Smart validation

Performance​

  1. Limit fields: Only necessary
  2. Optimize images: Compress
  3. Efficient logic: Simple rules
  4. Test thoroughly: All paths
  5. Mobile-first: Primary platform

User Experience​

  1. Save progress: Don't lose work
  2. Clear errors: Helpful messages
  3. Smart defaults: Reduce typing
  4. Visual feedback: Show actions
  5. Confirmation: Success message

Troubleshooting​

Common Issues​

Fields Not Showing​

  • Check visibility logic
  • Verify conditions
  • Test all scenarios
  • Review dependencies

Validation Errors​

  • Clear error messages
  • Check patterns
  • Test edge cases
  • Helpful guidance

Performance Problems​

  • Too many fields
  • Complex logic
  • Large images
  • Inefficient rules

Next Steps​