Optimizely Apps & IntegrationsExample: Creating a job application form

The following example shows how to create a job application form with multiple steps. In the first step, the visitor Someone 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.) enters their name and email address and select a job type to apply for. If the visitor selects the job type Support, a second step is displayed where they can enter some additional information. Visitors who select any other job type are taken directly to step three, where they can upload a resume. It uses the following elements: Form step, Text, Selection, Text area, Hidden visitor profiling, File Upload, and Submit button.

  1. From the assets pane, select Forms to list the existing form folders.
  2. From a folder's context menu, select New Form and give it a name such as Job application.
  3. Drag the following form elements onto the new form container. Change the elements as follows (add your own Placeholder text) and publish each element:
    Form elementConfiguration
    Form stepLabel the form element Step 1.
    TextLabel the field Full name and select the Required check box.
    TextLabel the field Email and add a tooltip.
    SelectionAdjust the settings of the form element as follows:
    • Name the elementJob type
    • Label text: Job type
    • Select the Required check box.
    • Under Choices, select Use manual input and 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 step that is only displayed if the visitor selects the job type Support.
    • Label the form element Step 2.
    • On the Settings tab, make the following adjustments:
      • Only display if field: click Browse [...] and select Job type.

        Image: Select dependent field

      • value...: select Equals.
      • the following value: enter Support.

        Image: Settings tab setup

    Text areaLabel the form element Cover Letter.
    Form stepLabel the form element Step 3.
    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 textUpload resume. Allowed file types: PDF, DOCX, TXT.
    • Max file size: 4 (MB).
    • Allowed extensionspdf, docx, txt
    • Select the Required check box.
    Submit buttonLabel the button Submit resume.

    Image: Edited job application form

  4. Select All Properties view and select the Show Navigation bar if the form has multiple steps check box.
  5. Publish the form container.
  6. Drag and drop the Job Application form onto a web page and publish the page.

Test your form

To test your form, go to the page 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. If you do not select Support, then you skip this step and go to the next step. Enter text for a cover letter and click Next.

    Image: Step 2 example

  3. Click Choose File and upload a file (pdf, docx, or txt only). Then click Submit resume. 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 form and select Form submissions from the context menu. The Form submissions view appears with data submitted from the form.

Image: Job application form submissions