> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/shared-blocks/form.md).

# Form

{% hint style="success" %}
The *Form* block displays two default input fields and the *Comment field*.\
To add the [<mark style="color:$primary;">Custom field</mark>](/triumph/template/shared-blocks/form/custom-field.md), press the '**Add block**' button.
{% endhint %}

### Submit button

**Button style**

{% hint style="info" %}
If no colors are set in the corresponding section, the button uses the default styles defined in *Theme settings ->* [*<mark style="color:$primary;">Colors</mark>*](https://mpithemes.gitbook.io/triumph/theme-settings/theme-settings#colors).
{% endhint %}

Choose the button appearance:

* **Primary / Secondary**\
  Uses the default button styles set in the global settings (solid or outline).

**Alignment**\
Set the button alignment to left, center, or right.

### Colors

* **Background** - Set the form background color.
* **Border** - Accent color of the border.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F2a6pa3ffhwicBafQVace%2Fcontact%20form_colors.png?alt=media&amp;token=e1978593-5e96-4fd6-99d3-1da9da5eb805" alt=""><figcaption></figcaption></figure>

### Input colors

Use these settings to customize input fields:

* **Background** – Set the input field background color.
* **Text** – Set the input text color.

Hover state:

* **Hover background** - Background color on hover.
* **Hover text** - Text color on hover.
* **Hover border** - Border color on hover.
* **Checkbox** - Changes the background color of an empty confirmation box.
* **Checkbox checked**  - Applies the background color to a marked box.
* **Checkmark** - Indicates the color of a simple tick symbol used to confirm a selected option or indicate approval/completion.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FX776coohcJTCRmzcFk9i%2Fcontact%20form_input%20colors.png?alt=media&amp;token=e3183617-898b-4106-aa8b-14b2502ee635" alt=""><figcaption></figcaption></figure>

### Button colors

Use these settings to customize a button:

* **Background / Background gradient** – Set the button background color.
* **Border** – Add or adjust the border color.
* **Text** – Set the button text color.

Hover state:

* **Hover background / Hover background gradient** - Background color on hover.
* **Hover border** - Border color on hover.
* **Hover text** - Text color on hover.