Assignar Pay Logo
Sign Up

Form Builder

Step-by-step guide to creating and designing custom forms using the visual drag-and-drop form builder

What This Feature Does

The Form Builder is a visual tool for creating custom forms without any coding. You can drag and drop fields, organize them into sections, configure validation rules, and preview your form before publishing. Forms can be used for data collection, inspections, checklists, and any other structured information gathering.

Initial Setup

First-Time Configuration

  1. Navigate to "Forms" by clicking "Forms" in the left sidebar
  2. You'll see the forms dashboard showing all your forms
  3. Click the "Create Form" button in the top right corner to open the form builder

Required Permissions

Before creating forms, ensure you have:

  • "Forms" permission enabled in your role
  • Access to the team account where you want to create forms

Day-to-Day Usage

How to Create a New Form

  1. Go to "Forms" in the left sidebar
  2. Click "Create Form" button
  3. Enter basic form information:
    • Form Name: Enter a descriptive name (e.g., "Daily Safety Inspection")
    • Description: Optional description of the form's purpose
  4. The form builder opens with an empty canvas
  5. Start adding fields from the left panel

Understanding the Form Builder Interface

The form builder has three main areas:

Left Panel - Field Types

  • Lists all available field types you can add
  • Drag fields from here onto your form
  • See Field Types for detailed information on each type

Center Canvas - Form Design

  • Shows your form layout
  • Drag to reorder fields
  • Click fields to select and configure them

Right Panel - Field Configuration

  • Appears when a field is selected
  • Configure field properties, validation, and appearance
  • Set up Conditional Logic rules

How to Add Fields to Your Form

  1. In the form builder, locate the field types panel on the left
  2. Find the field type you want to add (e.g., "Input", "Select", "DatePicker")
  3. Either:
    • Drag and drop: Drag the field type onto the form canvas
    • Click to add: Click the field type to add it at the end
  4. The field appears on your form canvas
  5. Click the field to open its configuration panel

How to Configure a Field

  1. Click on any field in your form to select it
  2. The configuration panel opens on the right
  3. Configure common settings:
    • Label: The text shown above the field
    • Name: Internal field identifier (auto-generated, can be customized)
    • Placeholder: Hint text shown when field is empty
    • Required: Toggle to make the field mandatory
    • Description: Help text shown below the field
  4. Configure type-specific settings (varies by field type)
  5. Changes save automatically

How to Organize Fields into Sections

Sections help group related fields together:

  1. Drag a "Section" element from the field types panel
  2. Give the section a title (e.g., "Personal Information")
  3. Optionally add a description
  4. Drag other fields into the section
  5. Fields inside sections are visually grouped
  6. Sections can have their own conditional visibility

How to Reorder Fields

  1. Hover over the field you want to move
  2. Click and hold the drag handle (appears on the left of the field)
  3. Drag the field to its new position
  4. A visual indicator shows where the field will be placed
  5. Release to drop the field in place

How to Duplicate a Field

  1. Click on the field you want to duplicate
  2. Click the "Duplicate" button in the configuration panel (or use the field menu)
  3. A copy of the field appears below the original
  4. The duplicate has the same configuration but a unique name
  5. Modify the duplicate as needed

How to Delete a Field

  1. Click on the field you want to remove
  2. Click the "Delete" button in the configuration panel
  3. Confirm the deletion when prompted
  4. The field is removed from your form

Note: Deleting a field does not affect previously collected submissions.

How to Set Default Values

Many field types support default values that pre-populate when the form loads:

  1. Select the field you want to configure
  2. Find the "Default Value" setting in the configuration panel
  3. Enter or select the default value:
    • Input fields: Enter text
    • Select fields: Choose from options
    • DatePicker: Select a date or use "Today"
    • Checkbox/Switch: Set checked or unchecked
  4. The default appears when users open the form

How to Preview Your Form

  1. Click the "Preview" button in the top toolbar
  2. A preview modal opens showing your form as users will see it
  3. Test filling out the form:
    • Enter sample data
    • Check required field validation
    • Verify conditional logic works correctly
  4. Click "Close Preview" to return to editing

How to Save Your Form

Forms save automatically as you work. You can also:

  1. Click "Save" in the top toolbar to force a save
  2. The "Last saved" timestamp updates
  3. Your form is saved as a draft until published

How to Publish Your Form

  1. Complete your form design
  2. Preview and test the form
  3. Click "Publish" in the top toolbar
  4. The form becomes available for submissions
  5. Team members with access can now fill out the form

How to Edit an Existing Form

  1. Go to "Forms" in the left sidebar
  2. Find the form you want to edit
  3. Click on the form row or click the actions menu and select "Edit"
  4. The form builder opens with your form loaded
  5. Make your changes
  6. Changes to published forms take effect immediately

Important: Editing a published form does not affect previously collected submissions. Existing data remains intact.

Common Tasks

Creating a Multi-Section Form

For complex forms with multiple topics:

  1. Create a new form
  2. Add a "Section" element for each topic
  3. Configure section titles:
    • "Project Information"
    • "Safety Observations"
    • "Equipment Status"
    • "Sign-off"
  4. Add relevant fields to each section
  5. Use conditional logic to show/hide sections based on responses

Setting Up Required Fields

  1. Select each field that must be filled out
  2. Toggle "Required" to ON in the configuration panel
  3. Required fields show an asterisk (*) next to their label
  4. Users cannot submit until all required fields are completed

Adding Help Text to Fields

  1. Select the field you want to explain
  2. Find the "Description" setting
  3. Enter helpful text explaining:
    • What information to enter
    • Format requirements
    • Examples
  4. The description appears below the field

Creating Repeatable Table Data

For collecting multiple rows of similar data (like material lists):

  1. Add a "Table" field to your form
  2. Configure the table columns:
    • Define column names
    • Set column types (text, number, select, etc.)
  3. Users can add multiple rows when filling out the form
  4. See Field Types for detailed table configuration

Form Versioning

Understanding Form Versions

Every time you save changes to a published form, a new version is created:

  • Previous versions are preserved
  • You can view the version history
  • Restore previous versions if needed

Viewing Version History

  1. Open the form in the form builder
  2. Click the version history icon in the toolbar
  3. See a list of all form versions with timestamps
  4. Click any version to preview it

Restoring a Previous Version

  1. Open version history
  2. Find the version you want to restore
  3. Click "Restore" next to that version
  4. Confirm the restoration
  5. The form reverts to the selected version
  6. A new version is created recording this change

Troubleshooting

If fields aren't appearing on the form

  • Check that you've dragged the field onto the canvas (not just clicked)
  • Refresh the page and try again
  • Ensure you have permission to edit the form

If changes aren't saving

  • Check your internet connection
  • Look for error messages in the interface
  • Try clicking "Save" manually
  • Refresh the page (note: unsaved changes may be lost)

If preview isn't working correctly

  • Ensure all required configurations are set
  • Check for validation errors in field settings
  • Clear browser cache and try again

If conditional logic isn't working

  • Verify the referenced field exists
  • Check that conditions are properly configured
  • Test with different values in preview mode
  • See Conditional Logic for troubleshooting

If you can't publish the form

  • Ensure the form has at least one field
  • Check all required field configurations are complete
  • Verify you have permission to publish forms

Tips for Form Design

  • Keep it simple: Only ask for necessary information
  • Use clear labels: Make field purposes obvious
  • Group logically: Use sections for related fields
  • Provide help: Add descriptions for complex fields
  • Consider mobile: Forms should work well on phones
  • Test thoroughly: Preview and test all scenarios before publishing
  • Use validation: Prevent invalid data with proper field types and rules

What's Next

After creating your form, you may want to: