gform/gfcf/visibility_field_classes

• Introduction
• Usage
• Parameters
• Examples
• Add custom classes to monitor.
• Since
• Source Code
• Notes

Introduction

The gform/gfcf/visibility_field_classes filter allows customization of which field CSS classes should be monitored for visibility changes. The field observer system uses it to watch for changes to the style.display property of fields.

Usage

addFilter( 'gform/gfcf/visibility_field_classes', ( fieldClasses ) => {
    // Custom logic to modify fieldClasses
    return fieldClasses;
} );

Use Cases

1. Monitoring fields that JavaScript dynamically hides.
2. Integrating with third-party add-ons that modify field visibility

Parameters

By default, the filter monitors these classes:

• gfield--type-stripe_creditcard
• gfield--type-paypal
• gfield--type-square_creditcard
• gfield--type-mollie
• gfield--type-2checkout_creditcard
• gfcf-observe-visibility

Examples

Add custom classes to monitor.

// Add custom classes to monitor
addFilter('gform/gfcf/visibility_field_classes', function(classes) {
    // Add a class for custom payment fields
    classes.push('gfield--type-custom-payment');
    
    // Add a class for fields that should be monitored
    classes.push('my-custom-visible-field');
    
    // Remove a default class if you don't want to monitor it
    const index = classes.indexOf('gfield--type-paypal');
    if (index > -1) {
        classes.splice(index, 1);
    }
    
    return classes;
});

Since

This filter was added in Conversational Forms 1.7.0

Source Code

This filter is located in assets/js/src/theme/components/form/field-display-observer.js

Notes

1. The gfcf-observe-visibility class can be added to any field to make it observable without using the filter.
2. The field observer uses MutationObserver to watch for changes to the style attribute.
3. Only changes to the display property are considered.