How to Add Placeholder Text to Gravity Forms Fields: Expert Guide

As seasoned WordPress developers powering sites like our WordPress Gallery and Coupon platforms, plus countless client projects, Gravity Forms is our trusted choice for robust contact forms. On a recent client build, we needed placeholder text in input and textarea fields to align with a custom layout. Surprisingly, while dropdowns and some post fields support it natively, standard inputs and textareas require a custom solution.

Forum hacks we tested often broke validation—submitting empty fields without errors. After extensive testing, we perfected a reliable method using Gravity Forms filters and hooks that maintains full validation. Here's our proven approach.

Why placeholders over labels? In certain designs, they deliver seamless inline hints without clashing styles. See the example:

The complete code below goes into your theme's functions.php. Copy-paste ready, fully tested on live sites.

Complete Code

// 1. Add "Placeholder Text" field to the form editor
add_filter( 'gform_field_standard_settings', 'add_gform_placeholder_setting', 10, 2 );
function add_gform_placeholder_setting( $position, $form_id ) {
    if ( $position == 50 ) {
        return '<li class="placeholder_setting field_setting" style="display: list-item;">
            <label for="field_placeholder">
                Placeholder Text (?)
            </label>
            <input id="field_placeholder" type="text" size="20" onkeyup="SetFieldProperty('placeholder', this.value);" />
            <span class="instruction">Enter placeholder text for this field.</span>
        </li>';
    }
    return $position;
}

// 2. Populate the field value in editor (optional, for smoother UX)
add_action( 'gform_editor_js', 'gform_placeholder_editor_js' );
function gform_placeholder_editor_js() {
    ?>
    <script type="text/javascript">
    jQuery(document).bind("gform_load_field_settings", function(event, field, form){
        jQuery("#field_placeholder").val(field["placeholder"] || "");
    });
    </script>
    <?php
}

// 3. Output placeholder attribute on frontend
add_filter( 'gform_field_content', 'set_gform_placeholder_attribute', 10, 5 );
function set_gform_placeholder_attribute( $content, $field, $value, $lead_id, $form_id ) {
    if ( ! empty( $field->placeholder ) ) {
        $ph = esc_attr( $field->placeholder );
        $content = str_replace( '<input ', '<input placeholder="' . $ph . '" ', $content );
        $content = str_replace( '<textarea ', '<textarea placeholder="' . $ph . '" ', $content );
    }
    return $content;
}

This adds a "Placeholder Text (?)" input in the field editor. Refresh your form editor after adding the code:

Enter your text, save, and it appears on the frontend—fully validated.

Placeholder Text in Gravity Forms Dropdown Fields

Dropdowns have native support. Add a dropdown field, check "Enable choice values," then add a choice: Label = "Select an option," Value = (blank).

That's it. Our founder @syedbalkhi discussed this with Gravity Forms partner Carl Hancock—they confirmed input placeholders are coming soon. For more on Gravity Forms, see our full review.

Shoutout to Jorge Pedret (@jorgepedret) for the foundational snippet.