Gravity Forms - for your WordPress form needs

How to Make Fields Read Only with Gravity Forms

| 35 Comments

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?

Categories: Code & Snippets | Permalink

What next?

Hire me

If you couldn't quite manage this yourself, find it too intimidating, or just don't have the time to do it, you can always hire Dave to do it. Please get in touch so that we can discuss your needs.

Leave a comment

If you have a question, update, or comment about the tutorial, please leave a comment. I try and respond to every comment, though it may take a few days, so please check back soon.

Let a WordPress Expert help you

Do you want to try this, but feel like you need a helping hand, in case something goes wrong? My service, The WP Butler, gives you access to WordPress expertise whenever you need it. Better yet, I'll keep your site backed up, updated and secure, so that you don't have to worry about it. It's all part of the service. Use coupon DIWW and save 15% on all plans.

Visit The WP Butler

Author:

Dave has been tinkering with WordPress for many years, and he now shares his WordPress knowledge here on Do It WIth WordPress to help others realise its impressive power. He can also be hired to help with your WordPress needs. Dave, who is British, is married to his best friend, Marti, with whom he has a beautiful daughter, Ellie. When he's not dabbling with WordPress, he's probably eating Triscuits or hummus, watching an indie film or British TV show, spending time with friends or family, or exploring the world.

35 Comments

  1. 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/

    • 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. 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?

    • 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. 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.

    • 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. 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!

  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?

  6. 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.

  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’);

  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. @Wunderdojo

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

  10. Does this work on dropdown boxes?

  11. 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.

    • 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).

    • 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. Thank you, Grant. I had the same issue, and adding “, array( ‘jquery’ )” solved my problem. Great work!

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

  14. 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?

    • 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.

  15. 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. 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. 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