---
title: Example: Create a multi-page job application form
slug: cms-12/docs/example-create-a-multi-page-job-application-form
docTags: 
createdAt: 2026-08-10T15:55:58.000Z
---

The following example shows how to create a job application form. It uses the same job application form as in [Example: Create a job application form](docId\:qi_vlxadsy_JfSD40xJGT), but it is displayed on three separate pages instead of a single page. The second step is conditionalized and is only displayed if the visitor selects the Support job type in the first step. It uses the following elements: **Form step**, **Text**, **Selection**, **Text area**, **Hidden visitor profiling**, **File Upload**, and **Submit button**.

![video icon](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/N9bCS8cqKCpxm3t3EWNL6-20260720-145545.svg)

Video tutorial: [Create a multi-step form](https://optimizely.wistia.com/medias/dtspaz3uku) (5:40 minutes)

1. Create three pages: **Personal data**, **Cover letter**, and **Upload CV**.
2. From the assets panel, select **Forms** to list the existing form folders.
3. From a folder's context menu, select **New Form**. In the All Properties view, change the form properties as follows:
   - **Name** – Give the form a name, such as *Job application multi-page*.
   - **Form title** – Enter *Apply with us!* as the form title.
   - **Description** – Enter *Submit your job application with us!* as description.
   - **Show Navigation bar if the form has multiple steps** – Select this checkbox to include a navigation bar that shows the visitor how many steps there are in the form.
4. Drag form elements onto the new form container. Change the elements as follows (add your own **Placeholder** text) and publish each element:

   - **Form step** – Adjust the settings of the form element as follows:
     - Label the form element *Step 1*.

       :::hint{type="info"}
       **Note**

       The *Step title* is what the visitor sees in the form, and *Name* is the form element instance and what you see as the column title in the form submissions.
       :::
     - Enter *Tell us who you are* as description.
     - In the **Settings** tab > **Display step in other content**, select the **Personal data** page.

       ![Display step in other content](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/JneIFJS3THbdcGoXwFSnp-20260720-145545.png "Display step in other content")
     - If you want the visitor to review and confirm the data they enter in this step, see [Example: Add a rich text confirmation step](docId\:MvTEWx-oe5w7GhFL9gnmL).
   - **Text** – Label the form element *Full name* and select the **Required** checkbox. Add a placeholder, for example, *First*\* \*\* Last\*, to let visitors know the expected name format.
   - **Text** – Label the field *Email* and add a tooltip. Select the **Required** and **Email** checkboxes. Add a placeholder, for example, [john.doe@example.com](mailto\:john.doe@example.com) to give visitors an idea of what to add in the text box.
   - **Selection** – Adjust the settings of the form element as follows:
     - **Name**. *Job type*. This makes identifying the specific form element instance in the Form Elements gadget easier.
     - **Label text**. *Job type*. This is the label of the drop-down list the visitor sees in the form.
     - Select the **Required** check box.
     - Under **Choices**> **Use manual input**, add the following items:
       - **Choice**: *Development*; **Value** *Development*.
       - **Choice**: *Engineering*; **Value** *Engineering*.
       - **Choice**: *Expert Services*; **Value** *Expert Services*.
       - **Choice**: *Support*; **Value** *Support*.
   - **Form step** – This form element inserts a conditional page only displayed if the visitor selects the job type *Support*.
     - Label the form element *Step 2*.
     - Enter *Add a summary of your skill set* as a description.
     - On the **Settings** tab:

       ![Settings tab setup for Step 2](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/6F88S6DtdZl8b7kd0FaOr-20260720-145545.png "Settings tab setup for Step 2")

       - **Display step in other content**: click **Browse** and select **Cover letter**.
       - **Only display if field**: click **Browse** and select **Job Type**.

         ![Select dependent field dialog box](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/QPz-e7EsSON5zmTKbWpbF-20260720-145545.png "Select dependent field dialog box")
       - **value...**: select **Equals**.
       - **the following value**: enter *Support*.
   - **Text area** – Label the form element *Cover Letter*. Type *Enter your skill summary here* under **Placeholder text** to let visitors know what information they are expected to enter.
   - **Form step** –
     - Label the form element *Step 3*.
     - Enter *Upload your CV* as a description.
     - On the **Settings** tab > **Display Step in other content**. Click **Browse** and select **Upload CV**.
   - **Hidden visitor profiling** – Select **Geo: Region code**. This field is used for internal purposes only and is not displayed to the visitor. Optimizely will log where each visitor (who fills in the form) is located.
   - **File upload** – This form element inserts a file upload functionality where you control which types of files and file sizes the visitor is allowed to upload.
     Adjust the settings of the form element as follows:
     - **Label text**. Rename to *Upload CV*.
     - **Max file size**. *4* (MB).
     - **Allowed extensions**: *pdf, docx, txt*
     - Select the **Required** check box.
   - **Submit button** – Label the button *Submit application*.

   ![Edited job application form](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/A6EJHhkEkeY3khN3XYEQf-20260720-145545.png "Edited job application form")
5. Publish the form container.
6. Drag the *Job Application multi-page* form onto the pages **Personal data**, **Cover letter**, and **Upload CV** and publish the pages.

## Example: Adding a Rich text confirmation step

The following example shows how to use the Rich text field to add a confirmation step to the multi-page job application form.

1. Open the *Job Application multi-page* form, and drag and drop a Form step and a Rich text element before Step 2.
2. Edit the form step accordingly:
   1. Rename to *Confirm entries* and add a description.
   2. On the **Settings** tab > **Display Step in other content**, click **Browse** and select **Personal data**.
   3. Publish the element.
3. Edit the rich text element in the following image and publish the element. Use the **Insert placeholder** drop-down list to add placeholders to the content.

   :::hint{type="info"}
   **Note**

   Forms 5.5.0 replaced placeholder syntax from hash (#) to double colons (\::), but Forms 5.5.1 added support for either hash (#) or double colons (\::). You should use double colons (\::) because they do not clash with some behaviors in TinyMCE.
   :::

   ![Edit rich text element](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2KhFKGZ5M1WIOt0cHIIdm-20260720-145545.png "Edit rich text element")

   ![Confirmation step added to the Job application multi-page form](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/1cDj7PAf-a3PH3BlZFPP7-20260720-145545.png "Confirmation step added to the Job application multi-page form")
4. Publish your form again.
5. Go to your **Personal data** page to enter a name and email address, and select a job type.

   ![Entering data in Step 1 of the Job application multi-page form](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rrcbUn3er2MLZKv9WTNMH-20260720-145545.png "Entering data in Step 1 of the Job application multi-page form")
6. Click **Next**. The confirmation step displays with the previously entered data.

   ![Displaying the entered data in the Job application multi-page form](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/GDubENXqdPy32V_3WLr2W-20260720-145545.png "Displaying the entered data in the Job application multi-page form")

## Test your form

To test your form, go to **Personal data** on the website and enter data into the form on the page in View mode.

1. Enter a name, and email address, select a job type, and click **Next**.

   ![Step 1 example](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/S9M3Zk-271HN0dtzMYSBK-20260720-145545.png "Step 1 example")
2. If you choose **Support**, you see the following step on **Cover letter**. If you do not select Support, then you see the next step on **Upload CV**. Enter text for a cover letter and click **Next Step**.

   ![Step 2 example](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/86PuMgBqm1xZbKH8x1qN3-20260720-145546.png "Step 2 example")
3. Click **Choose File** and upload a file (pdf, docx, or txt only). Then click **Submit application**. When you submit the data, it is stored in Optimizely.

   ![Step 3 example](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/TtwsB5yRzbQpiviCNzCyn-20260720-145546.png "Step 3 example")

## View form submissions

To view the results of your test, go to your *Job Application multi-page* form and select **Form submissions** from the context menu. The **Form submissions** view appears with data submitted from the form.

![Job application 2 form submissions](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/jwfhGoa9CKsFdLG861EdI-20260720-145546.png "Job application 2 form submissions")