> For the complete documentation index, see [llms.txt](https://docs.funnelish.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.funnelish.com/start/funnel-builder/form-element.md).

# 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="/files/xQrNHOll47WUxkEKq8Mk" 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="/files/XW2HSyJbHmfAAme5tN1I" 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.](/files/MUC7pgLyCdKPNS9g866v)

### **Textarea**

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

![Textarea input type.](/files/yfTasXkkRaPAMIpB1CiZ)

### **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.](/files/vwmJyza7ghZs8OmufbHD)

### **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.](/files/X6diyDct0z9uC4ci9wWk)

### **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="/files/MYibv4VS7ZyZfNcqV84X" 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="/files/GHMslyhciBCxDtWLoYzv" 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="/files/vmny4frTWa1uy6sVUbtV" 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="/files/yQZc318KYZMLZRRyKHzJ" 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="/files/0h5Q1V7IiBG38JMZGoOk" alt=""><figcaption></figcaption></figure>
