Forms are a key element of many websites to collect information to provide a better user experience. Some examples of forms are Contact us, Sign up for our newsletter, Sign up for an event, and Apply for a job.
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.
You can still use this functionality on older versions of Episerver but we recommend that you use the block-based Episerver Forms add-on. The block-based approach to web forms has the following advantages:
- Re-use. You can re-use blocks with existing content to create new forms.
- Customized rendering. You can customize rendering of forms and form elements because you can customize rendering of blocks, including renderings for display channels, personalizationAdapt content to customized target groups for a more personalized website experience, such as displaying different content to first time and returning visitors. (See visitor groups.), multi-language, and permissions.
Using the built-in forms functionality
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 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 can also 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.
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. 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
|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 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.|
|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 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.
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.
- Export to Excel exports the data to a Microsoft Excel file.
- Export to XML exports the data to an XML file.
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.