Adding Read Only fields to multi-part Gravity Forms

I get this question a lot and employ this solution a lot, so I thought I’d write up a quick little post on it. Gravity Forms itself has a great docs page on how to add the readonly attribute to fields. However, if you don’t like to add JS code straight to the page and also need your enqueued code to work on multi-part forms, you need a little extra trickery:

We’re still going to add the gf_readonly to the CSS area of any field we want to turn into a read only field, as the Gravity Forms doc says to do.

Next, we’re going to create a new JS file in our theme or plugin with the following snippet:

// Apply readonly attribute on initial page load
jQuery(document).ready(function () {
	jQuery('.gf_readonly input').attr('readonly', 'readonly');
});

// Apply readonly attribute to any new fields on other pages of a multipart form.
jQuery(document).on(
	'gform_page_loaded',
	function (event, form_id, current_page) {
		jQuery('.gf_readonly input').attr('readonly', 'readonly');
	},
);

We’ve got two calls, one is a regular call that is triggered when the page is loaded, this will apply the readonly attribute to any fields with the gf_readonly class. The second call we have will apply the attribute to all the new fields that are dynamically loaded, because the .ready() trigger from the first call no longer applies. Instead, we’re using a Gravity Form JS hook called gform_page_loaded that is triggered in multi-part forms whenever you load a new page of the form.

For completion sake, here is the PHP side from a plugin:

if ( ! defined( 'IRRC_PLUGIN_FILE' ) ) {
	define( 'IRRC_PLUGIN_FILE', __FILE__ );
}


/**
 * Enqueue script to transform fields into read only ones within Gravity Forms
 *
 * @param object $form
 * @param bool $is_ajax
 * @return void
 */

//this is targeting the form with the ID 2, feel free to remove if you want to apply to all forms, or replace if you want to apply to a different form.
add_action( 'gform_enqueue_scripts_2', 'irrc_enqueue_readonly_script', 10, 2 );

function irrc_enqueue_readonly_script( $form, $is_ajax ) {
	wp_register_script(
		'irrc-gf-readonly',
		plugins_url( 'assets/js/gf-readonly.js', IRRC_PLUGIN_FILE ),
		array( 'jquery' ),
		filemtime( plugin_dir_path( IRRC_PLUGIN_FILE ) . 'assets/js/gf-readonly.js' ),
		true,
	);
	wp_enqueue_script( 'irrc-gf-readonly' );

}

Easy peasy. Go forth, and conquer!