Hidden fields take up space in the form

Although you can set a field as hidden, it will still take up some space in the form's layout, in the frontend. This is only half true, as it is not actually the field itself that occupies that space, but its container.


The issue can easily be fixed using some CSS code adjustments, here's what you need to do:


  • On the form's page, in the frontend, right click in the empty space where the field should be found
  • Click on Inspect element with Firebug (Firebug is a developer tool available for Mozilla Firefox and Google Chrome that allows real-time modifications on the page's source code). As an alternative, you can right click on the empty space and click on View page source.
  • At the bottom of the page, a window similar to the one below will be displayed:


  • Notice that there are 2 classes assigned to the <div> element in which the hidden field is enclosed:


    rsform-block

    and

    rsform-block-hidden-field


    The rsform-block class gets added by default to all of the form's fields (it is typical for the Responsive CSS3 layout, it may differ on other layouts), but rsform-block-hidden-field is specific for our field (the class's name is generated based on the field's internal name which, in our case, is hidden_field)


  • To get rid of the blank space that the hidden field's container produces, we will use some CSS code that will hide it completely. Please head to Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> CSS and Javascript tab and add the following code:

 
<style type="text/css">
.rsform-block-hidden-field{
display: none;
}
</style>
 

Now, the hidden field's container will be completely hidden from the form's layout, no longer creating any inconveniences.


Important! Make sure to use the correct class that was associated with your hidden field's container.

4 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Show or hide fields HOT

Fields are not showing up in the frontend

Set up conditionals for groups of fields

Calculate user's age using BirthDay field

How to copy information from other fields