Create a form
4 min
To create a form on your website, you create a form container and add one or more form elements. 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 is submitted.
Video tutorial: Demo of post-processing actions with form metadata. (3:46 minutes)
- In the assets panel, select Forms to list the existing form folders or create a folder for your form by clicking the plus icon + in the lower left corner of the assets panel.
- 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:
- Form title – Enter the name of the form.
- Description – Describe what the function of the form will accomplish.
- Show a summary – Enable this checkbox to pop up a dialog box with summary information about what the visitor will submit from the form. You can also add a message to this summary dialog box; see the Confirmation message below.
- Confirmation message – Enter a message to display on the summary dialog box (enabled with the Show a summary... checkbox) 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 the Form Submissions view. You must install the Forms Samples to get the confirmation message styled like in the image above.
Example of summary dialog box with confirmation message
- Display page after submission – Select a page, such as a Coupon page, that you want to display after submitting the form. This is overridden if set to the Submit button.
- Display message after form submission – Enter a message you want to display after submitting the form. The message is not displayed if you select a page in Display page after submission.
- Allow anonymous submissions – Enable a visitor to 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 a visitor to 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 multiple steps, such as for a long online survey.
- Allow access to the form data through the service API – Enable a developer (or other app) to get form submission data using the Forms Service API.
- Form elements – Drag and drop form elements from the Form Elements gadget 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 Configure a form element and Form element types.
- Category – You can apply a category to content, but your website also needs customized functionality done by a developer to display the resulting outcome, such as in filtering. See Categories.
New form container Content tab
- Select the Settings tab and adjust the properties as necessary:
- Metadata – This hidden attribute lets a developer run custom code. For information, see Render metadata in the Optimizely 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 fill in data from the form automatically, 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.
Note
Forms 5.5.0 replaced placeholder syntax from hash (#) to double colons (::), but Forms 5.5.1 added support for either hash (#) or double colons (::). You should use double colons (::) because they do not clash with some behaviors in TinyMCE.
- Add a body text in the Message field and click Add.
Create email template dialog box
For Optimizely Forms to send out emails, a developer has to set up an email server; see Configure your email server.
- Trigger webhook after submission – Select + to open the Add webhook dialog box. Data entered and submitted on the form is sent to the Webhook URL. 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).
Add webhook dialog box
New form container Settings tab
Forms examples
The following examples show how to create a variety of forms: