bookmark_borderMaking a Field Read-only

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

  1. First, you will need to add a custom class to your field 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.

  2. Apply the readonly attribute to your field. To do so, you will need to 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).ready(function(){
                /* apply only to a textarea with a class of gf_readonly */
                jQuery("li.gf_readonly textarea").attr("readonly","readonly");
            });
        </script>
    
        <?php
        return $form;
    }
    

    Targeting other text input 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).ready(function(){
                /* apply only to a input with a class of gf_readonly */
                jQuery("li.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).ready(function(){
                /* apply only to a checkbox input with a class of gf_readonly */
                jQuery("li.gf_readonly input[type=checkbox]").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.

3rd Party Plugin Solution

If you don’t want to adjust this using code, or don’t know how to do so, we recommend GP Read Only, located within the 3rd party Gravity Perks plugin..