> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/contact/email-signup.md).

# Email signup

Add an email capture form to any section, so visitors can subscribe to your list without leaving the page.

The Email Signup block is a self-contained subscribe form: an email input paired with a button, plus optional description and consent text underneath. Use it to grow your mailing list from a hero banner, footer, or any custom section, with full control over layout, button style, and input appearance so it matches the rest of your page.

### 1. What you can do

* Set the form's width as a fixed pixel value or let it fill the available space
* Place the subscribe button outside the input field or nested inside it
* Choose an icon, text, or both for the button
* Customize the button and input field styles independently
* Show a description with terms and privacy links, with an optional consent checkbox
* Apply custom padding and margin, with separate mobile values

### 2. How to add an Email signup block

You can add an Email signup block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section or block**

In the Theme Editor (Customize), click the section or block where you want the form to appear.
{% endstep %}

{% step %}
**Add an email signup block**

Click **Add block** and select **Email signup**.
{% endstep %}

{% step %}
**Configure the settings**

Set the width, button placement, and button content using the settings below.
{% endstep %}

{% step %}
**Add optional text**

Optionally turn on a description and consent checkbox under **Text**.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

#### 3.1. Layout

<details>

<summary>Width</summary>

Sets how wide the form is within its section.

<table><thead><tr><th width="96.1171875">Setting</th><th width="130.97265625">Options</th><th width="436.578125">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> stretches the form to fill all available width.</li><li><strong>Custom</strong> sets an exact width in pixels or percentage, using the Unit and Custom width settings below.</li></ul></td></tr><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixel</li></ul></td><td><ul><li><strong>Percent</strong> sets the custom width as a percentage of the available space.</li><li><strong>Pixel</strong> sets the custom width as an exact pixel value.</li></ul><p><em>Only available when <strong>Width</strong> is <strong>Custom</strong>.</em></p></td></tr></tbody></table>

</details>

<details>

<summary>Button placement, direction and gap</summary>

Sets where the button sits relative to the input field, and the spacing between them.

<table><thead><tr><th width="110.33203125">Setting</th><th width="130.97265625">Options</th><th width="422.6875">What it does</th></tr></thead><tbody><tr><td><strong>Button placement</strong></td><td><ul><li>Outside input</li><li>Inside input</li></ul></td><td><ul><li><strong>Outside input</strong> places the button as a separate element next to the input field. Gives you control over direction and gap between the two.</li><li><strong>Inside input</strong> nests the button inside the input field itself, for a compact, single-pill look.</li></ul></td></tr><tr><td><strong>Direction</strong></td><td><ul><li>Vertical</li><li>Horizontal</li></ul></td><td><ul><li><strong>Vertical</strong> stacks the input field above the button.</li><li><strong>Horizontal</strong> places the input field and button side by side.</li></ul><p><em>Only available when <strong>Button</strong> placement is <strong>Outside input.</strong></em></p></td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td><p>Sets the space between the input field and the button.</p><p><em>Only available when <strong>Button</strong> placement is <strong>Outside input.</strong></em></p></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn this On to set a different Direction and Gap specifically for phone screens.</td></tr></tbody></table>

</details>

<details>

<summary>Button style</summary>

Sets the visual treatment of the subscribe button. The available options depend on where the button sits.

**When Button placement is Outside input:**

<table><thead><tr><th width="110.33203125">Setting</th><th width="130.97265625">Options</th><th width="422.6875">What it does</th></tr></thead><tbody><tr><td><strong>Button style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> gives the button a solid background color.</li><li><strong>Outline</strong> gives the button a border with no fill, for a lighter look.</li></ul></td></tr></tbody></table>

**When Button placement is Inside input:**

<table><thead><tr><th width="110.33203125">Setting</th><th width="130.97265625">Options</th><th width="422.6875">What it does</th></tr></thead><tbody><tr><td><strong>Button style</strong></td><td><ul><li>Classic</li><li>Boxed</li></ul></td><td><ul><li><strong>Classic</strong> is a simple button with no box behind it, sitting directly inside the input field.</li><li><strong>Boxed</strong> wraps the button in its own box within the input field, for a more defined, button-like appearance.</li></ul></td></tr><tr><td><strong>Box style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> gives the button a solid background color.</li><li><strong>Outline</strong> gives the button a border with no fill, for a lighter look.</li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Button type, text and icon</summary>

Chooses what content appears on the button.

<table><thead><tr><th width="110.33203125">Setting</th><th width="130.97265625">Options</th><th width="422.6875">What it does</th></tr></thead><tbody><tr><td><strong>Button type</strong></td><td><ul><li>Icon</li><li>Text</li><li>Mix</li></ul></td><td><ul><li><strong>Icon</strong> shows only an icon, for a compact, minimal button.</li><li><strong>Text</strong> shows only text, useful for a clearer call to action like "Subscribe."</li><li><strong>Mix</strong> shows both an icon and text together.</li></ul></td></tr><tr><td><strong>Button label</strong></td><td>Text field</td><td><p>Enter the words you want on the button, for example "Subscribe" or "Sign up."</p><p><em>Only available when <strong>Button type</strong> is <strong>Text</strong> or <strong>Mix</strong>.</em></p></td></tr><tr><td><strong>Choose icon</strong></td><td>Theme icon library</td><td><p>Pick from a built-in set of icons.</p><p><em>Only available when <strong>Button type</strong> is <strong>Icon</strong> or <strong>Mix</strong>.</em></p></td></tr><tr><td><strong>Custom button style</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn this On (default: <strong>Off</strong>; available unless <strong>Button placement</strong> is <strong>Inside input</strong>, <strong>Button style</strong> is <strong>Classic</strong>, and <strong>Button type</strong> is <strong>Icon</strong>) to reveal <strong>Shape</strong> (<strong>Sharp</strong>, <strong>Rounded</strong> [default], or <strong>Pill</strong>; available when <strong>Button placement</strong> is <strong>Outside input</strong> or <strong>Button style</strong> is <strong>Boxed</strong>), <strong>Hover effect</strong> (<strong>Fade</strong> [default], <strong>Slide</strong>, <strong>Circle</strong>, <strong>Bloom</strong>, or <strong>None</strong>), <strong>Size</strong> (<strong>Small</strong>, <strong>Medium</strong> [default], <strong>Large</strong>, or <strong>Custom</strong>; available when <strong>Button placement</strong> is <strong>Outside input</strong> or <strong>Button type</strong> is not <strong>Icon</strong>), <strong>Icon size</strong> (available when <strong>Button type</strong> is <strong>Icon</strong> or <strong>Mix</strong>), and <strong>Padding</strong> (available when <strong>Button placement</strong> is <strong>Inside input</strong>, <strong>Button style</strong> is <strong>Boxed</strong>, and <strong>Button type</strong> is <strong>Icon</strong>). Learn more about button shapes and styles in the <a href="/pages/cd8de4309365ee1b1aacf3bbaf0f603dcd20fae0#id-2.-button">Theme settings > Button and input</a> or <a href="/arctos-theme/blocks/basic/button.md">Button block</a> docs.</td></tr><tr><td><strong>Custom input style</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn this On to reveal the input style settings. Learn more about button shapes and styles in the <a href="/pages/cd8de4309365ee1b1aacf3bbaf0f603dcd20fae0#id-3.-input">Theme settings > Input</a> docs.</td></tr></tbody></table>

</details>

#### 3.2. Style

<table><thead><tr><th width="103.76171875">Setting</th><th width="149.91015625">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the form's colors to the section it sits in.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make the form stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td><p>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>.</p><p><em>Only available when <strong>Inherit color scheme</strong> is <strong>Off</strong>.</em></p></td></tr><tr><td><strong>Size</strong></td><td><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td><td>Sets the overall size of the input field and button.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn this On to reveal a separate Size control for phone screens.</td></tr></tbody></table>

#### 3.3. Description

<table><thead><tr><th width="114.5390625">Setting</th><th width="149.91015625">Options</th><th width="461.55859375">What it does</th></tr></thead><tbody><tr><td><strong>Show description</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn this <strong>On</strong> to display supporting text below the form, for example a link to your Terms of Use and Privacy Policy.</td></tr><tr><td><strong>Text</strong></td><td>Text field</td><td><p>Sets the description's content. Accepts basic rich text, including links.</p><p><em>Only available when <strong>Show description</strong> is <strong>On</strong>.</em></p></td></tr><tr><td><strong>Highlight style</strong></td><td><ul><li>None</li><li>Standard</li></ul></td><td>Sets the visual style applied to highlighted words within the description text. <em>Available when <strong>Show description</strong> is <strong>On</strong>.</em></td></tr><tr><td><strong>Show checkbox</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><p>Adds a checkbox visitors must select before subscribing, for example for compliance with marketing consent regulations in your region.</p><p><em>Only available when <strong>Show description</strong> is <strong>On</strong>.</em></p></td></tr></tbody></table>

#### 3.4. Spacing

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="419.32421875">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the block and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the block to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>