---
title: Create a form
slug: cms-saas/docs/create-a-form
createdAt: 2026-07-30T20:18:09.000Z
---

Forms in Optimizely CMS (SaaS) are built as shared blocks that contain form elements such as text inputs, drop-down lists, and a submit element. A form can contain multiple steps. Steps break a long form into smaller stages that visitors complete one at a time, instead of showing every question at once. This helps you group related fields and can improve completion by reducing the effort of a single long page. Each step contains its own rows, columns, and elements. The form outline lists every step and gives you an overview of the whole form.

The following steps describe how to create a page that hosts the form and the shared block that holds the form fields.

1. Select **More > Create Page** from the page tree. The **Create Page** window displays.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Iu2hshJmqhW6lo1M3t7Ry-20260903-154432.png)

2. Enter a name (*Opticon*), select **Blank Experience** (or other template), and click **Create**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-6XwWPxO0i5OvFD6xy6vW-20260903-154432.png)

3. Select **Add** > **Create Shared Block**. The **Create Shared Block** window displays.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/4eaKKuFq-w3GF5zmIjCWq-20260903-154432.png)

4. Enter a name for the block (*Register for Opticon*) and select the **Form container** data block. The block displays in the **Shared Blocks** list in the **For All Applications** folder.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/V-wOWEVX6taKGW4h2HgCi-20260903-154432.png)

5. Search for your block by entering text in the search field. Drag your block to the outline.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/0QMpYQpuFC_0j2vsxS-sL-20260903-154432.png)

:::Paragraph{indent="1"}
The block displays in the outline.
:::

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/0zNY08lroPf3vDzP0fc2i-20260903-154432.png)

6. Click in the outline and click **Add a form step** to start your form.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/WxiBsyYxX87NcpCNrZx1p-20260903-154432.png)

:::Paragraph{indent="1"}
This example creates a form with six rows and the following information:
:::

:::Paragraph{listStyleType="disc" indent="2"}
Row 1 – Two columns; *First name* (**Textbox**) and *Last name*  (**Textbox**)
:::

:::Paragraph{listStyleType="disc" indent="2"}
Row 2 – One column; *Work email* (**Textbox**)
:::

:::Paragraph{listStyleType="disc" indent="2"}
Row 3 – Two columns; *Company*  (**Textbox**) and *Role* (**Textbox**)
:::

:::Paragraph{listStyleType="disc" indent="2"}
Row 4 – Two columns; *Phone* (**Textbox**) and *Country* (**Textbox**)
:::

:::Paragraph{listStyleType="disc" indent="2"}
Row 5 – One column; *Tell us more*  (**Textarea**)
:::

:::Paragraph{listStyleType="disc" indent="2"}
Row 6 – One column; *Submit* (**Submit**)
:::

:::Paragraph{indent="1"}
The completed form should look similar to this:
:::

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/9qsAolxLGGYspwJYf85gM-20260903-154432.png)

7. Select **Add Row** in **Form Step**.
8. Select **Add Column** in **Row**. Select **Add Column** again to put two columns in the row.
9. Select **Add Element** > **Textbox** in **Column**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/0eTp74sEGXiDqIUJYK3Ou-20260903-154432.png)

10. Click the **Textbox** and enter the data. Visual Builder dynamically builds the form as you enter data.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/OQoECN2wU5MxWOM5S6xk0-20260903-154432.png)

:::Paragraph{listStyleType="disc" indent="2"}
**Label** – Enter the text of the label that displays on the form.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Placeholder text** – Give an example of what you want in the field. It is not recorded in the form data.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Tooltip** – Enter the text you want to display when the user hovers over the field to provide added information.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Predefined value** – Internally name or code submitted form data to distinguish the data from other data. For example, you might enter *Christmas-campaign* in one form and *Hanukkah-campaign* in another to know that the form submissions are related to a particular marketing campaign.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Validators** – Select **Required field** if you want to ensure the form data cannot be submitted unless you have it filled in. A red asterisk (\*) displays next to required fields.
:::

:::Paragraph{listStyleType="disc" indent="3"}
**Error message** – Enter a text message to display if the field data does not comply with its restrictions.
:::

:::Paragraph{listStyleType="disc" indent="3"}
**Email** – Select to require a valid email address.
:::

:::Paragraph{listStyleType="disc" indent="3"}
**Number** – Select to allow only integers in the field.
:::

:::Paragraph{listStyleType="disc" indent="3"}
**Regular expression** – Select to allow a regular expression pattern (such as /\s\*/).
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Autocomplete** – Select the relevant option to help the user enter data.
:::

11. Repeat Step 10 for the next column (1.1.2) and enter the *Last name* **Textbox** data. Continue to build the form for *Work email*, *Company*, *Job title,* and *Phone* with Textbox.
12. Click **Add** to specify options for the user to select for the *Country* field (column 1.4.2).

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-Vo2M-Jd75ztIfcfY87Zs-20260903-154432.png)

:::hint{type="info" indent="1"}
**Note**

- The *Message* field (column 1.5.1.) has a **Textarea** element instead of a **Textbox** element to let the user enter as much text as they need.
- The *Submit* field (column 1.6.1) has a **Submit** element which creates a link for the user to send the form data.
:::

You can continue to add separate form steps to break a long form into smaller stages that visitors complete one at a time, instead of showing every question at once.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/zEgPXjsvOlMYV_wQBw9JO-20260903-154433.png)

You can also [configure form rules](docId\:mLewrtj3kVm5de9D-QPN5) to dynamically show or hide form fields and steps based on visitor input, creating more relevant and streamlined forms. Mark (Optimizely Agent Platform) can also [configure these rules](docId\:mLewrtj3kVm5de9D-QPN5) from a plain-language description.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/6S8o15mrfYEbnHW1Z6Ucw-20260903-154433.png)