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 labelNote 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!
Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 44+ essential add-ons for Gravity Forms with support you can count on.
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?
Hi Mickie,
Can you try this;
.gform_wrapper .gsection { border-bottom: unset!important; }Best,
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.
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.😀
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.
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.
Hi Ann,
You can remove the line from a Section using this CSS:
.gform_wrapper .gsection { border-bottom: none; }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.
Hey Mark, Super happy that this worked for you. Hope you have a wonderful day. 😀
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?
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 ofvisibility: hidden;.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/
Worked like a charm. Thank you!
Fantastic!
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!
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. :)
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?
This is helpful. FY … Your code is missing some end ; on the last several properties.
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.
Great article. Thank you
Our pleasure, Masud.
Is it possible to hide the asterisk sign. I still want the field input to be required but want to hide the asterisk sign.
Hi Ali, is this in the context of this article? Hiding the field label?
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.
Doesn’t work. No option to hide the field in Appearance tab. Thanks for your efforts though.
Additionally, removing opening and closing php tags broke out site. Your advice here is very dangerous at best.
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.
Is there a way to make the placeholder disappear once the field has the focus?
Something like this should do the trick: https://jsfiddle.net/qd7bchhg/