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. See Form element types for more information.

1. From the assets pane, select the Forms tab.
2. Browse to a folder where you want to save the form, or create a new folder by clicking the + sign.
3. From the folder's context menu, select New Form and give it a name such as Email sign up.
4. Drag form elements onto the new form container. The following image shows unedited elements for your new form.
   —Image: Initial form container before editing—

   

5. Hover over a form element to see the element's context menu. Select Edit from the context menu.
6. Change the elements as follows (add your own Placeholder text) and publish each element:
   

   Element	Configuration
   Text	Label the field First Name and select the Required check box.
   Text	Label the field Last Name and select the Required check box.
   Text	Label the field Email Address and select the Required and Email check boxes.
   Number	Label the field Phone number and select the Positive Integer check box.
   Text area	Label the field Comments.
   Hidden visitor profiling	Select Geo: Region Code. This field is used for internal purposes only and is not displayed to the visitor. Episerver will log where each visitor (who fills in the form) is located.
   Hidden predefined value	Enter Campaign-123 in Predefined value. This field is used for internal purposes only and is not displayed to the visitor. You can use the predefined value to associate the form with a specific campaign.
   Reset button	Label the button Clear.
   Submit button	Label the button Submit form.

   The Email sign up form should look something like the following image.

   —Image: Form container after editing—

   

7. Publish the form container. It appears in your Forms list.
   —Image: Forms list—

   

8. Drag and drop the form onto 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 Episerver.

View your form submission

To view the results of your test, go to your E-mail sign up form in the Forms gadget and select Form submissions from the context menu.