The following examples show how to create a variety of forms.
- Email sign-up form
- Satisfaction survey form
- Job application form (on a single page)
- Job application 2 form (on multiple pages)
You can watch the following Demo of post-processing actions with form metadata video to see how this example is constructed.
- From the Assets pane, select Forms to list the existing form folders.
- From a folder's context menu, select New Form and give it a name such as Coupon for contact information.
- Select Select View > All Properties. The Content tab appears.
- Form title. Enter the name of the form.
- Description. Describe what the function of the form will accomplish.
- Show a summary... Enable this box to pop up a dialog box with summary information about what the visitor is about to submit from the form.
- Confirmation message. Enter a message to display on a summary dialog box along with the entered data on the form. When the user accepts the summary dialog box, the data is saved in the DDSDynamic Data Store; a component offering an API and infrastructure for the saving, loading and searching of compile-time data types (.NET object instances) and runtime data types (property bags). The component is shipped as part of the Episerver Framework package. in Form Submissions.
- Display page after submission. Select a page, such as a Coupon you 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 giving personal details.
- Allow multiple submissions from the same IP/cookie. Enable to let a visitor submit the form more than once.
- 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. To use Forms Service API, which supplies methods to get form submission data, install EPiServer.Forms.ServiceApi.x.xx.x.9000.nupkg. To configure the Service API,
- Go to the admin view > Config > Permissions for Functions.
- Click Edit.
- Add a user or group to the EPiServerServiceApi Read Access right to authenticate the user or group when they use the Service API.
- Form elements. Drag form elements to organize your form. Click Browse to create a new form element. You also can do this in On-Page Editing.
- Category. You can apply a category to content, but your website also needs customized functionality to display the resulting outcome, such as in a filtering. See Creating categories.
- Select the Settings tab.
- Store form submissions. Enable to move submitted data to the Dynamic Data Store (DDSDynamic Data Store; a component offering an API and infrastructure for the saving, loading and searching of compile-time data types (.NET object instances) and runtime data types (property bags). The component is shipped as part of the Episerver Framework package.).
- Send email after submission. Select [+] to open the Create email template dialog box (Edit email template dialog box for existing templates). 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.
- Trigger webhook after submission. Select [+] to open the Add webhook dialog box. Data entered and submitted on the form is sent to the Webhook URLA data 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 on JSON format ("application/json") to third-party endpoint; clear the check box to send data as a normal HTTP POST request ("application/x-www-form-urlencoded").