This script dynamically adds custom-styled Field IDs to all fields (next to the label) in the Gravity Forms editor, allowing administrators to easily identify field IDs.

gravity-forms-show-field-id.js

/**
 * 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.
 */

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
});