To create a form on your website, you first create a form container and then add one or more form elements to it. The form elements can add, for example, a name field, an email field and a Submit button to the form.
Each form container has metadata that you can specify. The metadata contains information on the form such as title, description, included form elements, and confirmation message when the form has been submitted.
You can watch the following demonstration video, Demo of post-processing actions with form metadata. (3:46 minutes)
- In the assets pane, select Forms to list the existing form folders or create a new folder for your form by clicking the plus icon + in the lower left corner of the assets pane.
- From a folder's context menu, select New Form and give it a name such as Coupon for contact information.
- Select the All Properties view. Adjust the properties as necessary in the Content tab:
Property Description Form title Enter the name of the form. Description Describe what the function of the form will accomplish. Show a summary... Enable this check box to pop up a dialog box with summary information about what the visitor is about to submit from the form. You can also add a message to this summary dialog box, see Confirmation message below. Confirmation message Enter a message to display on the summary dialog box (enabled with the Show a summary... check box) along with the entered data on the form. When the user accepts the summary dialog box, the data is saved and can be viewed in Form Submissions view.
To get the confirmation message styled like in the image above, you must have the Forms Samples installed.
Display page after submission Select a page, such as a Coupon page, that you want to display after the form is submitted. Display message after form submission Enter a message that you want to display after the form is submitted.
The message is not displayed if you select a page in Display page after submission.
Allow anonymous submissions Enable to let a visitor submit form data, such as an online survey, without needing to log in; if disabled, a user must be logged in to submit the form. Allow multiple submissions from the same IP/cookie Enable to let a visitor submit the form more than once. This is useful if you want to test your form yourself. Show navigation bar if the form has multiple steps Enable to display a progress bar for multiples steps, such as for a long online survey. Allow access to the form data through the service API Enable to let a developer (or other app) get form submission data by using the Forms Service API. For information, see Using the Forms Service API in the Episerver Forms Developer guide. Form elements Drag and drop form elements from the Form Elements gadgetSmall application component that is responsible for its own rendering and behavior, accessible from the dashboard or the panes in the Episerver user interface. A gadget can contain functionality that you can use within the gadget interface or link away to other products integrated in Episerver (for example, a direct link to CMS / Pages where you can use the classic editing view features). to this area or rearrange the order of the form elements by drag and drop. You can also do this in the on-page edit view of the form container. See Configuring a form element and Form element types. Category You can apply a categoryCMS: A built-in Episerver property. You apply a category to content, but you need to build the functionality to display the filtered results. Commerce: A grouping of purchasable products. (Same as node.) to content, but your website also needs customized functionality done by a developer to display the resulting outcome, such as in a filtering. See Creating categories.
- Select the Settings tab and adjust the properties as necessary:
Property Description Metadata This hidden attribute lets a developer run custom code. For more information, see Rendering metadata in the Episerver Forms Developer guide. Store form submissions Enable submitted data to be stored. If enabled, the data is permanently stored in storage. If not, data is temporarily stored in the visitor's browser session until the session is expired. Send email after submission You can customize your form to send the visitor an email after they have submitted the form.
- Select + to open the Create email template dialog box.
- Add a from and a to address, and an email subject. You can use placeholders to automatically fill in data from the form, such as #EMAIL#, #NAME#, #SUMMARY#, and so on. You can type these or select them from the Insert placeholder menu. Developers can create additional placeholders.
- Add a body text in the Message field and click Add.
For Episerver Forms to send out emails, an administrator has to set up an email server, see Configuring your email server on Episerver World.
Trigger webhook after submission Select + to open the Add webhook dialog box. Data entered and submitted on the form is sent to the Webhook URLData hub that gathers information from form data through API calls.Information at the data hub can process form data and route information to a specific support center, a customer representative, or other destination.. Select the check box to send a POST request in JSON format (application/json); clear the check box to send data as a normal HTTP POST request (application/x-www-form-urlencoded).
The following examples show how to create a variety of forms: