How to Create a Multi-Part Form

In this article, we will go over how you can create a multi-part form for you end users to submit for a more user friendly experience.

Use Case

You want your users to be able to fill out a form in a step-by-step manner, with each step on a separate page.

Here are a few common scenarios where this approach can be useful:

• Quizzes

• Surveys

• Job Applications

In this example, we will explore the creation of a multi-part form that empowers users to effortlessly complete an online application with multiple sections.

Requirements

If this your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can read more on getting started with Knack here: Builder Basics section. 

Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.

For this article's example, we will be using the Job Board Portal sample app if you would like to install the sample app and follow along with it.

 

Steps

1.  Define the Application Table

We'll first need to create a table called "Applications" in the Data section of the Builder to store the application details that your users will submit:

2.  Create Part One

In the Pages section of the Builder, we'll simply add a new page with a form for adding a new Application record:

Next, we'll customize the form to display only the specific fields we wish to include in the first part of the application. You can access the below by editing the form view and selecting "Add Inputs". 

For this example, the fields we wish to include are already applied to the form and there are no additional fields that need to be removed. 

3.  Redirect to the Next Part

We'll need to include a submit rule that will redirect the form to a new child page, allowing you to add a second form to edit the same application record.

We can access the submit rules section by selecting to edit the form view and by selecting "Rules" > "Submit Rules". +

After selecting the above option, you will be prompted to enter in page name. 

 

4.  Create Part Two

Next, we'll want to customize the second page created above by adding the fields that we want to include in the next part of the form. First, let's create a new form view on this page that edits existing Application records:

To do this, we'll add a record rule to the form so that with every submission the Application Date is set to the current date. To access record rules for the form, select to edit the form view, and then select "Rules" > "Record Rules".

From the "Add Inputs" section of the form's editor, we can select which fields we would like to include in the second part of the application. We can also remove fields by hovering over the field input and selecting the trash can icon: 

Conclusion

Now, we have a form with two parts! Once our users submit part one (the first form), they will be redirected to part two (the second edit form).

If you want to include additional sections in your form, simply follow the steps above again until your form has the desired number of parts.

 

Optional Features

Adding a Confirmation Message

If you'd like to provide applicants with a message after they submit the final part of the form, simply edit the last edit form and go to the form rules section. Then, under the "Submit Rules" section, select "Show a confirmation message" for the first rule.

You can customize the text for the confirmation message for when the final form is submitted:

Sending Emails

To notify the hiring manager, the end user, or anyone else when a new Application is submitted, simply edit the final form and navigate to the Emails section. From there, select the "Add Rule" button.

To personalize the email, click on the "+" button in the Send section of this rule and add more recipients.

 

Submit Button Text

By customizing the text on the Submit buttons, you have the opportunity to provide clear guidance to your users as they navigate through each step of the form.

To provide a more user-friendly experience, consider using "Save & Continue" instead of "Submit" for all form parts, except the last one. To make this change, navigate to the Settings section of the Form view and modify the text in the "Submit Button Text" input:

---