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.

8 persons found this article helpful.

You Should Also Read