Create Read-only Field in Gravity Forms

Need to prevent a visitor or user from changing a specific form field on one of your Gravity Forms? Using the provided code snippet within this article, you can convert any input field into a “read-only” field. This type of field is different from a hidden field as it will display the contained data but prevent the visitor from altering it.

Sometimes making a field read-only can be useful, allowing you to then utilize that field for dynamic display of various messages. If you want to change a field to be read-only, you currently need to use JavaScript to do so. The following code snippets will help you accomplish this.

 

 

Read-only Fields in Gravity Forms

Begin by adding a Custom CSS Class to the field(s) you wish to have as a read-only. This is how the script targets the field and converts it to read-only. You can use any class name you want but for purposes of this tutorial I will use a class name of “gf_readonly“. This is also the CSS class name that my CSS Ready Classes WordPress Plugin uses. But you may modify the any of the snippets as needed. Read more on the Gravity Forms Documentation website.

After applying the gf_readonly css class to your targeted form field you need to use JavaScript to modify the field. The examples below can be inserted into your WordPress child themes‘ functions.php file. Alternatively you may simply extract the JavaScript portion of the snippet and insert it into an HTML form field. This way you better manage the read-only fields. This is actually my preferred method.

Some other important notes; If you have multiple textarea fields with the gf_readonly class added to them, then they will ALL be read-only. Also, if your field is NOT on the first page of a multi-page form, then you’ll want to look at the official gform_page_loaded documentation for additional information.

 

Read-only Textfield in Gravity Forms

The Javascript code snippet below will show you how to target and mark as read only any input textfield in your form. Note that this will only work on the specified form ID on the add_filter. If you copy and paste the code below, be sure to paste it in as plain text and without the PHP start and end tags:

 

Read-only Textarea Field in Gravity Forms

The Javascript code snippet below will show you how to target and mark as read only any paragraph textarea in your form. Note that this will only work on the specified form ID on the add_filter. If you copy and paste the code below, be sure to paste it in as plain text and without the PHP start and end tags:

 

Read-only Checkbox Field in Gravity Forms

The Javascript code snippet below will show you how to target and mark as read only any Checkbox Fields in your form. Note that this will only work on the specified form ID on the add_filter. If you copy and paste the code below, be sure to paste it in as plain text and without the PHP start and end tags:

 

Read-only Radio Field in Gravity Forms

The Javascript code snippet below will show you how to target and mark as read only any Radio Buttons in your form. Note that this will only work on the specified form ID on the add_filter. If you copy and paste the code below, be sure to paste it in as plain text and without the PHP start and end tags:

 

Conclusion

I welcome your thoughts, questions or suggestions on my article on creating a read-only input form field using Gravity Forms (affiliate link).

You may support my work by sending me a tip using your Brave browser or by sending me a one time donation using your credit card.

Let me know if you found any errors within my article or if I may further assist you by answering any additional questions you may have.

 

Editors Note:

• This article was first published on May 25th, 2018 and was revised on October 27th, 2020 to include additional read-only field options and other context based improvements.