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.
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
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.
Thanks a lot. this was very helpful
Really helpful, thanks! Nice and easy to understand & follow
Thank you for the feedback!