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
Show or hide fields HOT |
Fields are not showing up in the frontend HOT |
Set up conditionals for groups of fields HOT |
How to copy information from other fields |
Calculate user's age using BirthDay field |