Add-ons > Episerver Forms > Creating a form > Example: Creating an email form

Example: Creating an email sign up form

The following example shows how to create a single form to collect contact information from a visitor (name, email, and additional optional information). It uses the following form elements: Text, Number, Text area, Hidden visitor profiling, Hidden predefined value, Reset button, and Submit button.

You can watch the following Demo of an email form video to see how this example is constructed. Click the title of the video to open it in a new browser window. (5:17 minutes)

  1. From the Assets pane, select the Forms tab. (Existing forms appear with their associated folders.)
  2. From a folder's context menu, select New Form and give it a name such as E-mail sign up.
  3. Drag form elements onto the new form. The following image shows unedited elements for the E-mail sign up form.
  4. Select Edit from an element's context menu. The form element's specification screen appears.
  5. Change the elements as follows (add your own Placeholder text) and publish each element:
    1. Text. Rename to First Name with Required checked.
    2. Text. Rename to Last Name with Required checked.
    3. Text. Rename to E-mail Address with Required and Email checked.
    4. Number. Rename to Phone number with Positive Integer checked.
    5. Text area. Rename to Comments.
    6. Hidden predefined value. Enter Campaign-123 in Predefined value.
    7. Hidden visitor profiling. Select Geo: Region Code.
    8. Reset button. Rename to Clear.
    9. Submit button. Rename to Submit Form.

    The E-mail sign up form should look something like the following image:

  6. Publish the form container. It appears in your Forms list.
  7. Place the block on a web page and publish the page.

Test your form

To test your form, enter data into the form on the page in View mode and click Submit Form. 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 E-mail sign up form block and select Form submissions from the menu. (You also can open the Select view menu and select Form submissions.) 

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

back to top




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