How to hide Gravity Form field labels when using placeholders

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.

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

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

Field Label Visibility

You can find the Field Label Visibility dropdown under the Appearance tab in your Gravity Form field. Set it to Hidden to hide the field labels.

Select Hidden to hide the field label

Note the usability warning that displays when you choose to hide the field labels. Make sure to add Placeholders to the field so users can still easily identify the fields.

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%;
}

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!

Comments

  1. Mickie Ann L. Perez
    Mickie Ann L. Perez January 23, 2023 at 11:55 pm

    I only need the title field and not the box, how can I hide it?

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

    did not work or where should I put it?

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff January 24, 2023 at 7:18 am

      Hi Mickie,

      Can you try this;

      .gform_wrapper .gsection { border-bottom: unset!important; }

      Best,

  2. David Tan
    David Tan 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
  3. Ann Courtney
    Ann Courtney 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
    1. Ann Courtney
      Ann Courtney 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.

    2. Scott Ryer
      Scott Ryer Staff 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; }

  4. mark
    mark 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
  5. Dominic Conrad
    Dominic Conrad 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
    1. Scott Ryer
      Scott Ryer Staff 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;.

  6. Divi Theme Tips & Tricks (Hacks) | Craig Riley 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
  7. Kevin Balderston
    Kevin Balderston 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
    1. David Smith
      David Smith Staff 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. :)

    2. Kevin Balderston
      Kevin Balderston 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?

    1. David Smith
      David Smith Staff 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. Ali Sarfraz
    Ali Sarfraz 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
    1. Ali Sarfraz
      Ali Sarfraz 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.

    1. Derrick M
      Derrick M 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.

    2. Jeff Bianchi
      Jeff Bianchi 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.

  9. Jos
    Jos March 14, 2018 at 1:47 pm

    How can I make the placeholder text darker and easier to read? Hiding all the labels leaves me with a greyish form with hardly any contrast (and I have a good computer screen).

    Reply
  10. Ries Hoogstad
    Ries Hoogstad February 20, 2018 at 2:04 am

    Hi, i used the code etc and it all worked fine. But I would like to get my field labels back as i like it more. Putting it on visible didn’t work for me so i removed the code from my function.PHP. But the problem is; they are still not visible on my website. How do I get them back?

    Reply
  11. Richard
    Richard January 20, 2018 at 2:18 am

    What about if you would like to hide labels on text field inputs but have checkbox options that you would like to display?

    Reply
  12. Jeremy
    Jeremy January 8, 2018 at 5:07 pm

    Most excellent appreciation! I wish I had thought to google this problem a long time ago so that we wouldn’t always have to have css settings to make it hide the labels!

    Reply
  13. Hassan
    Hassan December 4, 2017 at 5:13 pm

    In case you have enabled Output CSS No in gravityform above method will not work until you update css of your theme with the bellow.

    Reply
  14. Luke Amoresano
    Luke Amoresano November 3, 2017 at 4:27 pm

    Thank you.. worked perfectly. FYI – I used the “My Custom Functions” plugin for easy wordpress addition of PHP Snippets (this might help some viewers reading this)

    Reply
  15. taj
    taj November 2, 2017 at 7:59 am

    I couldn’t add those code in the divi theme function.php file

    It doesn’t get saved after adding the code.

    Don’t know what was it supposed to mean by Make sure to remove the opening and closing php tags

    Reply
  16. Sam Mitzmann
    Sam Mitzmann September 14, 2017 at 8:06 pm

    Is there an easy way to have the required asterisk show inline after the placeholder text? There is no indication for which fields are required when the labels are hidden and each fields placeholder text would be different lengths so that you cannot use an absolute position.

    Reply
  17. Craig Misak
    Craig Misak August 21, 2017 at 5:25 pm

    I’m curious if anyone could guide me to a solution that would use the HTML5 placeholders, but when the user clicks the field the label would appear? So they didn’t lose reference to the field question. Let’s be honest – it happens, that 0.001-second delay you can forget :) But I like the simpler form without the labels.

    Reply
    1. David Smith
      David Smith Staff August 22, 2017 at 4:49 pm

      Do you have an example of another site implementing the style of placeholders you’re looking for?

    2. Craig Misak
      Craig Misak August 30, 2017 at 1:00 pm

      My example is not a site, it’s from the Schwab Intelligent Portfolios invest app on Android. You wouldn’t need an account to see their login screen, but I know that’s more of an ask to down an app.

      I’ll see if I can do a screen record or something in the next few days.

  18. Scott
    Scott May 12, 2017 at 1:56 pm

    I inserted the code and the form now has that dropdown to chose Hidden. But all it does is hide the label within the form builder. On the actual form itself, nothing happens.

    Reply
    1. David Smith
      David Smith Staff May 13, 2017 at 11:16 am

      It sounds like you have a styling conflict. Some rogue styles are overriding Gravity Forms default styles that handle hiding the labels when the option is enabled.

    1. David Smith
      David Smith Staff March 10, 2017 at 7:25 am

      Try just adding this to your theme’s functions.php:

      add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );

  19. Ben
    Ben March 8, 2017 at 9:14 pm

    Removing a label is a disaster for the visually impaired, makes the form useless to them. You can add this class to the labels and it will hide the label from the screen but still fire it when a screenreader hits the field.

    Using “display:none;” also renders the form useless to the visually impaired.

    Now i just need to figure out how to automatically add that via functions.php

    Reply
    1. Ben
      Ben March 8, 2017 at 9:27 pm

      Actually, I just added a custom class, .hideLabels, to the form then addede the styles below. Now the form will hide the labels and also read them on a screen reader.

    2. David Smith
      David Smith Staff March 8, 2017 at 10:14 pm

      Hi Ben, if you take a closer look at the source, you’ll see that Gravity Forms does output the labels and hides them using screen-reader-friendly styles.

    3. Ben
      Ben March 8, 2017 at 10:26 pm

      Ah! I see you updated the article. I hadn’t even tested the functions.php method because I read it was inaccessible (I just last month spent close to 50hrs doing an accessibility audit on a client site). But now I can use the functions method instead! yay.

  20. Rachel R.
    Rachel R. November 23, 2016 at 6:11 pm

    I suspect that line of code will be overwritten in the functions file whenever GF is updated. That might be the issue for Justin.

    Do you happen to know whether there’s a CLASS that can be applied to the Custom CSS Class field that would accomplish the same thing?

    Reply
    1. David Smith
      David Smith Staff November 23, 2016 at 8:57 pm

      Hey Rachel, looks like you already found this article too. :)

      The theme’s functions.php should be outside the scope of any Gravity Forms update. I think a theme update would be the more likely culprit.

      Unfortunately, I’m not aware of any CSS classes that will automatically hide the label.

    2. Rachel R.
      Rachel R. November 23, 2016 at 9:11 pm

      Turns out there is a way to do it by adding a line of CSS directly, although that’s not QUITE as simple as just popping a CSS class into the form editor. But maybe for people like me who get a little less freaked out about messing in the stylesheet than the functions file. haha

      (What should be an advantage here is the ability to apply this to a whole “template” of forms. However, I’m running into a bit of an oddity with my CSS and I’m not sure why. You might know better than I.)

      The code below is what I’m using to hide the sublabel, based on the class targeting information in the GF documentation that showed how to adjust the color of these. The oddity is that if I specify this by the custom class I created for my form template, it stops working. So this, of course, will turn off sublabels for ALL GF forms — not my original intent, but it’s working beautifully in the meantime.

  21. Mathew Smith
    Mathew Smith November 19, 2016 at 4:42 pm

    The snippet is working in the admin but not hiding the labels on the site. I am embedding the form via PHP, but the Preview shows the labels also. Am I missing something? I’ve reinstalled and plugin with no change. Any settings I need to look at? Thank you for your help.

    Reply
    1. David Smith
      David Smith Staff November 21, 2016 at 3:13 am

      Hi Matthew, my best guess is that you have some styles loading that are forcing the labels to display. Even with this option enabled, the label markup is still output to the screen. Then Gravity Forms hides the label via a special CSS class. If you have a style that is overriding that class, it would cause the label to still be visible.

  22. HCE
    HCE October 2, 2016 at 1:07 pm

    How do you remove the sub-lables? The sub-labels below the form field is so far below it looks like it’s the label for the next form field under it. How can I move the sub-level up closer to the form field?

    Reply
  23. Tom Nguyen
    Tom Nguyen September 15, 2016 at 3:46 pm

    I’ve used this on a few websites. It’s a great resource whenever I have to hide the form labels. Thanks for providing this!

    Reply
  24. Dawn Krueger
    Dawn Krueger June 14, 2016 at 4:04 pm

    This is a nice workaround, but the whole reason I use Gravity over other form builders is it’s ease of use. I’m a designer, not developer, so stay out of php all together. I’ve learned the hard way that you break things that way when you are at my level of comprehension! :)

    It would be so nice if there was a way to have the forms look like your placeholders only option, but still have it work for visually impaired. Tons of websites have this layout. Is it all with placeholders that aren’t helpful to impaired visitors?

    Thanks! Dawn

    Reply
    1. David Smith
      David Smith Staff June 30, 2016 at 9:47 am

      We should write an update with a better way to hide the field labels while keeping everything accessible. For now, you can add a little CSS to your form via an HTML block like so. This way you don’t have to touch any actual files and a screenreader will still be able to “see” the hidden labels.

  25. Justin Williamson
    Justin Williamson May 19, 2016 at 3:03 pm

    Some of my forms have hidden labels from when I applied this code a few months ago, but the option is now gone. Have you ran into this before? The code is still in my functions.

    Reply
    1. David Smith
      David Smith Staff May 19, 2016 at 7:23 pm

      I would double check that the code is still in place in your theme’s functions.php file. I can’t think of any reason this wouldn’t show up if the filter is enabled.

  26. Piet
    Piet March 8, 2016 at 1:34 am

    Super useful snippet to hide the fields, thanks for sharing!

    By the way, I suspect a typo in the paragraph about Form Accessibility, it says “removing placeholders is not recommended” whereas I think you want to say that removing field labels is not recommended.

    Reply
    1. Jordan Smith
      Jordan Smith July 6, 2016 at 10:33 pm

      Thank you for pointing out that typo Piet! I’ve updated the article with the correct text.

Leave a Reply

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

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.