# Form element

Add custom form elements to your funnel. Use these elements to build an email list, qualify leads, collect user information, build checklists, and more.&#x20;

## **Choosing the form element type**

There are seven **Input type** options of form elements to choose from. Each one will define what kind of information you want to collect in the field.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FwPu4NJAJzSU6hJYOWttn%2F2025-09-18%20at%2020.55.png?alt=media&#x26;token=2d267640-d2b7-4c0e-b2d6-0de18694cf10" alt=""><figcaption></figcaption></figure>

## Input type

### Checkbox

Use a **checkbox** to collect data or confirm statements. You can also add a red asterisk that indicates filling the checkbox is a requirement.

<div align="right"><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F4QUySx5HxIPDwu31jLET%2FCheckbox.png?alt=media&#x26;token=7a5977c1-424c-4708-8d77-0f136cbc16a2" alt="Add a checkbox to a form element."></div>

### **Input**

The **Input** form element will allow you to collect customer's personal information such as full name, phone number and shipping information.

Use **Input** for a fixed-width (and responsive) field best suited for short text answers.

![Short text answer in an input form element.](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fj58nj0KUMhxwOivrPqhz%2FInput.png?alt=media\&token=2a2ea718-e033-451c-8c54-b455cbff8f8b)

### **Textarea**

The **Textarea** option allows adding a frame that supports text overflow.

![Textarea input type.](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FrmwTlaua6iQpVBy7lN7H%2FTextarea.png?alt=media\&token=2a077fb4-5d9c-4dce-bb20-6f44ab80be2e)

### **Radio**

The **Radio** input type allows you to add one or more circles and create a list of options to choose from.&#x20;

If you want to have multiple options:

1. Click the Radio form element in your canvas once to select it.&#x20;
2. In the top right corner of the blue box that surrounds your element, click Clone FormElement.
3. A new option for your form element will appear.&#x20;
4. Click on the text to modify it.

![Radio input type.](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FA94IJPsLw6j4iSTg3y3H%2FRadio%20input%20type%20ex.png?alt=media\&token=b7f618a5-b975-40de-957d-61ed47e7327d)

### **Number**

When using the **Number** input type, users can enter a number or use the arrows to increase/decrease the value in the field.

![Number input type.](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F8XHYhHY08OGz6bKn1YeN%2FNumber.png?alt=media\&token=2217b3d5-dfc2-4dc4-8d75-2c46bde02fc1)

### **Select**

The **Select** input type creates a drop-down menu that you can customize with a list of options we offer. The “All countries” section will be set as a default for this input type.&#x20;

To customize the form:

1. Scroll down to the **Props** section.
2. Click the **Data type** field and select which kind of data you want to collect with the form.
3. Click the **Options** field and select the options the drop-down will display in your funnel.

#### Custom option

You can add a custom list of the countries where you offer your product.&#x20;

1. In the **Options** field, select **Custom**.&#x20;
2. On the new section below, click **Add option**.
3. &#x20;Under the **Name** field, input how you will identify the field.&#x20;
4. Under the **Value** field, input what your customer will see on the drop-down menu.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FD1yCN8Y6DaId7Adoagpt%2Fimage.png?alt=media&#x26;token=f9417423-a8d8-4c45-afdc-1e5c4421ecc0" alt=""><figcaption></figcaption></figure>

#### Dynamic provinces/states option

This option allows you to have a field that automatically updates the states/provinces of a previously selected country.&#x20;

{% hint style="info" %}
To make this option work, you need to accompany it with an **All countries** or **Custom** option.&#x20;
{% endhint %}

Once you have set up a select form field with the **All countries** or **Custom** option:

1. Add a new **form element** to your canvas.
2. Click **Select** in the **Input type** section.
3. Scroll down to the **Props** section.&#x20;
4. In the **Data type** field, select one of the options associated with a state/city.&#x20;
5. In the **Options** field, select **Dynamic provinces/states**.
6. Click **Save changes** in the top right corner of your page.&#x20;
7. Click the **Preview** button and try out your forms to verify the Dynamic provinces/states are automatically displayed after selecting a country.&#x20;

### Double input

The **Double input** type creates two input fields in the form, this allows you to organize better the information provided by your customer.&#x20;

* To set it up, scroll down in the **settings panel** to the **Props** section and fill in the **Data type** and **Data type #2** fields with the information type you want to collect.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fyj9CqjHJtFVs0eObpM7P%2Fimage.png?alt=media&#x26;token=667626d8-a669-4bb4-8148-f81cb2d84c01" alt=""><figcaption></figcaption></figure>

## Props

Every form element offers different settings options, which you can find under the **Props** section in the **settings panel**.&#x20;

### Toggle switches

#### Is required? toggle switch

Forces the customer to fill out the form to be able to continue to the next step.&#x20;

#### Show label? toggle switch

Most of the forms allow you to have a **Label** that acts as a title to the form or information regarding the field. This switch gives you the option to show or hide these labels.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fa8YdcQxQ7GbCCDvy4u8S%2Fimage.png?alt=media&#x26;token=d4087681-86a8-41e5-ab8b-73c10ce0e64a" alt=""><figcaption></figcaption></figure>

### Data type

Click the **Data type** field to assign the type of information the form will collect from your customers.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FkmhLRKsOMAmTEWfKnfFD%2Fimage.png?alt=media&#x26;token=79bfb4a8-2da7-4368-9738-b50f32880cb1" alt=""><figcaption></figcaption></figure>

### Placeholder

Use this optional feature to place helpful text inside the form element and guide your customers on the information they need to input into that specific field.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F4MQYX5gSgZoiQYQOcqt7%2Fimage.png?alt=media&#x26;token=b9febfdc-203c-4522-9afb-d8030e869fad" alt=""><figcaption></figcaption></figure>
