LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
      • Installation
      • User Guide
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
  • Contact Us
Powered by GitBook
On this page
  • Builder Settings
  • Edit
  • Display As
  • Search Field
  • Component Grouping
  • Drop Zone
  • Copy Form
  • Cancel
  • Save Form
  • Visual Tour
  • Inline Component Settings
  • Edit
  • Move
  • Edit JSON
  • Copy
  • Paste
  • Delete

Was this helpful?

  1. User Guide
  2. Form Building

Form Builder UI

Learn about the different Form Builder UI elements

PreviousForm BuildingNextForm Components

Last updated 9 months ago

Was this helpful?

Before we get into Form Building, it's important to understand the different UI elements of the builder. You will be directed to the Form Builder when creating a Form or Resource, or when clicking the Edit button for an existing Form or Resource.

Before creating your first form, take some time to review the settings and operations found in the Form Builder.

Builder Settings

The following settings can be found in the UI of the Form Builder when editing a Form.

Edit

Click the Edit button for a specific Form or Resource to enter builder mode.

Display As

Change the way the form is displayed by selecting an option from the Display As dropdown. Forms can be displayed as a Wizard, PDF, or traditional Web Form. The form display type can be changed dynamically, even when the form is live!

Search Field

Find the field you're looking for by quickly using the component search bar

Component Grouping

Drop Zone

Drag and drop your components onto the drop zone indicated by the blue box.

Copy Form

Click the Copy Form button to copy the form JSON and components to a new form.

Cancel

Cancel all changes made from the last time the form was saved. Canceling a form with unsaved changes will prompt a confirmation window before confirming the Cancel.

Save Form

Save the Form in its current state.

Visual Tour

Inline Component Settings

When a Component is added and saved to the builder, there will be inline settings for the component when hovering over the field found at the top right, above the field. These settings are not component specific and will be available for every component added to the builder

Edit

Opens the settings window for the component.

Move

Reposition the component on the form by clicking and holding the Move icon

Edit JSON

Directly edit the component settings by configuring the JSON directly. The JSON Schema will grow as settings are configured within the component setting UI window. Check the Full Schema setting to view the full schema configurations to display the setting schema that is not currently configured for the component.

Copy and paste the JSON schema of one component to easily implement those settings for other components within another stage or project.

Copy

Copies the component JSON. When the Copy button is selected the Paste button will appear within the Inline Component Settings.

Paste

Pastes the component that was previously copied. The new component will be added directly below the component where the Paste button was clicked.

Delete

Deletes the component from the form. If a component is removed unintentionally, refresh the form to its previous state by navigating away from the form and selecting No for the Save prompt, or reloading the browser directly.

Components are grouped into different tabs based on the component type. The component groupings are , , , , , and

Basic
Advanced
Layout
Data
Premium
Existing Resource Fields
Click here for a full list of Component JSON Schema
Visual guide to the Form Builder.