Launch a Form

This section walks you through how to launch a form for the public to submit.

Launching a form allows you to create a form or survey, and quickly launch it so that end users can submit that form. For example, let's say you simply wish to have a number of people fill out an Employment Application form, the Form.io form launching system enables this by providing a public web-based portal for these potential applicants to submit their candidacy for the positions you may have available. You can also configure a number of actions that are triggered once the form is submitted, such as sending an email to both the candidate as well as the HR administrator who will then process the application.

In this tutorial, we will create an Employment Application form, setup a few Email actions, and then launch it so that potential employees can fill out the form to submit their candidacy.

Step 1: Create a project

To get started, let's create a new Project called Employee Portal. We can do this by navigating to https://portal.form.io and create a new account, or login to an existing account. The first page you see will have a button that says New Project

Create a new project

Step 2: Create a Form

Once you create a new project, you can now go to the Forms section, and create a New Form.

Adding a new form

Next we will select API Web form as the type of form we will be creating.

Next, we will provide a Title for our form, name, and path. These are defined as follows.

• Title - This is the human readable title provided for the form to assist in management and end users to know the form they are submitting.

• Name - This is the machine name for this form, that is useful when performing API requests to manage the form as well as importing the forms into other projects.

• API Path - This is the API path for this form, which is used when embedding the form as well as referencing users to submit the form.

Adding a new form with title, name, and API path.

Next, we will add a few fields to this form. Each field type is documented in further detail in the Form Building User Guide. For now we will just create a simple form with a few fields as follows.

Next we will click Create Form to create our new form.

Step 3: Create some Actions

Next, we will click on the Actions tab, and then select Email and click Add Action.

Adding an Email actions

The first thing we will do is configure the Email Transport that will be used to fire off our emails. Email Transports are 3rd party email servers that will handle the sending of emails from the Email Action and are configured separately from Form.io.

Next, set the "To: Email Address" that will send an email to the person who filled out the application. We can reference fields within the Form by using the following syntax.

{{ data.email }}

Any field can be referenced this way by referring to the fields "Property Name" which can be found within the API tab when you edit any field within the form.

After we have done this, we will now set the Subject of the email to say "Thank you for your registration!".

Click on Save Action at the bottom of the page. You should now see the following.

Next, we will show how you can stack Actions on top of one another by simply just adding another action to the list. A good example of why we may want to do this is if we wish to send an email to the Human Resources department for each application submitted, so we will just simply repeat the steps above (to create a new Email action) but with the following configurations.

• Title: Send email to HR

• To: Email: [e-mail]

• Subject: We have a new application!

When we are done, our actions should look like the following.

Next, we will need to configure the Access of this form so that anonymous users can submit the form.

Step 4: Configuring Access

To configure the Access of our form to allow anonymous users to submit it, we must first click on the Access tab, and then add Anonymous to the Create Own Submissions permission.

Allowing anonymous users to submit this form.

There are many other things we can do with the Access section of a form, so we recommend reading the Roles and Permissions Guide at a later time. We are now finally ready to launch our form!

Step 5: Launch the form

Launching a form enables the form that we just created to be hosted within a special application, called FormView, that provides a way for end users to submit the form. The FormView application is permanently hosted at the https://pro.formview.io domain. We can launch our form by clicking on the Launch tab.

The form can now be shared with others by copying the URL provided next to the blue button. We can also click on this button, which will navigate our browser to this form so that we can see how end users will experience our form and fill it out.

Click the blue button to navigate to the form

Congratulations! We have just launched our form and others can now submit it!

Launching a form within https://pro.formview.io

There are many other things we can do with our FormView application, such as White Labeling, changing the logo, navigating to a thank you page, etc. For more information about our FormView application, please check out the FormView User Guide.