Component: Form management - Form design

Introduction

Form design let the form admin drag and drop independent components into the body of the form builder. The form builder provides a UI, which makes form admin easy to visualize and modify the form.

Workflow of form management

Guideline

Add new form

By clicking on the Add button, the Add form dialog will be opened.

The dialog includes the following fields:

• Name

  • This field is required.
  • Form name must be unique.

• Description

  • This field is optional.
  • You can describe more information of the form.

• Active

  • By default, the form is active. You can deactivate it by unticking the checkbox.
  • An inactive form will be unable to access in public site even if it was published.

• Status

  • By default, the form status is Draft when it is created.
  • A form can has one of these status: Draft, and Published.
    • Draft
      • A form has Draft status when it is newly created, or it is edited after being published.
    • Published
      • A form has Published status after it is published successfully.

You can explore different configurations in different field components here.

Edit a form

The Edit form dialog will be opened after a new form is created successfully or by selecting a form and clicking on the Edit button.

The Edit form dialog includes 4 tabs: General, Design, Actions, and Preview.

General

This tab displays all saved general information of the form, like: Name, Form type, Description, Active, and Status.

Design

The Design tab includes 2 sections: fields list, and form design area.

The form design area is used to drag and drop the fields from the fields list to the form.

The fields list includes 2 types of field: layout fields from Form.io, and fields from form data source. There are a lot of form data sources to be used for various forms, so, you must select the specific form data source for your form design.

In this part, we separate it to 2 main actions:

• Select form data source
• Design form

Select form data source

By clicking on the Select data sources button, the Select data source dialog will be opened.

The dialog includes list of all created form data sources from Form data sources page. The form data sources are displayed with basic information like: Name, and Data source.

You can select one or multiple data sources to be used in designing form. After the data source is selected, list of fields under the data source will be displayed in the fields list section.

Besides selecting the existing form data sources, you can also manage the form data source in this dialog, like: add new form data source, edit form data source, and delete the form data source.

• Add new form data source

By clicking on the Add button, the Add new form data source dialog will be opened.

The steps to add new data source is the same to the Add new form data source flow mentioned in [Data management][data-management.md] page. The added form data source will be stored in the Form data sources page and displayed in the Select data source dialog properly.

• Edit form data source

By clicking on the Edit button at every form data source record, the Edit form data source dialog will be opened.

You can edit form data source like the Edit form data source flow mentioned in [Data management][data-management.md] page.

• Delete form data source

By clicking on the Delete button at every form data source record in the list, a deletion confirmation dialog will be opened. You can choose to cancel, or continue the deletion for the form data source. Only the form data source which is not in use can be deleted. The data source which is deleted in the Select data sources dialog will be also deleted from Form data sources page.

Design form

After the data sources are selected, all fields under the data sources will be displayed in the fields list section. You can drag and drop the fields to the design area to design form.

You can customize UI of the form (columns, table, etc.) by using the layout fields supported by Form.io. The supported layout fields are: HTML element, Content, Columns, Field set, Table, Tabs, and Well.

After adding the field to the form, you can edit component settings, change the field position in the form, edit JSON of the component, copy new field from the field, remove the field from the form.

The relevant functional buttons will be displayed when you hover over the added field.

• Edit component settings

By clicking on the Edit button, according to field type of the field, the corresponding component settings dialog will be opened.

The dialog includes 2 sections: configuration section, and preview section.

The configuration section includes 5 tabs: Display settings, Data, Validation, Conditional, and Logic.

After configuring the settings for the field, you can preview it in the preview section before saving the changes.

• Change the field position in the form

You can change position of the field in the form by holding the Move button and move the field to the expected position.

• Edit JSON of component

By clicking on the Edit JSON button, the corresponding JSON dialog of the component will be opened. You can directly edit the component settings by configuring the JSON.

The JSON Schema depends on the configuration of the component.

If you tick on the Full Schema checkbox, it will show the full schema configurations, and the schema of setting which was not configured for the component will be also displayed.

• Copy new field from the current field

You can copy the field by clicking on the Copy button and paste it under another field by clicking on the Paste below button.

• Remove the field from the form

When you click on the Remove button of the field, the field will be removed from the form immediately.

After completing designing form, you must save the form design before moving to the other tabs.

Actions

The Actions tab includes a list of created actions which are used for the form.

On the list, the form action is displayed with information like: Action type, and Action title.

Order of action buttons on the render form from left to right depends on the order of actions on the list from top to bottom. To changing order of the form actions, you can use the up/down arrow at the right of each action.

You can also add new form action, edit form action, and delete form action.

Add new form action

By clicking on the Add button, a new row for new form action will be added at the top of the form actions list.

You must select the Action type, and fill in the Action title for the new action.

The Action type list includes 2 types: Submit, and Cancel.

According to the selected Action type, other relevant configurations will be displayed in the Edit form action dialog.

Edit form action

By clicking on the Edit button at each form action row, the Edit form action dialog will be opened.

The dialog includes the following fields:

• Action name

  • This field is required.
  • Action name must be unique.

• Action type

  • This field is required.
  • You must select an item from the list. There are 2 action types in the list: Submit, and Cancel**.**

• Action title

  • This field is required
  • Action title is name of the button which is displayed on rendered form UI.
  • In case the form is multilingual, you should fill the text resource key in the field.

• Action

  • This field is only displayed if the Action type is Submit.
  • The field is required after it is displayed.
  • You must select an action from the list. List of actions is retrieved from the Form actions page.

• Receipt page

  • The receipt page is displayed after the rendered form is submitted successfully.
  • This field is optional and only displayed if the Action type is Submit and the Enable save as draft checkbox is unticked.
  • You can select a receipt form from the list. List of receipt forms is retrieved from the Receipt forms page.
  • The receipt form is only displayed after is published.

• Enable save as draft

  • This field is only displayed if the Action type is Submit.
  • By default, the Save as draft function is disabled. You can enable it by ticking on the checkbox.
  • With this function, you can save the filled data on the rendered form temporarily as a draft before submitting it.

Delete form action

By clicking on the Remove button at the right of the action, the form action will be deleted.

The delete function will be disabled if it is only 1 form action existing in the list. The form must have at least 1 action.

Preview

After completing configuring the form action, you must save the changes before going to the Preview tab to preview the rendered form and publish it.

In preview mode, you can view how the designed form displays after being published. You can also try filling the form and check the form behavior.

At this preview step, changes on the form have not been available on the public site yet. It is only available after the form is published successfully. You can publish the form with the Public button in the Preview tab.

By clicking on the Public button, a confirmation dialog will be opened.

If you the Yes button, the form will be published immediately. If you the No button, the publication will be cancelled.

Delete a form

The Delete button is only enabled after a form is selected.

By on the Delete button, the deletion confirmation dialog will be opened.

If you selects the Yes button, the form will be deleted immediately. If you selects the No button, the deletion will be cancelled. The deleted form will no longer be accessible in public site.

Other actions

Clone new form

The Clone button is only enabled after an item on the list of forms is selected.

By clicking on the Clone button, a confirmation dialog for cloning will be opened.

If you select the No button, the cloning process will be cancelled. If you select the Yes button, the cloning process will be started and it will take a while to complete.

After the cloning process is completed, the new form dialog will be opened. Name of the new form includes name of the original form and the suffix. Status of the new form is Draft by default.

The new form inherits the form design and all configurations of the original form.

Publish form

Besides publishing form in the Edit form dialog. You can also publish a form, multiple forms or all forms but does not have to open each form to publish it.

• Publish a form
  • To publish a form, select a form then click on the Publish button, the selected form will be published immediately.

• Publish multiple forms
  • To publish multiple forms at one time, select multiple forms then click on the Publish button, the selected forms will be published immediately.

• Publish all forms
  • To publish all forms, click on the Publish all button, then, a confirmation dialog of publication will be opened. If you select the Yes button, all forms of which status is Draft will be published immediately. If you select the No button, the publication will be cancelled.

Import form

Besides creating forms manually, you can import a list of forms from a JSON file.

By clicking on the Import button, the Import form actions dialog will be opened. Then, you can select a JSON file and upload it via the File upload field.

After completing the import process, the forms will be created and displayed in the Forms list properly.

Export form

By clicking on the Export button, the list of forms will be exported immediately as JSON file. You can also export one or multiple forms instead of whole list by selecting the forms, then clicking on the Export button.