How to Make Fields Read Only with Gravity Forms

This quick tip shows you how to make fields in Gravity Forms read-only, or greyed out if you will.

This is useful for when you need to pull information into a Gravity Form (such as pulling user info into Gravity Forms, or using Restrict Content Pro access levels in Gravity Forms), but you don’t want the user to be able to edit it.

In a recent example, I wanted to show my clients at The WP Butler what their development rate discount was, which is based on their plan.

In order to do this, I created a field which showed the rate discount conditionally, based on their access level, but I wanted to keep the field read-only, so that they could only view that value.

To do so, I added the following snippet to my functionality plugin:

// DISABLE CERTAIN FIELDS

function enqueue_gf_disable() {
	wp_enqueue_script( 'gf-disable', plugins_url( '/scripts/gravity-forms-disable.js', dirname(__FILE__) ) );
}

add_action( 'wp_enqueue_scripts', 'enqueue_gf_disable' );

This was placed in a file which was inside a subdirectory of my functionality plugin. If the file was in the root directory of my functionality plugin, dirname(__FILE__) would have just become __FILE__.

All this does is load a JavaScript file from the location specified. In this example, it’s in a subdirectory of my functionality plugin called scripts, and the file is called gravity-forms-disable.js.

The file gravity-forms-disable.js contains the following simple code:

jQuery(document).ready(function($){
	$(".gform_wrapper .disable input").attr('disabled','disabled');
});

All this does is look for Gravity Forms fields with a CSS class of “disable” and makes them read only. So, now that your code is in place and properly enqueued, all you need to do is find the field you want to make read-only and apply a CSS class of “disable” to it, and the field will become read-only.

Quite an easy thing to put in place, and very simple to use. What applications have you used this in?