Using the built-in forms functionality (Legacy)
This topic describes the built-in forms functionality in Episerver CMS which is available through a form property. The form property is added to a page template or a block during implementation. On the Episerver sample site, the forms functionality is made available through a Form block.
This functionality can still be used on older versions of Episerver but we recommend you to use the new block-based Episerver Forms add-on.
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.
Managing forms
Forms are administered in the Select Form dialog box, from where you can view all web-based forms on the website, organize them in folders and use them in content. You can place forms in a selected folder when you edit or create them. You can delete form folders but you can only delete empty folders.
- Click Edit to edit an existing form. You can save the existing form with a new name to keep the original.
- Click Delete delete a form. You also can delete forms from within the Edit Form dialog box.
- 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.
Creating a form
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.
1. Creating the layout
Table Layout allows you to add rows and columns as desired to design the form. The table must contain at least one cell (row or column) before you can add any form fields.
- 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.
2. Adding form fields
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 also can drag a desired property into the selected form table cell. You can add only one field in each table cell. Depending on the selected field type, properties are displayed for values to be entered. Save your changes when done with a set of field properties.
Common form field properties
| Field property | Description |
|---|---|
| CSS class | Apply a CSS class (format) for the field (the class must exist in the CSS files for the website). |
| Name (mandatory) |
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 appears that 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 email address, a date format or various types of numbers. |
Form field types
| Field type | Description |
|---|---|
| Text box | Short text information placed on one row. |
| Text area | Larger amount of free text, you can define number of characters and rows. |
| Drop-down list |
Adds a drop-down list field type to select options from.
|
| Radio button |
Adds options where only one can be selected (compare to check box).
|
| Check box |
Adds options where multiple selections are allowed.
|
| Button |
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. |
3. Completing the form
When you complete the form, enter values for the following form properties:
When completed, click Save and Close to return to the Select Form dialog. Click Use to link the form to desired content.
Viewing and exporting form data
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 is 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.
Before exporting, you can clean up the data by deleting any incorrect postings. Select the postings to export (click Select all to include all), and select the desired format to export to:
- Export to Excel exports the data to a Microsoft Excel file.
- Export to XML exports the data to an XML file.
Exporting forms
You can export forms between Episerver CMS websites. When you export a form, an XML file is 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.
Need help?