I have a lengthy form which has a number of hidden fields. Those fields are necessary and I cannot get rid of them, but they are causing a ton of whitespace to show on the front end. I have done everything I can on the backend to make the field sizes smaller, put several fields on the same line, etc. but I still have a ton of whitespace. Does anyone know how I can “tell” the form that it needs to hide all white space created by hidden fields? For reference, I have circled the whitespace in red in the screenshot below.
It looks like you’re dealing with whitespace issues caused by hidden fields in your Gravity Forms form. This is a common issue - even though the fields are hidden, they still take up space in the layout.
To eliminate the whitespace created by hidden fields, you’ll need to add some custom CSS. Here’s a solution that should help:
/* Target all hidden fields in Gravity Forms */
.gform_wrapper .gfield.gfield_visibility_hidden,
.gform_wrapper .gfield.hidden_label,
.gform_wrapper .gfield.gform_hidden {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
position: absolute !important;
line-height: 0 !important;
}
/* Make sure hidden fields don't create grid rows if grid layout is used */
.gform_wrapper .gform_fields.grid_layout .gfield.gfield_visibility_hidden,
.gform_wrapper .gform_fields.grid_layout .gfield.hidden_label,
.gform_wrapper .gform_fields.grid_layout .gfield.gform_hidden {
grid-row: auto !important;
}
If you’re using Gravity Forms 2.5 or newer with the newer markup, this should solve your issue. If you’re still seeing whitespace, you might need to check if there are other elements creating the space.
For a more targeted approach, you could also inspect the form with browser developer tools to identify the exact class names of your hidden fields and target them specifically.
Hope this helps. 
Thanks. I tried this and it didn’t work. I inspected it and added a few classes to target this space and it still didn’t work. I don’t see any other elements in this section that look like they would block it. Anything else I can try?
Can you provide a link to a page where the issue can be seen?
If you don’t want to post the link publicly, please open a support ticket.
1 Like
This form is only visible to users who are logged in. I’ll open a support ticket.
1 Like
Nevermind. There was a class after all that I forgot to include when I looked at others that may need to be targeted. I missed it the first few times (probably because I’m running on 4 hours of sleep today). Anyway, adding that class in to the CSS fixed it.
For anyone else who may run into this issue, here’s what I had to add:
.gfield.gfield_visibility_administrative
1 Like
Glad to know that you found the solution. Thanks for the update.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.