In Action: Multi-Page Forms

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

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 our 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 our example we've divided this table 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:

1. Create the first Web Form

In the Caspio Bridge Explorer window make sure you are in the DataPage view and click on the New button to launch the DataPage wizard.

Enable advanced options and parameters

Every DataPage that we will create for the multi-page form must have advanced options and parameters enabled.  Click Next.  On the second page of the DataPage wizard leave the form type as Capture Form. Click Next.

Choose fields and pass the AutoNumber

In the Select Fields screen of the DataPage wizard we are going to move all of the contact information fields from the left to the right-hand panel.  We will also check the checkbox located under the left panel so that the AutoNumber will be passed to the next DataPage.  Click Next.  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.

Change the destination URL

On the final page of the DataPage wizard Click on Go to this page (URL).  Type the URL for the web page that is hosting the following DataPage of your multi-page form.  Press Finish.

2. Create the Update Forms

In the Explorer window make sure you are in the DataPage view.  Click on the New button to open the DataPage wizard again.  Choose Update Form and click Next.

Enable advanced options and parameters

On the second screen of the DataPage wizard we will select the same data source table as the previous Web Form.  We will also remember to enable advanced options and parameters so we can receive the AutoNumber from the initial Web Form. Press Next.

If you get an error

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 we are using an AutoNumber field as our unique field.

Receive the unique ID from the initial form

Select Find record through unique ID.  Choose your unique ID field from the dropdown field.  In our example the only unique field is our Application_ID AutoNumber.  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.

Select and Format your fields

Now we are going to select the fields to include in the second section of our multi-page form.  In our example, the second section prompts the end-user to provide information about the applicant’s current residence and pets.  Move these fields from the left to the right-hand panel using the arrow button.  Click Next.  By default, all Update Form fields are set to Display Only.  To allow our end-user to input data we will change the form elements to an input format such as Text Field.

Change the destination to the next URL

On the last screen of the DataPage wizard click on Go to this page (URL). Enter the URL of the web page where the next DataPage will be hosted. Click Finish.

Create additional Update Forms for following sections

The same steps apply for each additional Update Form of the multi-page form.

1. Enable parameters
2. Receive the AutoNumber
3. Select and configure the fields
4. Redirect the end-user to the next page after submission

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 we are going to select this element and select "Hidden" from the Form element dropdown.  Then we can 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 our multi-page form does not go to another URL.  In this example we customized the standard confirmation message to include a link back to the homepage.  You could also direct the end-user directly to a confirmation webpage.

4. Deploy

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.

5. 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.