Gravity Forms Show Field IDs In The Form Editor

Problem

Gravity Forms introduced a feature in version 2.8 called compact view and a feature to show the field ID in the builder, which was awesome.

However, there are two issues.

#1 There is no global setting for either of these features

This means you would have to enable them individually in each form.

#2 The show ID feature only works in compact view

Why!? This has been a bit annoying as I would like for the field IDs always to be visible.

Solution

I set out to find a solution. And I found two.

#1 GravityHopper

This add-on also offers many other utility features that are handy when you build a lot of forms or support a bunch of websites that use Gravity Forms.

This add-on essentially enables the built-in field ID feature to work even when the compact view is disabled. You will still need to go through the steps of enabling compact view, enabling show field ID, and then disabling compact view on every form.

#2 Custom Code

I decided to see if I could come up with a simple solution so that the field ID would always be visible on all forms. And I’m happy to report I came up with this.

Below is the complete code snippet. I recommend using a code snippet plugin like WPCodeBox to implement this code on your site.

/**
 * Gravity Forms Field ID Display
 * Author: Chris Eggleston
 * Version: 1.1
 * 
 * Description: This script dynamically adds custom-styled Field IDs to all fields in the Gravity Forms editor, 
 *    allowing administrators to easily identify field IDs.
 *
 * How to use:
 * - Include this script on pages where the Gravity Forms editor is loaded.
 * - The script automatically adds Field IDs to each field in the editor.
 * - Adjust styles in the `gf-custom-style` section if needed.
 */
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Ensure we are in the Gravity Forms editor (identified by body class 'toplevel_page_gf_edit_forms')
    if (!document.body.classList.contains('toplevel_page_gf_edit_forms')) {
        return;
    }

    // Inject custom styles for the Field ID boxes
    if (!document.querySelector('#gf-custom-style')) {
        const styleElement = document.createElement('style');
        styleElement.id = 'gf-custom-style'; // Ensure style element is only added once
        styleElement.textContent = `
            .gf-custom-field-id {
                display: inline-block;
                font-size: 11px;
                color: #404040;
                background-color: #F6F9FC;
                border: 1px solid #ECEDF8;
                border-radius: 4px;
                padding: 2px 6px;
                margin-left: 8px;
                font-weight: bold;
            }
        `;
        document.head.appendChild(styleElement); // Append styles to the document head
    }

    /**
     * Function to add custom-styled Field IDs to each field in the Gravity Forms editor.
     */
    function addCustomFieldIDs() {
        // Select all fields in the editor
        const fieldContainers = document.querySelectorAll('.gfield');

        fieldContainers.forEach(field => {
            // Get the raw field ID attribute (e.g., "field_1")
            const fieldRawId = field.getAttribute('id');
            if (!fieldRawId || fieldRawId === 'field_submit') return; // Skip invalid fields or submit button

            // Extract the numeric Field ID (removing "field_" prefix)
            const fieldId = fieldRawId.startsWith('field_')
                ? fieldRawId.replace('field_', '')
                : fieldRawId;

            // Avoid duplicate ID boxes
            if (!field.querySelector('.gf-custom-field-id')) {
                // Create the Field ID display box
                const idBox = document.createElement('div');
                idBox.classList.add('gf-custom-field-id');
                idBox.textContent = `ID: ${fieldId}`; // Display ID text

                // Append the Field ID box to the field label or field container
                const fieldLabel = field.querySelector('.gfield_label') || field;
                fieldLabel.appendChild(idBox);
            }
        });
    }

    // Run the function after a delay to ensure the form editor is fully loaded
    setTimeout(addCustomFieldIDs, 500);

    /**
     * Observe dynamic changes to the Gravity Forms editor.
     * Ensures new fields get Field ID boxes as they are added.
     */
    const observer = new MutationObserver(mutations => {
        mutations.forEach(() => addCustomFieldIDs());
    });
    observer.observe(document.body, { childList: true, subtree: true }); // Monitor DOM changes
});
</script>

You can also get it on GitHub here.