Making a Field Read-only

Introduction
Native (Code) Solution
Third Party Plugin Solution

Introduction

Sometimes making a field read-only can be useful, allowing you to then utilize that field for dynamic display of various messages. If you want to change a field to be read-only, you currently need to use JavaScript to do so. The following filter and function will help you accomplish this.

Native (Code) Solution

First, you will need to add a custom class to your field Custom CSS Class setting to easily target the field.

In this tutorial, we will be using a class name of gf_readonly to correctly target the field, but you can modify the code example in the next step to use a custom class if you prefer to do so.

Then, you will need to apply the readonly attribute to your field. To do so, you will use JavaScript to target the field. The examples below can be placed within your active theme’s functions.php file or within a functionality plugin.

Targeting a Paragraph Text field

// update '1' to the ID of your form
add_filter( 'gform_pre_render_1', 'add_readonly_script' );
function add_readonly_script( $form ) {
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_post_render', function(){
            /* apply only to a textarea with a class of gf_readonly */
            jQuery(".gf_readonly textarea").attr("readonly","readonly");
        });
    </script>
    <?php
    return $form;
}

Targeting other fields using a text input

This will work for other field types where the HTML input is set to text type. For example, a Date Picker field.

// update '1' to the ID of your form
add_filter( 'gform_pre_render_1', 'add_readonly_script' );
function add_readonly_script( $form ) {
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_post_render', function(){
            /* apply only to a input with a class of gf_readonly */
            jQuery(".gf_readonly input").attr("readonly","readonly");
        });
    </script>
    <?php
    return $form;
}

Targeting checkboxes fields

// update '1' to the ID of your form
add_filter( 'gform_pre_render_1', 'add_readonly_script' );
function add_readonly_script( $form ) {
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_post_render', function(){
            /* apply only to a checkbox input within a field with class of gf_readonly */
            jQuery(".gf_readonly input[type=checkbox]").attr("onclick","return false;");
        });
    </script>
    <?php
    return $form;
}

Targeting radio button fields

// update '1' to the ID of your form
// see https://docs.gravityforms.com/gform_pre_render/
add_filter( 'gform_pre_render_1', 'add_readonly_script' );
function add_readonly_script( $form ) {
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_post_render', function(){
            /* apply only to a radio button input within a field with a class of gf_readonly */
            jQuery(".gf_readonly input[type=radio]").attr("onclick","return false;");
        });
    </script>
    <?php
    return $form;
}

With this, your first form would have a textarea that is read-only. If you had multiple textarea fields with the gf_readonly class added to them, then they’ll all be read-only.

If your field is not on the first page of a multi-page form, then you’ll want to look at our gform_page_loaded documentation.

Third Party Plugin Solution

If you don’t want to implement this using code, always remember that third party plug-ins have often solved common problems for you. For read only functionality, check out this well-known third party plug-in by the team at Gravity Wiz. GP Read Only.