Creating a Multi-Page Custom Form

The following example will create a Job Application Custom Form with multiple pages on our web site. The user will complete the form over multiple pages and will be able to approve their responses on a Form Confirmation Page.

To understand how to set up a Custom Form with multiple pages consider the following example.

Tip: Remember that you must Commit any asset changes that you make.

Setting Up the Custom Form

1. Add a Custom Form under your Site, titled Job Application.
2. Right click on the Custom Form's Form Contents asset in the Asset Map and select the Form Contents screen.
3. In the Multiple Page From Options section, set the Multi-Page? option to Yes, as shown in the figure below.    

   
   The Multiple Page Form Options section    

4. 
   The Section assets    

     Add three sections on the form, titled Personal Information, Upload a CV and Closing Comments.
   
   To do this, enter Personal Information in the Add Sections field and click Commit. Repeat this step to add the Upload a CV and Closing Comments sections. Three Section assets will appear in the Asset Map, as shown in the figure to the right.
   
   Each of these sections represent a separate page of the Custom Form.

Adding the Form Questions

1. Right click on the Personal Information Section asset in the Asset Map and select the Details screen.
2. Add three Text type questions.
   
   To do this, in the Add Questions field, select the Text question type in the first list, 3 in the second list and click Commit. Three question assets will appear in the Asset Map and be added to the Current Questions list, as shown in the figure below.         

The Current Questions list

1. Add a Option List type question.
   
   To do this, in the Add Questions field, select the Option List question type in the first list, 1 in the second list and click Commit. A fourth Question asset will appear in the Asset Map and be added to the Current Questions list.
2. Repeat these steps to add four more questions: two Numeric type questions, one Country type question and one Email Address type question.
   
   Once you have done this, eight Question assets will appear in the Asset Map and be listed in the Current Questions list, as shown in the figure below.

The Questions for the form in the Current Questions list

The Question assets

1. Right click on the Upload a CV Section asset in the Asset Map and select the Details screen.
2. Add a File Upload type question.
3. Right click on the Closing Comments Section asset in the Asset Map and select the Details screen.
4. Add two questions: one Option List type question and one Text type question.

Eleven Question assets will now be listed under the Custom Form in the Asset Map, as shown in the figure to the right.

Setting Up Each Question

First Name Question

To set up the First Name question:

1. Right click on the Question 1 (text type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter First Name.
3. In the Maximum Length field, enter 50. This will mean that users will only be able to enter up to fifty characters in this field.
4. In the Required Entry field, select Required. This will mean that users will be required to answer this question on the form.
5. In the Custom Required Error field, enter Please enter your first name. This will be displayed on the form if the user does not answer this question.
6. Click Commit. The name of the asset in the Asset Map will change to First Name.

Surname Question

To set up the Surname question:

1. Right click on the Question 2 (text type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter Surname.
3. In the Maximum Length field, enter 50. This will mean that users will only be able to enter up to fifty characters in this field.
4. In the Required Entry field, select Required. This will mean that users will be required to answer this question on the form.
5. In the Custom Required Error field, enter Please enter your surname. This will be displayed on the form if the user does not answer this question.
6. Click Commit. The name of the asset in the Asset Map will change to Surname.

Address Question

To set up the Address question:

1. Right click on the Question 3 (text type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter Address.
3. In the Height field, enter 3. This will display a multi-line text field on the form for this question.
4. Click Commit. The name of the asset in the Asset Map will change to Address.

State Question

To set up the State question:

1. Right click on the Question 4 (option list type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter State.
3. In the Options field, enter the following options into the fields provided: QLD, NSW, ACT, VIC, TAS, NT, SA and WA. The list will expand as necessary.
4. Click Commit. The name of the asset in the Asset Map will change to State.

Postcode Question

To set up the Postcode question:

1. Right click on the Question 5 (numeric type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter Postcode.
3. In the Width field, enter 4. This will mean that the question field will be four characters wide.
4. In the Maximum Length field, enter 4. This will mean that users will only be able to enter up to four characters in this field.
5. Click Commit. The name of the asset in the Asset Map will change to Postcode.

Country Question

To set up the Country question:

1. Right click on the Question 6 (country type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter Country.
3. In the Available Countries field, select Australia, Canada, New Zealand, United Kingdom and United States from the list. This will narrow the list down to these four choices on the form.
4. In the Default field, select Australia to make this the default choice on your form.
5. Click Commit. The name of the asset in the Asset Map will change to Country.

Email Address Question

To set up the Email Address question:

1. Right click on the Question 7 (email address type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter Email Address.
3. In the Required Entry field, select Required. This will mean that users will be required to answer this question on the form.
4. In the Custom Required Error field, enter Please enter your email address. This will be displayed on the form if the user does not answer this question.
5. Click Commit. The name of the asset in the Asset Map will change to Email Address.

Phone Number Question

To set up the Phone Number question:

1. Right click on the Question 8 (numeric type) asset under the Personal Information section in the Asset Map and select the Details screen.
2. In the Title field, enter Phone Number.
3. In the Width field, enter 10. This will mean that the question field will be ten characters wide.
4. In the Maximum Length field, enter 10. This will mean that users will only be able to enter up to ten characters in this field.
5. Click Commit. The name of the asset in the Asset Map will change to Phone Number.

Your CV Question

The CVs Folder

To set up the Your CV question: 

1. Create a Folder under the Job Application form, titled CVs. This Folder will be used for storing documents uploaded by form users.
2. Right click on the Question 1 (text type) asset under the Upload a CV section in the Asset Map and select the Details screen.
3. In the Title field, enter Your CV.
4. In the Create Location field, select the CVs Folder from the Asset Map.
5. In the Add New Rule field, select Upload file type and click Commit. Additional fields will appear on the screen.
6. In the Extension List, enter doc and in the Custom Error Text field, enter Please upload a Word document. This will restrict uploaded documents to Word file types only.
7. Click Commit. The name of the asset in the Asset Map will change to Your CV.

How did you hear about Squiz? Question

To set up the How did you hear about Squiz? question:

1. Right click on the Question 1 (option list type) asset under the Closing Comments section in the Asset Map and select the Details screen.
2. In the Title field, enter How did you hear about Squiz?.
3. In the Options field, enter the following options into the fields provided: Search Engine, Word of Mouth, Trade Show, Referral, Newspaper/Article, and Other. The list will expand as necessary.
4. Click Commit. The name of the asset in the Asset Map will change to How did you hear about Squiz?.

Comments Question

To set up the Comments question:

1. Right click on the Question 2 (text type) asset under the Closing Comments section in the Asset Map and select the Details screen.
2. In the Title field, enter Comments.
3. In the Height field, enter 3. This will display a multi-line text field on the form for this question.
4. Click Commit. The name of the asset in the Asset Map will change to Comments.

Defining the Layout of the Custom Form

Page Contents Layout

The default layouts of the Job Application form's opening and subsequent pages are shown in the figures below.

The default layout of the first page of the multiple page Custom Form

The default layout of the second page of the multiple page Custom Form

The default layout of the final page of the multiple page Custom Form

The second and final pages do not contain a previous page button. We need to change the layout of these pages as well as include additional features.

The Page Contents Bodycopy

To change this layout:

1. Add the Page Contents Bodycopy. To do this:
   
   i) Right click on the Form Contents asset and select the Form Contents screen.
   
   ii) In the Use Bodycopy field, select Page Contents and click Commit. A Bodycopies Folder will appear in the Asset Map, containing the Page Contents Bodycopy, as shown in the figure to the right.
2. Right click on the Page Contents Bodycopy and select Edit Contents.
3. The content shown in the figure below is entered into the WYSIWYG Editor.    

   
   The WYSIWYG Editor on the Page Contents Bodycopy    

     The List of Submission errors keyword replacement is added to the top of the form so that  errors will be displayed when the form is not completed correctly. The Previous Page Button and Submit Button keyword replaces are also added so that the user can navigate through the pages of the multi-page form. A Page List is also included to allow the user to easily revisit the pages of the Custom Form they have already completed.    

   Tip: The Submit Button will automatically convert to the Next Page Button on all but the last page of the Custom Form. Similarly, the Previous Page Button will not appear on the first page of your form.    

       The new layout of the first page of the Job Application form is shown in the figure below.      

   
   The new layout for the Job Application form    

Individual Page Contents Layout

The Format Bodycopy

As this Custom Form contains multiple pages, to change the layout of the questions, the Page Contents of each section must be individually altered.

To do this:

1. Add the Page Contents Bodycopy. To do this:
   
   i) Right click on the Personal information asset in the Asset Map and select the Details screen.
   
   ii) In the Customise Format option, select Yes and click Commit. The Format Bodycopy will appear under the Personal Information section in the Asset Map, as shown in the figure above.
2. Right click on the Format Bodycopy and select Edit Contents.
3. The content shown in the figure below is entered into the WYSIWYG Editor.  

   
   The WYSIWYG Editor on the Format Bodycopy  

   The Section Title is added to the top of the form.  

   The new layout of the Personal Information page is shown in the figure below.    

   
   The new layout of the Personal Information page  

4. Repeat these steps to edit the Format Bodycopy for both the Upload a CV and Closing Comments sections.

Adding a Confirmation Page

To add a Confirmation Page to the Job Application form:

1. Right click on the Form Contents asset in the Asset Map and select the Form Contents screen.
2. In the Use Confirmation Page field, select Yes and click Commit.
   
   The default layout of the Confirmation Page is shown in the figure below.

The default layout of the Confirmation Page

There is no heading for the page. We need to change this layout to include a heading, as well as alter the look of the page.

The Confirmation Page Contents Bodycopy

1. Add the Confirmation Page Contents Bodycopy. To do this:
   
   i) Right click on the Form Contents asset and select the Form Contents screen.
   
   ii) In the Use Bodycopy field, select Confirmation Page Contents and click Commit. The Confirmation Page Contents Bodycopy will be added to the Bodycopies Folder, as shown in the figure to the right.
2. Right click on the Confirmation Page Contents Bodycopy and select Edit Contents.
3. The content shown in the figure below is entered into the WYSIWYG Editor.

The WYSIWYG Editor on the Confirmation Contents Bodycopy

A heading for the Confirmation Page has been added and the layout has been altered.

The new layout of the Confirmation Page is shown in the figure below.

The new layout of the Confirmation Page

Thank You Layout

A default layout has already been created for the Thank You layout of the Job Application form. This layout is shown when the user submits the form. We need to change this layout, adding both a heading and a thank you message.

The Thank You Bodycopy

To change this layout:

1. Add the Thank You Bodycopy. To do this:
   
   i) Right click on the Form Contents asset and select the Form Contents screen.
   
   ii) In the Use Bodycopy field, select Thank You and click Commit. The Thank You Bodycopy will be added to the Bodycopies Folder, as shown in the figure to the right.
2. Right click on the Page Contents Bodycopy and select Edit Contents.
3. The content shown in the figure below is entered into the WYSIWYG Editor.  

   
   The WYSIWYG Editor on the Thank You Bodycopy

   The new thank you layout for Job Application is shown in the figure below.  

   
   The new layout of the Thank You page

Final Steps

Before making the Job Application form Live to the public, check the following:

• The layout of the page contents is correct
• The required questions are validated and the error messages appear on the form
• That you can fill out and submit the form
• The layout of the thank you layout is correct
• The submission is logged to the database.

Once you are sure the Custom Form is working correctly, change its Status to Live and grant Public Read Permission.