Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

  • Gravity Perks
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    • Documentation
    • Support
    • Account

How to hide Gravity Form field labels when using placeholders

Last updated October 25, 2018 | Written by Jordan Smith 97 Comments

  • February 2, 2018: Added new section to address folks who have disabled Gravity Forms CSS.

We do a lot of custom Gravity Forms work and custom WordPress theme development. Over the years, the need to hide the Gravity Form field labels has come up a few times. In most scenarios, this pertains to simple forms such as a Newsletter signup form.

Did you know there is a simple solution for this with Gravity Forms that will allow you hide field labels or sub field labels as needed?

Form Accessibility

Before we dive in, I do want to note that for accessibility reasons, removing field labels is not recommended as it will make the form more difficult for users with visual impairments to use. The best practice approach is to use field labels to describe the type of information and the placeholders to provide users with an example of what that information should look like. With that said, let’s move on forward!

With this method, Gravity Forms will hide the labels but they are still “visible” to screen readers. Enjoy your guilty-free label-less forms.

GF Placeholders and Field Labels

In Gravity Forms 1.9, support for placeholders was added into core. This feature allows you to add placeholder text into a field input. This text will appear inside the input box so that users can see what type of information should be entered into that field.

In contrast, Gravity Form field labels are the labels that appear outside of the input box, either above it or below it.

Examples

Let’s see some examples. Here’s a form with default field labels.

gravity-form-with-field-labels

Now, we’ll use the same form and add placeholders:

gravity-form-with-field-labels-and-placeholders

Lastly, let’s hide the field labels and leave only the placeholders:

gravity-form-with-placeholders-only

The Code

As of Gravity Forms 2.4, this snippet is no longer required to activate this feature. If you are running Gravity Forms 2.4 or greater, the Field Label Visibility setting will automatically be available.

So now that we are all caught up on the terminology, if you want to add support to hide field labels on a field by field basis, simply add the following line of code to your themes (functions.php).

add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );

What this code does is adds a Field Label Visibility dropdown under the Appearance tab in your Gravity Form field (see screenshot below).

Select Hidden to hide the field labelSelect Hidden to hide the field label

What about sub-labels?

You can hide sub-labels by selecting “Hidden” from the Sub-Label Placement setting.

Are your labels still visible?

Make sure you either a) have Gravity Forms CSS configured to output (it is by default) or b) that you’ve included these specific Gravity Forms styles in your theme’s CSS.

.gform_wrapper .hidden_label .gfield_label,
.gform_wrapper label.hidden_sub_label,
.gform_wrapper label.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
}
.gform_wrapper li.hidden_label input {
margin-top: 12px;
}
.gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text],
.gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
margin-bottom: 12px;
}
.gform_wrapper .left_label li.hidden_label input,
.gform_wrapper .right_label li.hidden_label input {
margin-left: 3.7%;
}
.gform_wrapper .hidden_label input.large,
.gform_wrapper .hidden_label select.large,
.gform_wrapper .top_label input.large,
.gform_wrapper .top_label select.large {
width: 100%;
}
view raw gf-hide-label-styles.css hosted with ❤ by GitHub

Was this helpful?

We’d really love to hear how you use this functionality. Seriously, I’m not just saying that. Let us know in the comments!

Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 29+ essential add-ons for Gravity Forms with support you can count on.

  • View All Perks
  • Buy Gravity Perks

Filed Under: How To, Tutorials accessibility placeholders

Comments

  1. Kevin Balderston says

    October 24, 2018 at 5:18 pm

    This doesn’t seem to work for the advanced fields like address, name, email, etc. Is there a way to leverage your code to enable hiding of advanced fields sub field labels outside of recreating those fields using standard fields?

    Thanks!

    Reply
    • David Smith says

      October 25, 2018 at 7:51 am

      Hi Kevin, just added a new section to the article above titled, “What about sub-labels?” Let me know if you have any other questions. :)

    • Kevin Balderston says

      October 25, 2018 at 6:42 pm

      Perfect! I must have somehow missed the option before. I noticed this functionality will be included in GF 2.4, which looks to be in beta. Is there any issue if this is left in after updating to 2.4?

  2. Tara Claeys says

    September 30, 2018 at 11:42 am

    This is helpful. FY … Your code is missing some end ; on the last several properties.

    Reply
    • David Smith says

      September 30, 2018 at 9:48 pm

      Glad to help, Tara. I’ve updated to the CSS. The semi colons aren’t technically necessary; however, I think it does make the examples less confusing.

  3. Masud Rana says

    August 14, 2018 at 3:25 pm

    Great article. Thank you

    Reply
    • David Smith says

      August 15, 2018 at 8:54 am

      Our pleasure, Masud.

  4. Ali Sarfraz says

    July 17, 2018 at 5:25 pm

    Is it possible to hide the asterisk sign. I still want the field input to be required but want to hide the asterisk sign.

    Reply
    • David Smith says

      July 24, 2018 at 5:51 pm

      Hi Ali, is this in the context of this article? Hiding the field label?

    • Ali Sarfraz says

      July 24, 2018 at 6:11 pm

      Hi David, You can say that. In gravity forms when I hide the label, asterisk still shows above the field. Is there a way to hide the sign, even if the field is required like in this form https://ibb.co/nEKxr8 Which I made with the different plugin but I want to use gravity forms for the conditional logic functionality.

  5. Derrick M says

    April 23, 2018 at 5:02 pm

    Doesn’t work. No option to hide the field in Appearance tab. Thanks for your efforts though.

    Reply
    • Derrick M says

      April 23, 2018 at 5:06 pm

      Additionally, removing opening and closing php tags broke out site. Your advice here is very dangerous at best.

    • Jeff Bianchi says

      April 23, 2018 at 9:50 pm

      Hi Derrick,

      Can you post your code. I used the technique as described in this article and it worked perfectly. I love it. Does exactly what I wanted it to do and my site never had an issue.

  6. Jorge Carbwood says

    April 23, 2018 at 11:17 am

    Is there a way to make the placeholder disappear once the field has the focus?

    Reply
    • David Smith says

      April 25, 2018 at 11:29 am

      Something like this should do the trick: https://jsfiddle.net/qd7bchhg/

« Older Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • How To (29)
  • News (20)
  • Plugins (5)
  • Releases (5)
  • Resource (1)
  • Snippets (61)
  • Tip (1)
  • Tutorials (43)
  • Updates (62)

Recent Posts

  • Gravity Wiz Weekly #62
  • Gravity Forms Populate Anything, Public Beta Available!
  • Gravity Wiz Weekly #61
  • Gravity Wiz Weekly #60
  • Gravity Wiz Weekly #59

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org

Copyright © 2019 · Powered by WordPress · Gravity Wiz LLC · Log out

  • Support
  • Affiliates
  • About
  • Sitemap
  • Gravity Perks
    ▼
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    ▼
    • Documentation
    • Support
    • Account