Forms

Forms are the primary interface within the system. Design a Form by dragging and dropping Form components onto the Form component area. Form components that are placed onto a Form will determine what that Form object looks like. You do not need to create an API before creating the Form. A compatible API will automatically be mapped out for you as you design your Form.

Creating a Form

Forms can be created from the Project home page. Get to this page by clicking on the Project name from the User Portal page or clicking the edit tab at the top right of the page while within the Project.

At the bottom of the list of Forms, click the New Form button to begin creating a Form.

7 create form

Title

Enter a title for your Form. This will help you identify it later.

Name

This is the machine name for your Form. It can only contain alphanumeric characters and will be automatically populate from the title you enter in camel cased (where the first word is lower cased and each subsequent word starts with a capital letter). Form Names can be changed if you do not wish to carry the Title. The Name field will be used when embedding the Form into your application.

API Path

The API Path is the endpoint for accessing the Form and Form submissions. Choose the endpoint you’d like to use.

Adding Form Components

Drag and Drop Form components on to your Form. See Form Components for more information on types of components and how to configure them.

Advanced Settings

Enter any settings desired in the advanced settings section. Currently custom submission URL is the only option for Advanced Settings. Saving a URL in this setting will send submissions to that URL instead of <form.io>. This is helpful if you want to handle the Form submissions within your own service or if you wish to pre-process the data before sending it to <form.io>. Use this only if you know what you are doing.

Editing a Form

Forms can be edited from the Project home page. Get to this page by clicking on the Project name from the User Portal.

In the list of forms, click the Edit button to start editing a form.

When you are done editing, click the Save button.

Deleting a Form

Forms can be deleted from the Project home page by clicking on the trash icon next to the form. You will be prompted to confirm the form deletion.

Deleting a form cannot be undone. Use caution.

Copy a form

There are many situations where you would like to copy an existing form into a new form within your project, or between projects. Because of the cross project nature of this operation, the best way to accomplish this is to use the Form.io Command Line tool. First install the command line using the following command in your command prompt.

npm install -g formio-cli

Once you have the command line installed, you will then need to create the form which will serve as the destination form. You do not need to add any components to this form, but just keep it blank since the copy command will populate the destination forms components. Once you have the destination form created, you will then use the formio copy form command to copy your forms using the following syntax.

formio copy form <source> <destination>

As an example, the following command will copy a from in project.

formio copy form https://myapp.form.io/source https://myotherapp.form.io/destination