Create a Multi-Step Form
This article includes step-by-step instructions to create multi-page forms using Update Forms. This technique is useful for separating very long forms into manageable steps. The example in this article is a renter’s information form that will be saved to a real estate company’s database.
Planning and Setup
You first create a table that captures renters' information. This is the Design view of the base table we're going to use to create our multi-page form. This table has 24 fields.
In order to create a multi-page form, your table must include at least one unique field. Most often this is a record ID field with an AutoNumber data type. In this example the unique ID field is called Application_ID.
Think about how you would divide the fields into groups. These groups of fields will become the separate pages of your multi-page form. For this example, the table is divided into three sections.
- Contact information
- Current residence and pets
- Co-applicant information
Each page of a multi-page form will be a separate DataPage. Each DataPage will have a group of fields that will contribute to the data of a single record. The first DataPage of the series is a Web Form. The following DataPages are all Update Forms. The Web Form will include some of your fields and also create a new record. The Update Forms will locate the new record and continue to fill in data in sections. The Update Forms locate the new record by receiving the new record’s unique ID from the previous form.
Form Completion Flag - The last field in the table above is called Application_Complete. This will serve as a control field and has a Yes/No data type. This field will be hidden from the end-user. On the last section of the multi-page form this value will be switched to "Yes" indicating the multi-page form is entirely complete. This way we can easily see if the customer has fully completed all of the sections, or if they navigated away in the middle, leaving the record incomplete.
Web Pages - Now is a good time to prepare the web pages where the DataPages will be hosted. Take note of each web page's URL as they will be needed during the form design process.
Steps to create multi-page forms:
Create the first Web Form
- On the DataPages' listing screen, click New DataPage to open DataPage wizard.
- By default, the cursor selects Submission Form as first DataPage type. On DataPage DataSource screen, enable Advanced options and parameters. Every DataPage that you will create for the multi-page form must have advanced options and parameters enabled in them.
- In Select Fields screen of the DataPage wizard, move the contact information fields from Available Fields panel to Selected Fields panel. Check On exit, pass AutoNumber ID field as parameter so that AutoNumber will be passed to the next DataPage.
- Configure your fields as normal. If you are using a random unique ID field (that is not an AutoNumber), follow the steps here to pass the value to the next form.
- On Destination and Triggers page, click Go to a new page for destination after record submit. Type the URL for the web page that is hosting the following DataPage of your multi-page form. Click Finish.
Create the Update Forms
Next, create the remaining update forms.
- Navigate to the DataPages' listing screen and click New DataPage.
- For DataPage type, select Single Record Update.
- On DataPage DataSource screen of the DataPage wizard remember to enable advanced options and parameters so you can receive AutoNumber from the initial Web Form.
- If you receive an error message, it is likely because the table you are using as a data source does not contain a unique field. Go back to the beginning of this article and verify your table design. Then double check to make sure the unique ID is being properly handled in the first form. In this example an AutoNumber field is used as the unique field.
- Next, you configure this form to receive the unique ID from the Web Form. Select Find record through unique ID. Choose your unique ID field from the dropdown field. In this example the only unique field is the Application_ID with an AutoNumber data type. The parameter name needs to be changed slightly. Add “InsertRecord” after the @ symbol and before the fieldname. This change in syntax tells the update form that the parameter being received is an AutoNumber from a newly created record. If you are not using an AutoNumber as your unique field type, the InsertRecord prefix is not necessary.
- Next, select the fields to include in the second section of the multi-page form. In this example, the second section prompts the end-user to provide information about the applicant’s current residence and pets. Move these fields from the Available Fields panel to the Selected Fields panel using the arrow button.
- By default, all Update Form fields are set to Display Only. To allow end-user to input data, change the form elements to an input format such as Text Field.
- On Destination and Triggers screen of the DataPage wizard, click Go to a new page for destination after record submit. Enter the URL of the web page where the next DataPage will be hosted. Click Finish.
You can create additional update forms for the remaining sections. The same steps apply for each additional Update Form of the multi-page form.
- Enable parameters
- Receive the AutoNumber
- Select and configure the fields
- Redirect the end-user to the next page after submission
Once all update forms have been complete, there are few special steps for the last form.
- Add the control field to the last form. Remember to add the Application_Complete control field to the last Update Form. On the Configure Fields screen of the DataPage wizard, select this element and select Hidden from the Form element dropdown. Then, set the default value to “Yes” by checking the default value checkbox. Now when this final form is submitted the field value will automatically be switched to “Yes”.
Configure the final destination
- The very last page of the multi-page form does not go to another URL. In this example, the standard confirmation message has been customized to include a link back to the homepage. You could also direct the end-user directly to a confirmation webpage on the Destination and Triggers screen.
You can now deploy each of the DataPages to their respective web pages.
After the forms have been deployed the end-user will go through the sections in the following order to complete the multi-page form.
Testing and Formatting
Now that the pages are deployed we can go through and test to make sure that the multi-page form is working correctly. Having difficulties connecting the forms? Ask yourself these questions:
- Are Parameters enabled on all of the pages?
- Is the AutoNumber parameter spelled correctly?
- Are you using the correct AutoNumber parameter format with the InsertRecord prefix? [@InsertRecordxxxx]
- Is the field being passed marked as unique in the table's Design view?
Once you're satisfied with the functionality of your multi-page form, you can modify the look and feel so that all of the pages match perfectly with your host website. As you see in this example we used headers to add the company logo and to add section information (in blue) to provide a prompt to the end-user at each step.