Add-ons > Episerver Forms > Creating a form > Example: Creating a multi-page job application form

Example: Creating a multi-page job application form

The following example shows how to create a form that appears on multiple pages. This is example uses the same form as in Example: Creating a job application form except that its steps appear on separate pages. It uses the following elements: Form step, Text, Selection, Text area, Hidden visitor profiling, Hidden predefined value, File Upload, and Submit button.

You can watch the following Demo of creating a multi-step form video to see how this example is constructed. Click the title of the video to open it in a new browser window. (5:37 minutes)

  1. Create 3 new pages: Page A, Page B, and Page C.
  2. From the Assets pane, select Forms to list the existing form folders.
  3. From a folder's context menu, select New Form and give it a name such as Job application 2.
  4. Drag form elements onto the new form. The following image shows edited elements for the Job Application form.
    1. Form Step.
      1. Rename to Step 1.
      2. On the Settings tab > Display Step in other content. Click Browse and select Page A.
    2. Text. Rename to Name with Required.
    3. Text. Rename to Email with Tooltip.
    4. Selection.
      1. Label. Select your job application choice.
      2. RequiredEnabled.
      3. Choices. Use manual input.
      4. Add items
        • Choice: Development ; Value Development .
        • Choice: Engineering; Value Engineering.
        • Choice: Expert Services; Value Expert Services.
        • Choice: Support; Value Support.
    5. Form Step.
    6. Text area. Rename to Cover Letter.
    7. Form Step.
      1. Rename to Step 3.
      2. On Settings tab > Display Step in other content. Click Browse and select Page C.
    8. Hidden predefined value. Enter Job Application in Predefined value.
    9. Hidden visitor profiling. Select Geo: Region code.
      1. File Upload.
        • Label text. Rename to Upload Resume.
        • Max file size. 4 (MB).
        • Allowed extensionspdf, docx, txt
    10. Submit button. Rename to Submit Resume.
  5. Select All Properties and enable Show Navigation bar if the form has multiple steps.
  6. Place the Job Application 2 block on Page A, Page B, and Page C and publish the pages.

Test your form

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

  1. Enter a name, email address, select an option and click Next Step.

  2. If you choose Support, then you see the following step on Page B. If you do not select Support, then you see the next step on Page C. Enter text for a cover letter and click Next Step.

  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 the Episerver Dynamic Data Store (DDSDynamic Data Store; a component offering an API and infrastructure for the saving, loading and searching of compile-time data types (.NET object instances) and runtime data types (property bags). The component is shipped as part of the Episerver Framework package.) .

View form submissions

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

You can export form data to XML, CSV, or JSON formats.

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 Example: Creating a multi-page job application form.

  1. Edit the Job Application form, and add a Form step and a Rich text element before Step 2.
  2. Edit Form Step and publish the element,
    1. Rename to Confirm entries and add a Description.
    2. On the Settings tab > Display Step in other content. Click Browse and select Page A.
  3. Edit Rich text as shown in the following image, and publish the element. Use the Insert placeholder drop-down to add placeholders to the content.
  4. Go to your page where the multiple-step form is and enter information, similar to that shown in the following image.
  5. Click Next step. The confirmation step appears with the previously entered data.
back to top




Episerver User Guide 16-4 | Released: 2016-05-27 | © Episerver 2016 | Send feedback to us