# Form Blocks

heckout Champ allows you to build custom forms or use premade form templates. The form templates available are dependent on the page type you are creating.

<figure><img src="/files/J4JZXilcLy8mKTlKi5tE" alt=""><figcaption></figcaption></figure>

* [Forms](#formblocks-form)
* [Input](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/duplicate-input-indicator.md)
* [Label](#formblocks-label)
* [Radio Button](#formblocks-radiobutton)
* [Checkbox](#formblocks-checkbox)
* [Select](#formblocks-select)
* [Select Month & Select Year](#formblocks-selectmonth-and-selectyear)
* [Shopping Cart](#formblocks-shoppingcart)

***

### Forms <a href="#formblocks-form" id="formblocks-form"></a>

<figure><img src="/files/i2cYuqGLShj2JDRSyNQX" alt=""><figcaption></figcaption></figure>

The forms element will add a basic form to your page which you can add more inputs to and style to your needs and preferences.

This form includes the following fields:

* Name - Input Field for First Name
* Email - Input Field for Email address
* Gender - Radio Buttons with Male/Female options
* Save/Submit Button - Button element which can be configured to perform specific actions based on your preference.

<figure><img src="/files/FH8Zpen753ltbsiphpSv" alt=""><figcaption></figcaption></figure>

***

### Input <a href="#formblocks-input" id="formblocks-input"></a>

<figure><img src="/files/ap8sjaipJkVIdloX5ElX" alt=""><figcaption></figcaption></figure>

A form input field which can be used to collect custom data.

After selecting an Input element, use the Settings inside the Style Manager to determine which field that the input represents.

{% hint style="success" %}
Additional instructions for Custom Fields: [Applying custom fields to inputs](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/applying-custom-fields-to-inputs.md)

Additional instructions for Placeholder formats: [Placeholders and Input Formats](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/placeholders-and-input-formats.md)
{% endhint %}

<figure><img src="/files/2OBbYI7AIpbXxSYwf1kU" alt=""><figcaption></figcaption></figure>

***

### Label <a href="#formblocks-label" id="formblocks-label"></a>

<figure><img src="/files/R77LukSEUjUG5aZgBTSK" alt=""><figcaption></figcaption></figure>

Use labels to define form elements.<br>

***

### Radio Button <a href="#formblocks-radiobutton" id="formblocks-radiobutton"></a>

<figure><img src="/files/HfZf1oCzQ3Y8936kdJw5" alt=""><figcaption></figcaption></figure>

Add a radio button element to your page when you want your visitors to make a selection. A radio button can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your radio button.

<figure><img src="/files/Cn0jFH1jjCtyrHTiUNTW" alt=""><figcaption></figcaption></figure>

***

### Checkbox <a href="#formblocks-checkbox" id="formblocks-checkbox"></a>

<figure><img src="/files/EqN6uPOfzcm8nav6o1U4" alt=""><figcaption></figcaption></figure>

Add a checkbox element to your page when you want your visitors to select or acknowledge something on your page. A checkbox can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your checkbox.

<figure><img src="/files/OkFw9IFq0ZdLNm1H6xJp" alt=""><figcaption></figcaption></figure>

***

### Select <a href="#formblocks-select" id="formblocks-select"></a>

<figure><img src="/files/B6PR4VcUd2d7TTHrirYX" alt=""><figcaption></figcaption></figure>

This element can be used to provide a drop down menu of different options.\
\
After dropping the Select element to your page, click on the element and view it’s settings under the Style Manager.

<figure><img src="/files/njvmBa8KbHuUhjfk20il" alt=""><figcaption></figcaption></figure>

Set the Name of the element from the dropdown options. If you choose Card Month, Card Year, Ship Profile, State, Ship State, Country or Ship Country, the options for the customer will automatically appear on the live page.

***

### Select Month & Select Year <a href="#formblocks-selectmonth-and-selectyear" id="formblocks-selectmonth-and-selectyear"></a>

<figure><img src="/files/7XQewuppDKlqWgd4p6zR" alt=""><figcaption></figcaption></figure>

These are premade versions of the Select element which are preset to be a month/year selector.

***

### Shopping Cart <a href="#formblocks-shoppingcart" id="formblocks-shoppingcart"></a>

<figure><img src="/files/uWRv0Sz9MIKZXqsH4S5R" alt=""><figcaption></figcaption></figure>

Please view [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks/shopping-cart-element.md) for more information about the Shopping Cart element.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
