Form Creation
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!
Give the form a name, add some components, and build away!
Enter a title for your Form. This will help you identify it later.
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.
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.
Drag and Drop Form components onto your Form. See Form Components for more information on the types of components and how to configure them.
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.
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.
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:
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> <destination>
As an example, the following command will copy a form within the project.
formio copy form https://myapp.form.io/source https://myotherapp.form.io/destination
Last modified 13d ago