Optimizely Apps & IntegrationsExample: Creating a multi-page job application form

The following example shows how to create a job application form. It uses the same job application form as in Example: Creating a job application form, but this form is displayed on three separate pages instead of on a single page. The second step is conditionalized and is only displayed if the visitorSomeone who visits a website using a web browser. In most cases, a visitor can use public functions and services but cannot create content and has limited access to community content. In an SEO context, visitor means the number of visits to a URL through channels (external referrers), direct arrivals, and internal links. (See also visitor groups.) 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.

  1. Create three new pages: Personal data, Cover letter, and Upload CV.
  2. From the assets pane, 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:
    Container settingConfiguration
    NameGive the form a name such as Job application multi-page.
    Form titleEnter Apply with us! as form title.
    DescriptionEnter Submit your job application with us! as description.
    Show Navigation bar if the form has multiple stepsSelect this check box to include a navigation bar which 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 elementConfiguration
    Form step

    Adjust the settings of the form element as follows:

    • Label the form element Step 1.

      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.

      Image: Display step in other content

    • If you want the visitor to review and confirm the data they enter in this step, see Example: Adding a Rich text confirmation step.
    TextLabel the form element Full name and select the Required check box. Add a placeholder, for example First {Middle} Last, to let visitors know the expected name format.
    TextLabel the field Email and add a tooltip. Select the Required and Email check boxes. Add a placeholder, for example [email protected] under to give visitors an idea what to add in the text box.
    SelectionAdjust the settings of the form element as follows:
    • Name. Job type. This makes it easier to identify the specific form element instance in the Form Elements gadget.
    • Label text. Job type. This is the label of the drop-down list that 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 stepThis form element inserts a conditional page that is 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 description.
    • On the Settings tab:

      Image: 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.

          Image: Select dependent field dialog box

      • value...: select Equals.
      • the following value: enter Support.
    Text areaLabel the form element Cover Letter. Enter Enter your skill summary here under Placeholder text to let visitor know what kind of information they are expected to enter.
    Form step
    • Label the form element Step 3.
    • Enter Upload your CV as description.
    • On the Settings tab > Display Step in other content. Click Browse and select Upload CV.
    Hidden visitor profilingSelect 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 uploadThis form element inserts a file upload functionality where you control which types of files and file size 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 extensionspdf, docx, txt
    • Select the Required check box.
    Submit buttonLabel the button Submit application.

    Image: 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 as shown in the following image and publish the element. Use the Insert placeholder drop-down list to add placeholders to the content.

    Image: Edit rich text element

    Image: Confirmation step added to the Job application multi-page form

  4. Publish your form again.
  5. Go to your Personal data page and enter a name and email address, and select a job type.

    Image: Entering data in Step 1 of the Job application multi-page form

  6. Click Next. The confirmation step appears with the previously entered data.

    Image: 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, email address, select a job type and click Next.

    Image: Step 1 example

  2. If you choose Support, then 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.

    Image: 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.

    Image: 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.

Image: Job application 2 form submissions