In this article, I’ll show you how to make any input field in your Gravity Forms form read-only, preventing the data in the field from being modified.
The Use Case:
There are several reasons for this solution, however, we needed this solution for a specific project where we built a membership site with Gravity Forms.
When the user signs up for a free trial, we used a hidden field to record the “Enrollment Date”. When their trial is over, they are sent to a subscription form to start their paid subscription. We also use a hidden field in this form to capture their “Subscription Date”.
Those two dates are displayed on the My Account page in a form that the user can use to update their profile information. However, we don’t want the user to modify or change those dates, so we made the fields read only.
Step One
The JavaScript code snippet below is what we will use to create the magic.
Note: This snippet will only work for text input fields, i.e Single Line Text, Name, Email. If you need to make a paragraph field, checkbox field, or radio field read-only, there are some additional code snippets available in this article.
- Copy the code above
- Add an HTML Field to your form
- Past the code in the Content area
Step Two
Now that the code is in place, the next step is to add the gf_readonly class to the fields you want to make read-only.
- Click on the field you want to edit
- Open the Appearance Tab
- Add gf_readonly to the Custom CSS Class field
Note: If you already have another class in the field, you can still add another one, just be sure to add a space between the classes.
No Code Method
There is a way to make your fields read-only without messing with code. It requires a third party add-on, but it makes the read-only function available any time and for almost any field.
The Wrap Up
This is a nice solution to have on hand, for when you need it. And it’s one of those things that shows you that Gravity Forms is really capable of a lot more than you think.
If you have questions or need help, feel free to use the comments below.
Hi,
Its working well with other fields e.g texarea.
I cant get it to work with datepicker. Can you help. Thanks
Please try the following PHP snippet which will remove the datepicker class identifier from the field. This is what is used to initialize the field with a datepicker. When it isn’t present, the datepicker will not be loaded for the field. This code also relies on the field having a Custom CSS Class of gf_readonly set.
// remove datepicker identifier from datepicker input when gf_readonly is set add_filter( 'gform_field_content', function ( $content, $field, $value, $lead_id, $form_id ) { if ( $field instanceof GF_Field_Date && strpos( rgar( $field, 'cssClass' ), 'gf_readonly' ) !== false ) { GFCommon::log_debug( __METHOD__ . '(): remove gform-datepicker class from gf_readonly datepicker inputs' ); $content = str_replace( 'gform-datepicker', '', $content ); } return $content; }, 10, 5 );Is it possible to add an exception so that administrators can still edit the field?
Thanks a lot. this was very helpful
Really helpful, thanks! Nice and easy to understand & follow
Hi Stuart,
Thank you for the feedback!
Best,