> 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/sections/newsletter-signup.md).

# Newsletter signup

Let customers subscribe to your email list for updates and promotions.

*Shared Settings*:

* [<mark style="color:$primary;">Form</mark>](/triumph/template/shared-settings/form.md)
* [<mark style="color:$primary;">Submit button</mark>](#submit-button)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Card colors</mark>](#card-colors)
* [<mark style="color:$primary;">Input</mark>](#input)
* [<mark style="color:$primary;">Button colors</mark>](/triumph/template/shared-blocks/button.md)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)

***

#### Submit button

Choose the button appearance:

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

**Show only icon**\
Turn this on to display just an icon on the button instead of text.

**Agreement text**\
Optional text shown below the form (for example, a privacy notice or terms agreement).\
(Supports basic formatting like bold, italic, and links).

***

#### Card colors

**Background**\
Set the newsletter background color.

**Text**\
Controls the color of all text in the newsletter section.

**Accent**\
Adjusts the color of the heading, icon, and links.

**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%2FXZnSfYmGTOaVGCeHw3Dx%2Fnewsletter%20signup_card%20colors.png?alt=media&amp;token=b5b6ed7b-445d-476f-b5b9-28161b1bf02e" alt=""><figcaption></figcaption></figure>

***

#### Input

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.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FnE2VMAngdw91zAch0zlz%2Fnewsletter%20signup_desktop.png?alt=media&amp;token=699db9cf-a1e9-478e-b0e9-27864e099476" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FIAYPUhJS0bWuwryrFTyR%2Fnewsletter%20signup_mobile.png?alt=media&amp;token=76a2493c-b1c8-4966-8bfe-393aadaea27a" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}