As a developer, you often want field IDs at your fingertips. The following code will add a small field ID indicator to fields in your form editor. This is everything! Okay… it's something.
Note: This feature is now available (along with other field hinting) within the Gravity Hopper plugin.
// Append field ID indicator to fields in form editor
add_filter( 'gform_field_content', function ( $content, $field, $value, $lead_id, $form_id ) {
if ( GFCommon::is_form_editor() ) {
$content = str_replace(
array(
"<label class='gfield_label",
"<legend class='gfield_label",
'<h2 class="gsection_title',
'<h3 class="gsection_title'
),
array(
"<span class='gfield_id_indicator'>ID: {$field->id}</span><label class='gfield_label",
"<span class='gfield_id_indicator'>ID: {$field->id}</span><legend class='gfield_label",
"<span class='gfield_id_indicator'>ID: {$field->id}</span><h2 class=\"gsection_title",
"<span class='gfield_id_indicator'>ID: {$field->id}</span><h3 class=\"gsection_title"
),
$content
);
}
return $content;
}, 10, 5 );
add_action( 'admin_print_styles', function() {
if ( class_exists( 'GFCommon' ) && GFCommon::is_form_editor() ) {
echo '<style>
.gforms_edit_form .form_editor_fields_container .gfield .gfield_id_indicator {
display: inline-block; position: absolute; top: 1.1rem; right: 1rem; padding: .1em .45em;
font-size: .75rem; color: #404040; background-color: #ecedf8;
border: 1px solid #d5d7e9; border-radius: 4px; z-index: 2;
}
.gforms_edit_form .form_editor_fields_container .gfield:hover .gfield_id_indicator { border-color: #3b7ca877; }
.gforms_edit_form .form_editor_fields_container .gfield.field_selected .gfield_id_indicator {
color: #fff; background-color: #3b7ca8; border-color: #2d6f9b;
}
.gforms_edit_form .form_editor_fields_container fieldset.gfield .gfield_id_indicator { top: -1rem; }
.gforms_edit_form .form_editor_fields_container .gfield.ui-draggable-dragging .gfield_id_indicator { display: none; }
</style>';
}
} );
Here's what you get…
