Form Types

Form.io offers several different options on how the form is displayed and consumed by the end-user. These different form options serve different use cases and purposes, however, the form type can be changed at any time by clicking the 'Display As' dropdown within the Form Builder. The form type is selected when the form is created. Below are the different form options to create.

Web Form

A traditional web form that is typically filled out by end-users from top to bottom. To create a Web Form, click the +New Form button and select Web Form.

Wizard

This form configuration allows users to progress through the form in bite-size sections instead of presenting the entire form to the user. If you are creating a form containing many fields, this is a great option to improve the user experience.

To create a Wizard, select the Webform option. While in builder mode, click the Display As dropdown and switch the options from Webform to Wizard.

The formatting will dynamically change within the builder into a Wizard-style form. The Wizard utilizes the Panel layout component for the Pages. When a form is switched to a Wizard, all fields will be moved into a Panel by default representing the first page of the wizard when the form is rendered.

To transfer components from one Wizard Page to another, switch the Display As mode to Webform. In doing so, the Wizard Pages will separate into individual Panels where fields can be moved to and from. Switch the form back to Wizard mode to restore the previous format.

When rendered, the Wizard introduces Cancel, Previous and Next navigation buttons at the bottom of the form. The user can progress through the Wizard or use the header tabs to navigate through the form.

PDF Forms

PDF-First forms allow users to upload a PDF form and add overlay fields to the form, modernizing the traditional old and clunky PDF form. For a more in-depth guide on the PDF forms please navigate to the following documentation.

Last updated