Form Creation

Creating a Form

Creating a Form is as simple as the click of a button. From the main Portal page, select or create a Project. Inside your project, click the Forms button on the left-hand sidebar. Next, click the green +New Form button. From here you will be prompted to select what type of form you would like to create, Web Form or PDF. Once a form type has been selected you will be in the context of the Form Builder. Give the form a name, add some components, and build away!

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 automatically populate from the title you enter in camel case. Form Names can be independently changed if you do not wish to carry the Title.

The Form Name is utilized when embedding the Form into your application.

API Path

The API Path is the endpoint for accessing the Form and Form submissions. The API path name, like the Form name, will auto-populate based on the Title but can also be changed independently.

Adding Form Components

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

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 Form landing page by clicking on the trash icon next to the form. You will be prompted to confirm the form deletion.

All forms are soft-deleted, meaning you can easily restore them from your Database. To restore a deleted form, search for the form using the form's title or ID within your database and change the deleted flag to a timestamp. The form should be restored to your project after the database updates.

Filter by Title or Tag

Use the search bar to search for a form title within your project. Click the Filter Tag to filter your forms based on Tags saved to the Form. Filter by Tag is available in formio-enterprise version 8.5.0 and later.

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. There are several avenues for copying a Form:

When using one of the Copy methods, Actions saved to the form are not copied. Use the Stage Export method to export the form JSON (including the actions) and then importing to your desired stage or project

Copy Form Button: While in Edit Mode for a mode, at the bottom of the builder is a Copy Form button. Clicking this button will copy the Forms JSON and create a new form with the same components and settings.

This is the quickest and easiest way to copy a form within the same project context.

Form Embed URL: When a form is created, the form Embed URL is the endpoint where the Form's JSON Schema is stored. Copy the Form Embed URL and click the Import Form. Paste the embed URL and click the Import Form button. Ensure the copied form Roles and Permissions has the Read Form Definition set to Anonymous before trying to import.

This is the quickest and easiest way to copy forms between projects.

Command Line Interface:

If your environment is preventing you from using one of the options listed above, due to CORS restriction and security reasons, you can utilize Form.io's CLI.

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_URL] [DESTINATION_URL] --src-key [SOURCE_API_KEY] --dst-key [DESTINATION_API_KEY]

As an example, the following command will copy a form within the project.


formio copy form https://myapp.form.io/sourceform https://myotherapp.form.io/destinationform --src-key abc123 --dst-key abc123

Last updated