HTML Field CSS Selectors

Note: These selectors apply only to forms using the Orbital theme. If you are using the Gravity Forms 2.5 theme, see the Legacy CSS Selectors documentation.

The HTML field lets you insert a block of free-form HTML anywhere in your form. It supports merge tags, shortcodes, and standard HTML markup (paragraphs, lists, headings, images, etc.).

On the frontend, the HTML field does not render a label, a description, or a form control. Only the raw HTML content is output.

The Orbital framework excludes .gfield–type-html * from its CSS reset. As a result, elements inside the HTML block (such as p, ul, ol, and h1–h6) retain their browser defaults or author-defined styles.

For full variable definitions, see the separate CSS API documentation.

Field Container

The HTML field wrapper uses the standard field structure and includes:

  • .gfield
  • .gfield–type-html
  • .gfield_html

When “Disable margins” is off, the class .gfield_html_formatted is added.

Each field includes an ID in the format field_{form_id}_{field_id} (e.g. field_5_3).

The HTML field does not output a description element, so –gf-ctrl-desc-* variables do not apply. You may use –gf-color-primary and –gf-radius where appropriate. For typography and layout, use standard CSS properties.

.gform-theme--framework .gfield--type-html {
	margin-top: 24px;
	margin-bottom: 24px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-html {
	margin-top: 24px;
	margin-bottom: 24px;
}

Field with Formatted Margins

When “Disable margins” is off, the class .gfield_html_formatted is added. This can be used to align HTML blocks visually with other form fields.

.gform-theme--framework .gfield_html_formatted {
	padding-inline-start: 0;
	padding-inline-end: 0;
}

.gform-theme--framework#gform_wrapper_112 .gfield_html_formatted {
	max-width: 100%;
}

Field Content (Inner HTML)

The HTML field outputs raw markup as entered. There is no .ginput_container or structured wrapper around the content.

To style elements within the HTML block, target the field container’s descendants. Because Orbital excludes .gfield–type-html * from its reset, inner elements retain their default styles unless explicitly overridden.

For link styling, you may override –gf-color-primary and –gf-color-primary-darker on the field scope. For typography (font-size, color, line-height), use standard CSS properties. There are no framework variables for HTML field content typography.

Link Colors

.gform-theme--framework .gfield--type-html a {
	color: #f09;
	text-decoration: underline;
}

.gform-theme--framework .gfield--type-html a:hover {
	color: #c00;
}

Typography for Inner Content

.gform-theme--framework .gfield--type-html {
	font-size: 16px;
	color: #112337;
	line-height: 1.6;
}

Headings Inside HTML Block

.gform-theme--framework .gfield--type-html h2,
.gform-theme--framework .gfield--type-html h3 {
	color: #112337;
	font-weight: 600;
	margin-top: 24px;
	margin-bottom: 12px;
}

Lists Inside HTML Block

.gform-theme--framework#gform_wrapper_112 .gfield--type-html ul,
.gform-theme--framework#gform_wrapper_112 .gfield--type-html ol {
	padding-inline-start: 24px;
	margin-bottom: 16px;
}

Targeting Specific HTML Fields

Use the field ID when styling a single HTML block differently from others.

.gform-theme--framework#gform_wrapper_112 #field_112_3 {
	--gf-radius: 8px;
	--gf-color-primary: #1d4ed8;
	background-color: #f8fafc;
	padding: 16px;
	border: 1px solid #e2e8f0;
}

Use Case Examples

Callout-Style HTML Block

.gform-theme--framework .gfield--type-html.gfield_html_formatted {
	--gf-color-primary: #204ce5;
	background-color: #eff6ff;
	border-inline-start: 4px solid #654887;
	padding: 16px 20px;
	border-radius: 6px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-html {
	--gf-color-primary: #204ce5;
	background-color: #eff6ff;
	border-inline-start: 4px solid #654887;
	padding: 16px 20px;
	border-radius: 6px;
}

CSS API Reference

For full variable definitions, see the separate CSS API documentation.