---
title: Create a form
slug: cms-12/docs/create-a-form
docTags: 
createdAt: 2026-08-10T15:55:57.000Z
---

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 icon](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/9C0poClLmZlu_NzTVXGc7-20260720-145527.svg)

Video tutorial: [Demo of post-processing actions with form metadata](https://optimizely.wistia.com/medias/uzgjaopbii). (3:46 minutes)

1. 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.
2. From a folder's context menu, select **New Form** and give it a name such as *Coupon for contact information*.
3. 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](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/IliGVaN7vj1uM91iZSblV-20260720-145528.png "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](docId:31cguaYugbeXg67nPND0c).
   - **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](docId:-Ft-gG_xwDQf6V-KoyT-Q) and [Form element types](docId\:iuBeFWU1XVa80qHBgxw9i).
   - **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](docId\:jripWVk3-oWvzwLQmV4IS).

     ![New form container Content tab](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_cBLx51u4bdQoyYHdznlS-20260720-145527.png "New form container Content tab")
4. 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](https://world.optimizely.com/documentation/developer-guides/forms/rendering-metadata-to-html-element/) in the [Optimizely Forms Developer guide](https://world.optimizely.com/documentation/developer-guides/forms/).
   - **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.
     1. Select + to open the Create email template dialog box.
     2. 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.

        :::hint{type="info"}
        **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.
        :::
     3. Add a body text in the **Message** field and click **Add**.

        ![Create email template dialog box](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/QR3_m82-ihzF3LGkllWs9-20260720-145527.png "Create email template dialog box")

:::Paragraph{indent="3"}
For Optimizely Forms to send out emails, a developer has to set up an email server; see [Configure your email server](docId:3xHKpZbHS-aJgOSfh6KiB).
:::

:::Paragraph{listStyleType="disc" indent="2"}
**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).
:::

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/HcMhR2v1geiVMfeFPO6pC-20260720-145527.png" size="100" caption="Add webhook dialog box" alt="Add webhook dialog box" isUploading="false" showCaption="true" indent="3"}

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/mj5OM872IPFR2rfwnF5mD-20260720-145527.png" size="100" caption="New form container Settings tab" alt="New form container Settings tab" isUploading="false" showCaption="true" indent="3"}

## Forms examples

The following examples show how to create a variety of forms:

- [Email sign-up form](docId\:z1v4wYMCe6YB-0_3PcjqT)
- [Satisfaction survey form](docId:8OOUWjyYlmPC8GAHtmie_)
- [Customer satisfaction form with dependencies between form fields](docId:4FiJsqAtDUbARw_d0nPfu)
- [Job application form on a single page](docId\:qi_vlxadsy_JfSD40xJGT)
- [Job application form ](docId\:MvTEWx-oe5w7GhFL9gnmL)[on multiple pages](docId\:MvTEWx-oe5w7GhFL9gnmL)