Add-ons > Episerver Forms > Creating a form > Example: Creating a survey form

Episerver imageExample: Creating a satisfaction survey form

The following example shows how to create a multi-step form with choices, required fields, and a progress bar. It uses the following form elements: Form Step, Multiple or single choice, Text, Text area, Hidden visitor profiling, Hidden predefined value, 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 Satisfaction Survey.
  3. Drag form elements onto the new form. The following image shows edited elements for the Satisfaction Survey form.
    1. On-Page Editing view: Add the following elements.
      • Form Step. Rename to Step 1.
      • Multiple/single choice
        • Label. How would you rate our service?
        • TooltipChoose from 1 (poor) to 5 (excellent).
        • RequiredEnabled.
        • Choices. Use manual input.
        • Add items
          • Choice: 5 Excellent; Value 5.
          • Choice: 4 Great; Value 4.
          • Choice: 3 Neutral; Value 3.
          • Choice: 2 Lacking; Value 2.
          • Choice: 1 Poor; Value 1.
        • Rename to First Name with Required.
      • Form Step. Rename to Step 2.
      • Multiple/single choice.
        • Label. How likely are you to return?
        • TooltipHow likely are you to return?
        • RequiredEnabled.
        • Choices. Use manual input.
        • Add items
          • Choice: 5 I'll be back!; Value 5.
          • Choice: 4 It is likely.; Value 4.
          • Choice: 3 Maybe yes. Maybe no.; Value 3.
          • Choice: 2 I don't think so.; Value 2.
          • Choice: 1 No way!; Value 1.
      • Form Step. Rename to Step 3.
      • Text. Rename to E-mail address (optional) with Tooltip.
      • Text area. Rename to Comments.
      • Hidden visitor profiling. Select Visitor Groups: Name.
      • Hidden predefined value. Enter Satisfaction-survey in Predefined value.
      • Submit button. Rename to Submit Survey.
    2. All Properties view: Specify the following values.
      • Form TitleSatisfaction Survey
      • TooltipTake our survey!
      • Confirmation messageThank you for taking our survey.
      • Show process bar.... Enable.
  4. Publish the form container. It appears in your Forms list.
  5. Place the Satisfaction Survey 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. Select an option and click Next Step.

    Episerver image

  2. Select an option and click Next Step.

    Episerver image

  3. Enter an email address and comments and click Submit Survey. A confirmation box appears. 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

    Episerver image

View form submissions

To view the results of your test, go to your Satisfaction Survey 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