Theme Framework Frequently Asked Questions

Applying block style settings to an add-on custom field

Here are four steps you can follow to ensure your field honors block style settings:

  1. Make sure your field markup has the necessary utility classes, especially gform-field-label and gform-field-description.
  2. Make sure your CSS makes use of the correct form wrapper classes.  You might want to apply the same styles no matter what theme the form is using, or you might want to write different styles for the Legacy Theme, Gravity Forms 2.5 Theme, and Orbital Theme.
  3. If you are writing different styles for different themes, you can either include them all in one stylesheet that is enqueued for all forms, or create different stylesheets that are enqueued conditionally based on the form theme. See the recipe for enqueueing styles below.
  4. After adding utility classes, if your field still has elements that need styles, you can write your own styles that use Theme Framework custom properties.

Example of field markup with utility classes:

<div id="field_1_1" class="gfield gfield--type-text field_sublabel_below gfield--has-description field_description_below gfield_visibility_visible">
    <label class="gfield_label gform-field-label" for="input_1_1">Message</label>
    <div class="ginput_container ginput_container_text">
        <input name="input_1" id="input_1_1" type="text" value="" class="large" aria-describedby="gfield_description_1_1" aria-invalid="false"> 
    </div>
    <div class="gfield_description" id="gfield_description_182_1">Please enter your message here.</div>
</div>

Example of using the Theme Framework custom properties in your CSS:

.my-form-element {
    color: var(--gf-ctrl-label-color-primary);
    font-size: var(--gf-ctrl-label-font-size-primary);
}

Adding a block style setting to the Gravity Forms block

You cannot add your own block style settings, although this is something we are considering adding in the future. You can suggest this feature directly to our product management team for consideration when planning future releases on our Gravity Forms product roadmap page.

Customizing existing Gravity Forms block style settings

While you cannot add options to the existing block style settings, you can change the effects of existing settings in one of two ways:

By overriding custom properties in your own theme via CSS. This will be most helpful when overriding a specific form’s styles:

#gform_wrapper_{ form_id }[data-form-index="0"].gform-theme .my-form-element {
    --gf-color-primary: #9b51e0;
    --gf-ctrl-border-color: #0693e3;
    --gf-ctrl-size: 18px;
    --gf-ctrl-label-color-primary: #9b51e0;
    --gf-ctrl-btn-size: 18px;
}

Or by using the filter gform_default_styles to customize the global CSS API properties. This will be most helpful when you want to specify a default set of styles for all of your forms.

Adding my own form theme wrapper class

You can use the filter gform_get_form_filter to alter the form wrapper class. We may add a more direct way to add a class in the future.

Using the Theme Framework’s custom properties in a theme

To see the custom properties added by the Theme Framework, check out the gravity-forms-theme-framework.css stylesheet and look for the CSS custom properties that are prefixed with --gf-. You can leverage any of those properties like so:

.my-form-element {
    color: var(--gf-ctrl-label-color-primary);
    font-size: var(--gf-ctrl-label-font-size-primary);
}

How To Create a New Form Theme

You cannot currently register a form theme. This is a feature we hope to add in the future. For now, you can create your own form styles by:

  1. Using the gform_default_styles filter to create styles that will be used by default on all forms.
  2. Loading a CSS file. You can use the gform_enqueue_scripts action to enqueue your own custom styles.

Enqueuing different stylesheets for different form themes in an add-on

Set the following properties and methods within your add-on class which extends GFAddOn.

  1. Set $_enable_theme_layer to true.
protected $_enable_theme_layer = true;
  1. Use the styles() function to enqueue the styles
// Enqueue the styles for the Gravity Forms 2.5 Theme
public function styles() {

		$styles = array(
			array(
				'handle'  => 'my_addon_editor_css',
				'src'     => "my_addon/css/my_addon_form_editor.css",
				'version' => $this->_version,
				'enqueue' => array(
					array( 'admin_page' => array( 'form_editor' ) ),
				)
			),
			array(
				'handle'  => 'my_addon_css',
				'src'     =>"my_addon/css/my_addon.css",
				'version' => $this->_version,
				'enqueue' => array(
					array( 'field_types' => array( 'my_field' ) ),
					array( 'admin_page' => array( 'form_editor', 'results', 'entry_view', 'entry_detail' ) ),
				)
			),
		);

		return array_merge( parent::styles(), $styles );
	}
  1. Enqueue the theme layer styles
	public function theme_layer_styles( $form, $ajax, $settings, $block_settings = array() ) {
		$theme_slug = GFFormDisplay::get_form_theme_slug( $form );

		if ( $theme_slug !== 'orbital' ) {
			return array();
		}

		$base_url = plugins_url( '', __FILE__ );

		return array(
			'foundation' => array(
				array( 'my_addon_theme_foundation', "$base_url/assets/css/dist/theme-foundation.css" ),
			),
			'framework' => array(
				array( 'my_addon_theme_framework', "$base_url/assets/css/dist/theme-framework.css" ),
			),
		);
	}

Writing different styles for different form themes

Each form theme has a unique form wrapper class that can be used to scope styles to that theme.

/* All Themes */
.gform_wrapper .my-form-element {
    ...
}

/* Legacy Theme (pre 2.5) */
.gform_legacy_markup_wrapper .my-form-element {
    ...
}

/* Gravity Forms 2.5 Theme (2.5+) */
.gform_theme .my-form-element {
    ...
}

/* Theme Framework – All Themes Built with the Framework (2.7+) */
.gform-theme .my-form-element {
    ...
}

/* Orbital Theme (2.7+) */
.gform-theme--orbital .my-form-element {
    ...
}