Web forms is a popular and frequently used feature on websites for creating, for example, questionnaires or registration forms for events. The built-in forms functionality in Episerver CMS is available through a form property, which is added to a page template or a block during implementation. On the Episerver sample site, for example, the forms functionality is made available through a Form block.
You also can create block-based forms; see Episerver forms [BETA].
Locate the Forms property (its location depends on your system configuration), and click the button to access the Select Form dialog, the "entrance" to forms management.
Forms are administered in the Select Form dialog, from where you can view all forms on the website, organize them in folders and use them in content. Forms can be placed in a selected folder when you edit or create them. Form folders can be deleted, note that you can only delete empty folders.
- Click Edit to edit an existing form, this can be saved with a new name to keep the original.
- Click Delete delete a form, forms can also be deleted from within the Edit Form dialog.
- Click Select to select a form, and then Use to use the selected form in content.
- Click No Form to remove a link to a form that is currently used in content.
Start by creating the layout, then add the desired form fields. Complete the form by providing a name and defining the usage, then save it to become available for linking into content.
- Click Insert Row to insert a row above the row that is currently selected.
- Click Add Row to add a row at the bottom of the table.
- Click Delete Row to delete the selected row.
- Click Insert Column to insert a column to the left of the selected column.
- Click Add Column to add a column to the far right of the table.
- Click Delete Column to delete the selected column.
After creating the basic layout, click Form Fields to add the fields. Click a cell in the layout, and select the desired type of field to add. You can also drag a desired property into the selected form table cell. Only one field can be added in each table cell. Depending on the selected field type, properties will be displayed for values to be entered. Save your changes when done with a set of field properties.
Common form field properties
|CSS class||Apply a CSS class (format) for the field (the class must exist in the CSS files for the website).|
Identifies the field in the database, and is not visible to visitors. You can use the same name as for the Heading field.
Only characters A-Z, a-z, 1-9 and _ are allowed.
|Heading||Indicates what should be entered in each form field.|
|ToolTip||The tooltip appears when you place the cursor over the form field.|
|Value must be entered||Select this check box if you want a value to be mandatory. If a value is not entered in the field, an error message will appear. The error message refers primarily to the Heading in the field. If you do not have a heading, it refers to whatever you have entered in the Name field.|
|Validate as||Checks whether a form field value is entered using the correct format, for example an e-mail address, a date format or various types of numbers.|
|Text box||Short text information placed on one row.|
|Text area||Larger amount of free text, you can define number of characters and rows.|
Adds a drop-down list field type to select options from.
Adds options where only one can be selected (compare to check box).
Adds options where multiple selections are allowed.
Adds a button which will send the form when clicked.
|Heading||Adds a heading describing what should be entered, for example to explain sections of large forms.|
|Horizontal rule||Inserts a horizontal rule into the form, for example to split large forms into sections.|
When completing the form, enter values as desired for these form properties:
When completed, click Save and Close to return to the Select Form dialog. Click Use to link the form to desired content.
If you chose to save the form data in the database as a posting result, the aggregated form data can be retrieved for viewing and exporting. Open the content (page or block) where you have linked to the form in the All Properties editing view, and locate the Forms property. Select the View data option to access the form data.
Forms data displayed will be aggregated from all instances (page or block) where the form is used, if needed select a date interval to filter the data and click Search.
- Export to Excel exports the data to a Microsoft Excel file.
- Export to XML exports the data to an XML file.
Forms can be exported between Episerver CMS websites. When exporting a form, an XML file will be created, which is then imported to the other website. Select a form to edit, go to the Import/Export tab, and click Import or Export.