> For the complete documentation index, see [llms.txt](https://docs.powerfulform.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.powerfulform.com/field-types/static-text.md).

# Static text elements

Break a form into readable sections with headings, paragraphs, custom HTML and dividers.

The **Static text** category holds four elements that show something to the visitor instead of asking them something: **Heading**, **Paragraph**, **HTML** and **Divider**. Nothing they display is saved with the submission.

Use them to make a long form readable: a heading before the shipping questions, a paragraph explaining why you need a VAT number, a line between two groups of fields.

## 🔧 How to Set It

### Add the element

{% stepper %}
{% step %}

### Open the element picker

In the editor, click **Add element** at the point in the page where the text should sit. The circular **+** handles in the Elements list and in the live preview open the same picker.
{% endstep %}

{% step %}

### Choose the element

Open **Static text**, then click **Heading**, **Paragraph**, **HTML** or **Divider**. It is added at that point and appears in the live preview.
{% endstep %}

{% step %}

### Set it up

The element's settings open in the left panel. Work through the matching table below, then click **Save** on the Shopify save bar.
{% endstep %}
{% endstepper %}

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-eb767519e0da4b38957862c725b889a684a8d1cc%2Fscreenshot-field-types-add-element-picker.png?alt=media" alt="The Add element picker with the Static text category showing Heading, Paragraph, HTML and Divider"><figcaption><p>The Static text category holds the elements that display content rather than collect it.</p></figcaption></figure>

## 🔧 Settings

### Heading

A **Heading** puts a title above a group of fields, with an optional caption underneath, so the visitor reads *Delivery details* rather than a wall of boxes.

| Setting     | What it does                                         | Default |
| ----------- | ---------------------------------------------------- | ------- |
| **Heading** | The title text. Translatable.                        | Heading |
| **Caption** | Supporting text shown under the title. Translatable. | Empty   |

{% hint style="info" %}
A **Heading** is for a section inside the form. For the title and intro at the very top of the whole form, edit the **Header** row at the top of the Elements list instead. See [Header and footer](/build-your-form/form-editor-overview.md#left-sidebar).
{% endhint %}

### Paragraph

A **Paragraph** is a block of text written in a rich-text editor, so you can bold a phrase, add a bulleted list, or link out to a policy page.

| Setting  | What it does                                                              | Default   |
| -------- | ------------------------------------------------------------------------- | --------- |
| **Text** | The body of the paragraph, written in the rich-text editor. Translatable. | Paragraph |

A note that explains one field belongs in that field's **Description** box; a **Paragraph** is for something that applies to the whole section, such as your turnaround times.

{% hint style="info" %}
For a tick-box agreement rather than a note, use [Consent](/field-types/selects/consent.md), which puts the same rich text beside a checkbox and records that the visitor agreed.
{% endhint %}

### HTML

The **HTML** element renders markup you paste in. Use it for a layout the other elements cannot produce, such as a styled callout box.

{% hint style="info" %}
**HTML** is not included in the free plan. On the free plan it is grayed out in the element picker with an upgrade prompt. See [Plans and billing](/settings/plans-and-billing.md).
{% endhint %}

| Setting       | What it does                        | Default                      |
| ------------- | ----------------------------------- | ---------------------------- |
| **HTML code** | The markup to render. Translatable. | `<div>Enter your code</div>` |

{% hint style="warning" %}
The **HTML** element takes markup and inline CSS only. Form inputs and JavaScript do not work inside it. Anything that has to collect an answer must be a real field, otherwise it is never saved with the submission.
{% endhint %}

**HTML** has no **Custom HTML class** box — put any class you need directly in your own markup. For styling that should apply across every form in your store, use [Custom CSS](/settings/custom-css.md).

### Divider

A **Divider** draws a horizontal line across the form. Besides **Custom HTML class**, its one setting is **Hide divider**, off by default, which removes the line but keeps the space it occupied, turning the element into a spacer.

{% hint style="info" %}
A divider has no **Column width** and no **Conditional display**, so it is always full width and always visible. If you need a separator that comes and goes with a section, hide the whole section with a Page or a Row instead. See [Multi-step forms](/build-your-form/special-form-types/multi-step-forms.md).
{% endhint %}

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-2a6c5caf37ae11ffe4bcf4805c5b7db4a9d788cb%2Fscreenshot-field-types-static-text-in-preview.png?alt=media" alt="A form in the live preview showing a Heading with its caption above a group of fields, a Paragraph of instructions, and a Divider line separating that group from the next set of fields."><figcaption><p>A form in the live preview showing a Heading with its caption above a group of fields, a Paragraph of instructions, and a Divider line separating that group from the next set of fields.</p></figcaption></figure>

## 🔄 How It Works

* **They collect nothing.** No static text element appears in **Submissions**, a notification email, an export or an integration.
* **They are still elements.** They sit in the Elements list, drag to reorder, and can be hidden with the eye icon or duplicated.
* **Three of them respond to logic.** With **Conditional display**, a notice appears only for the people it applies to.
* **They are translated with the form.** The wording in **Heading**, **Caption**, **Text** and **HTML code** switches with the editor's language picker.

\ <br>

## 💡 Example

* **A long form that needs sections** ⇒ a **Heading** before each group of fields
* **A note about delivery times** ⇒ a **Paragraph**
* **A visible break between sections** ⇒ a **Divider**
* **A banner or an embedded video** ⇒ an **HTML** element

<br>

## ⚠️ Limits & Notes

### Which element to use

| Element       | Use it for                                                                        |
| ------------- | --------------------------------------------------------------------------------- |
| **Heading**   | A section title, with an optional line of supporting text under it.               |
| **Paragraph** | A block of formatted text: instructions, a policy note, a link to your terms.     |
| **HTML**      | Custom markup and inline styling that the other three cannot produce.             |
| **Divider**   | A horizontal line between groups of fields, or pure spacing with the line hidden. |

**Heading**, **Paragraph** and **HTML** each have **Column width** (33%, 50% or 100%, default 100%) and **Conditional display**, off by default. **Heading**, **Paragraph** and **Divider** each have an empty **Custom HTML class** box for your own styling.

## Next steps

* [Header and footer](/build-your-form/form-editor-overview.md#left-sidebar) — the title, intro and submit area of the whole form.
* [Add and arrange elements](/build-your-form/add-and-arrange-elements.md) — move your text blocks into position.
* [Show or hide fields with conditional logic](/build-your-form/conditional-logic.md) — show a notice only when it is relevant.