How to Make Fields Read Only with Gravity Forms

This quick tip shows you how to make fields in Gravity Forms read-only, or greyed out if you will.

This is useful for when you need to pull information into a Gravity Form (such as pulling user info into Gravity Forms, or using Restrict Content Pro access levels in Gravity Forms), but you don’t want the user to be able to edit it.

In a recent example, I wanted to show my clients at The WP Butler what their development rate discount was, which is based on their plan.

In order to do this, I created a field which showed the rate discount conditionally, based on their access level, but I wanted to keep the field read-only, so that they could only view that value.

To do so, I added the following snippet to my functionality plugin:

This was placed in a file which was inside a subdirectory of my functionality plugin. If the file was in the root directory of my functionality plugin, dirname(__FILE__) would have just become __FILE__.

All this does is load a JavaScript file from the location specified. In this example, it’s in a subdirectory of my functionality plugin called scripts, and the file is called gravity-forms-disable.js.

The file gravity-forms-disable.js contains the following simple code:

Greyed out Gravity Forms FieldAll this does is look for Gravity Forms fields with a CSS class of “disable” and makes them read only. So, now that your code is in place and properly enqueued, all you need to do is find the field you want to make read-only and apply a CSS class of “disable” to it, and the field will become read-only.

How to Make Gravity Forms Fields Read-Only

Quite an easy thing to put in place, and very simple to use. What applications have you used this in?

35 thoughts on “How to Make Fields Read Only with Gravity Forms”

  1. David says:

    I love (and work for) Gravity Forms so I’m always stoked to see snippets like these! This is a good use-case for read-only functionality.

    I’ve actually got a perk over at Gravity Wiz that also provides read-only functionality. One thing you might like about the perk-version, is that it does not rely on any script to add the read-only attribute but rather updates the form’s markup before it is output to the screen.

    If anyone is interested in checking it out, head over to the Available Perks page, scroll down to the “GP Read Only” perk and use the “Help Test This Perk” link to drop me a line and get the beta.

    http://gravitywiz.com/available-perks/

    1. Thanks for the link David. I’d been following along with your Perks initiative recently and had noted the Read Only functionality in there, which I had not long added to one of my own sites (hence the tutorial explaining it).

  2. Chris says:

    Hi Dave,

    Thanks for this but I can’t seem to get this to work. It doesn’t seem too complicated.

    1- I installed/activated the plugin.

    2- Edited it to include the snippet with __FILE__ instead of dirname(__FILE__).

    3- I created the js file and uploaded it to /my-functionality-plugin/scripts/

    4- And I correctly added the “disable” class to the form field.

    Basically I followed your instructions to the letter. When I check the source of the form page I see that the “disable” class has been sent.

    Any thoughts?

    1. Are you able to confirm from the page source whether the JS file is being correctly enqueued in the header? Can you confirm that you put the snippet in my-functionality-plugin/my-functionality-plugin.php?

  3. Chris says:

    No…Turns out the JS file wasn’t being loaded so I included it in the plugin.

    The folder structure was like this:

    - my-functionality-plugin
    — my-functionality-plugin.php
    – scripts
    — gravity-forms-disable.js

    I like your way better. How can I confirm that the script is being enqueued correctly?

    Thanks for your help.

    1. If you look at the page source, there’s a section in the head of the document where WordPress loads all of its styles (CSS) and scripts. Your .js file should be loaded in that section. If it’s being loaded correctly (and loading the correct file), then it’s something in the JS. If it’s not, then it’s in your PHP, causing the file not to enqueue properly.

  4. richard says:

    Hello dave, you truely a champion thanks you very much for this!

    I wanted people not able to change their email addresse this way the form can be send just one time per email.

    Maybe you could help me again if you know a bit woocommerce plugin. Basicly users can access the form after buying (using woocommerce), they enter their personnal informations during the checkout process. What i want is to auto populate this form with differents informations they already put like name, first name, address. Strangely i succeed with the email address but not with woocommerce, maybe bad hooks or shortcode my knowledge on this are not really high . Sorry for the bad english ;-)

    Thanks you guy!

    1. Richard, I’m afraid I’ve not worked with WooCommerce before, but if you’re trying to input their information into a Gravity Form, you can use this tutorial to achieve that.

      1. richard says:

        Sorry for late reply, thanks you very for your answer, i will check this asap

  5. Hi Dave. I used your technique to disable a field in a standard Gravity form by just using your single line of jQuery. The field is disabled and un-editable which is what I’m after, however, the field value isn’t passed with the form submission anymore. The field is logged as empty when I review the entries. It doesn’t sound like you encountered this problem?

    1. No, can’t say I did. Worked just fine for me. Couldn’t guess at what might be the issue either.

  6. Sjoerd says:

    Hi Dave, thanks for this solution.
    Only problem I have is that it works only in Chrome..
    With FF and IE the checkboxes are still editable.

    1. Thanks for letting me know Sjoerd. I hope someone can chime in and help solve this issue.

  7. Ran into the same problem as Adam Walter. If you make the fields disabled then Gravity Forms ignores the field value — it will fail validation if they are required fields and it won’t save the value. Easy fix though, don’t use disable, use read only, like so:

    $(‘li.gfield.disabled input, li.gfield.disabled select’).attr(‘readonly’, ‘readonly’);

    1. Brandon says:

      Are you supposed to place that code along with the JQuery fix in the functions.php file?

      1. That should go into the .js file that you create, per the instructions above.

    2. Johnny says:

      Hi
      I used Dave’s code and it worked. It disabled the fields. But you are right, GF ignores the field value.
      I replaced Dave’s code with yours and it did not work. All I have to do is replace one line..right?

      1. Looks like there is a line to add, not replace.

  8. One more note, if you’re disabling form fields via jQuery you’ll need to bind your code to the gform_post_render hook otherwise it won’t work multi-page forms after the first page and on ajax submissions if there is an error.

    jQuery(document).ready(function($){
    $(document).bind(‘gform_post_render’, function(){
    $(‘li.gfield.disabled input, li.gfield.disabled select’).attr(‘readonly’, ‘readonly’);
    });
    });

  9. Dave says:

    @Wunderdojo

    Where exactly did you put the above code. Sorry, but don’t understand the lingo completely. Thanks for any help!

    1. That’s slightly revised code for your .js file, that I walk you through creating above.

  10. Esti Leiser says:

    Does this work on dropdown boxes?

    1. I haven’t tried it, so I’m not sure. Feel free to try it and let me know!

      1. Esti Leiser says:

        I tried and wasn’t able to get it to work for either textboxes or dropdowns.
        In the end I changed the setup by displaying some uneditable text via a shortcode that gets it from a query string in the URL
        Thanks!

  11. Specter says:

    In WordPress 3.6, it seems that this script loads before jQuery, browsers will give a “jQuery is not defined” error and it doesn’t work.

    1. Must be a conflict with a different plugin or your theme. I have it running on The WP Butler, and it still works for me (on 3.6).

    2. Grant says:

      Specter, I was having the same issue. Here’s what it took to make it queue in order:
      Easiest way to isslustrate is replace [code]dirname(__FILE__) ), array( 'jquery' )[/code] with [code]dirname(__FILE__) ), array( 'jquery' )[/code]. This ads the Jquery dependency or something :)

  12. Tom Tanemori says:

    Thank you, Grant. I had the same issue, and adding “, array( ‘jquery’ )” solved my problem. Great work!

  13. Ralf Fuhrmann says:

    The Gravity Forms List & Edit Plugin integrates a function do make fields readonly. This works will all fields (Select, Date, Address, ..)

  14. Brian says:

    While this does in fact make the fields read only, it also keep gravity forms from finding their values in other functions. So it shows it on the form, but this hides it from other Gravity Form processing. So, if this is to make something FYI and not a valuable part of the form data as well as inaccessible to further processing it is fine. What I need is a few fields on a form that are auto-filled from system data, the user can not edit, but IS passed on to other things in GF like hooks that use data. This even keeps the data from being recorded in that form’s entries (and a waste of database space)! Any ideas?

    1. Brian says:

      I hadn’t read the comments, just launched into it. replacing the original JQ code with readonly instead of disable did seem to solve the problem, so you can delete my entire comment if you want.

      1. I’m going to leave them in place if it’s OK with you, because it adds to the discussion and helps people looking for this content to find it a little easier :)

  15. Maichol says:

    Hey, i tried the code but it seems not to work, i got a multi form (4) page form and the field is on the 3rd page, the js file loads ok…….any ideas ?

  16. Nathan says:

    FYI, the /scripts/ folder and this Javascript file no longer exist. You can still add the jQuery directly to your site if you’re comfortable doing that, though.

  17. MFJLabs says:

    Before I go diving in, has anyone tested/solved this for checkboxes where they are (in fact) Read-Only, and not disabled? Really need the data in those (uneditable) checkboxes to be available to the rest of the form. Thanks all.

Leave a Reply