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 August 22, 2019 | Written by Jordan Smith 110 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 32+ 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. David Tan says

    June 22, 2020 at 1:38 am

    How can I add on a message box on the field when user type something wrongly ? I want a message box that i can customize to match my websites themes.

    Reply
    • Ryan Donovan says

      July 1, 2020 at 9:15 am

      Hello David, Are you attempting to add a custom validation message to your site? You may be able to alter this with the gform_validation_message hook. As for customizing it, you will need to alter this in your themes css.😀

  2. Ann Courtney says

    April 24, 2020 at 2:42 pm

    Hi, I am looking for a code or someway to hide the Field Description box border or hide the line in a section break. I am creating a form where i have a section but then within that section i might have a title.

    Reply
    • Ann Courtney says

      April 24, 2020 at 2:47 pm

      More specifically, i need only the title of my field label. I guess a better way to word it, it to have the placeholder box hidden. I want it so no one can type in the blank box. It would look similar to a section break but smaller and without the section line.

    • Scott Buchmann says

      April 24, 2020 at 3:29 pm

      Hi Ann,

      You can remove the line from a Section using this CSS:

      .gform_wrapper .gsection { border-bottom: none; }

  3. mark says

    March 27, 2020 at 8:33 am

    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.

    Reply
    • Ryan Donovan says

      March 27, 2020 at 9:20 am

      Hey Mark, Super happy that this worked for you. Hope you have a wonderful day. 😀

  4. Dominic Conrad says

    January 29, 2020 at 6:20 am

    Is there any way to maintain the display of mandatory/required asterisk when using the placeholder and field labels are hidden?

    Also, hiding placeholder on focus using https://jsfiddle.net/qd7bchhg/ doesn’t seem to work with multi-line field – any ideas why not?

    Reply
    • Scott Buchmann says

      February 20, 2020 at 4:29 pm

      The required asterisk is attached to the field label, so you would need to add it back with either JS or CSS. Here’s a quick CSS example:

      http://snippi.com/s/ci3jy05

      For hiding the placeholder on focus, try color: transparent; instead of visibility: hidden;.

    • Dom Conrad says

      February 24, 2020 at 7:48 am

      Scot

      The css for reintroducing the required marker worked nicely thanks. But hiding placeholder on focus using color: transparent; didn’t help. I’m trying to get it working at https://studiointeriors.co.uk/contact-us/

  5. Sam says

    May 17, 2019 at 1:05 pm

    Worked like a charm. Thank you!

    Reply
    • David Smith says

      May 17, 2019 at 3:42 pm

      Fantastic!

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

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

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

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

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

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

Trackbacks

  1. Divi Theme Tips & Tricks (Hacks) | Craig Riley says:
    March 9, 2019 at 7:11 am

    […] Gravity Forms Hidden labels – https://gravitywiz.com/how-to-hide-gravity-form-field-labels-when-using-placeholders/ […]

    Reply

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 (64)
  • News (21)
  • Plugins (14)
  • Releases (7)
  • Resource (3)
  • Snippets (58)
  • Tutorials (57)
  • Updates (104)

Recent Posts

  • How to Send a Follow-Up and Pre-Fill Information
  • How to Update Posts with Gravity Forms
  • Gravity Wiz Weekly #104
  • The Complete Guide to Using Gravity Forms With Zapier
  • Gravity Wiz Weekly #103

Meta

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

Copyright © 2021 · Powered by WordPress · Gravity Wiz LLC

  • Support
  • Affiliates
  • About
  • Sitemap
  • Gravity Perks
    â–¼
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    â–¼
    • Documentation
    • Support
    • Account