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

Episerver imageExample: Creating a job application form

The following example shows how to create a multi-step form on a single page with selection options, a conditional step (based on the selection option), and a restricted file upload. It uses the following elements: Form step, Text, Selection, Text area, Hidden visitor profiling, Hidden predefined value, 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 form elements onto the new form. The following images show unedited elements, then edited elements for the Job application form.
    1. Form Step. Rename to Step 1.
    2. Text. Rename to Full name with Required.
    3. Text. Rename to Email with Tooltip.
    4. Selection.
      1. Label text. Sob type.
      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.
      1. Rename to Step 2.
      2. On Settings tab:
    6. Text area. Rename to Cover Letter.
    7. Form Step. Rename to Step 3.
    8. Hidden visitor profiling. Select Geo: Region code.
    9. File Upload.
      1. Label text. Rename to Upload Resume.
      2. Max file size. 4 (MB).
      3. Allowed extensionspdf, docx, txt
      4. Enable Required.
    10. Submit button. Rename to Submit Resume.
  4. Select All Properties and enable Show Navigation bar if the form has multiple steps.
  5. Place the Job Application block on 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 an option and click Next Step.

    Episerver image

  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 Step.

    Episerver image

  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.) .

    Episerver image

View form submissions

To view the results of your test, go to your Job Application 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.

Episerver image

back to top Episerver image




Help topics   Need help?   FAQs   Glossary   Site map   Videos

Episerver User Guide 17-1 | Released: 2017-02-07 | © Episerver 2017 | Send feedback to us