Hidden fields take up space in the form


Tutorials - Tutorials

User Rating: / 0
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:




    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.

About Us

Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO Services Company in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


- Contact Information - 

Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
          23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

Email : nikhil@royaldeveloper.inroyaldeveloper.india@gmail.com 


 : +91 8171200108, +91 8979462451,
                                  +91 7895753921

Quick Enquiry Form

Enter your full name

Enter your valid email address

Enter your correct mobile number

Invalid Input

Your Message
Invalid Input

Enter Code
Enter Code
  RefreshInvalid Input


You are here: Home Tutorials Hidden fields take up space in the form