How does the HTML field work in IvyForms

The HTML field lets you display non-interactive content inside a form, such as instructions, headings, links, or formatted text. Visitors can see this content on the front end, but they cannot interact with it or submit any values from it.

This field is useful for adding context, explanations, or structure within your form without collecting input.

You can add the HTML field from the General fields section in the IvyForms builder. Once added, select it in the preview to open its configuration options in the sidebar.

After adding the HTML field, selecting it in the preview switches the sidebar to the Options view. Settings are organized into three tabs: General, Advanced, and Smart logic.

These settings control how your content is displayed and when the field appears in the form.

The General tab shows the field type (HTML) and its ID. It also contains all available options for configuring the HTML field.

• Label – defines the visible title of the field.
• Hide label – hides the label on the front end.
• Description – adds a short note below the field.

Content

The Content section is where you add the HTML field content. You can use two modes:

• Visual – a rich text editor for formatting content without writing code.
• HTML – allows you to enter raw HTML directly.

The Visual editor includes a toolbar for basic formatting such as text styling, lists, alignment, links, and inserting media.

CSS Classes

• CSS Classes – allows you to add custom class names to the field for styling through your theme or custom CSS.

The Advanced tab includes a single layout-related option:

• Label position – controls where the label appears relative to the field:
  • Default
  • Top
  • Left
  • Right

This setting affects only the label placement, not the content inside the HTML editor.

The Smart logic tab allows you to show or hide the HTML field based on conditions from other inputs.

When enabled, you can define rules that determine when the field should be displayed. This is useful for showing contextual instructions only when they are relevant.

For example, you can display additional information only after a user selects a specific option or completes a previous step in the form.