WordPress Gravity Forms plugin’s documentation provides a code snippet to make a field read-only.
But making read-only is not a good solution for input type text and select input fields. It does not work if the field type is datepicker. Also, HTML does not allow read-only mood for select input. I make those disabled instead. Actually, it will disable the original text input and select, and will create a new hidden input field with the same name and value.
It will set readonly attribute for textarea, radio and checkboxes.
Copy the code snippet below and add that to the theme function.php.
Add css class ‘gf_readonly‘ to the fields( text, select, date, textarea, radio, checkbox ) you want to make read-only.
<?php
/**
* Making Gravity Form's Fields Read-only.
* Add css class 'gf_readonly' to the field( text, select, date,textarea, radio, checkbox ) you want to make readonly.
* Actually it will disable the input and select field and will create new hidden field with the same name and value.
* It will set readonly attribute for textarea, radio and checkbox.
*
* Author : oneTarek
* http://onetarek.com
**/
global $otk_is_gform_renderd;
$otk_is_gform_renderd = false;
add_filter( 'gform_pre_render', 'otk_on_gform_pre_render' );
function otk_on_gform_pre_render( $form ){
global $otk_is_gform_renderd;
$otk_is_gform_renderd = true;
return $form;
}
add_filter( 'wp_footer', 'otk_add_gravityform_readonly_script' );
function otk_add_gravityform_readonly_script( $form ) {
global $otk_is_gform_renderd;
if( $otk_is_gform_renderd == false ) {
return;
}
?>
<script type="text/javascript">
jQuery(document).on('gform_post_render', function(){
console.log('gform_post_render');
/*
Apply only to input and select with a class of gf_readonly.
Disable the original input and make a hidden input with the same value.
*/
jQuery(".gf_readonly input, .gf_readonly select").each( function(){
var name = jQuery(this).attr('name');
var value = jQuery(this).val();
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", name );
input.setAttribute("value", value );
jQuery(input).insertAfter(jQuery(this));
jQuery(this).attr('disabled', 'disabled');
});
/* apply only to a textarea with a class of gf_readonly */
jQuery(".gf_readonly textarea").attr("readonly","readonly");
/* apply only to a checkbox input within a field with class of gf_readonly */
jQuery(".gf_readonly input[type=checkbox]").attr("onclick","return false;");
/* 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;
}
?>
