PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Not enough space between fields

  1. millszee

    I have tried other solutions for spacing issues and haven't had any luck so I'm contacting support as a last resort. I appreciate your advice.

    My form:

    The fields are too close together and I would like more space. I'm happy with the space between the label and field.

    There are a couple of other issues that may be related to this:

    The HH is my time fields are not where they should be.

    The datepicker calendar is also not displaying as it should.

    Thanks for your help!

    Posted 7 years ago on Tuesday March 12, 2013 | Permalink
  2. I noticed a couple problems. Looks like Gravity Forms is installed in this folder "gravityforms-1" rather than just "gravityforms". That normally happens when you have to reinstall. I would try to ensure there is just one copy installed and it's in the proper location: wp-content/plugins/gravityforms

    The datepicker problem is happening because you are using an old version of jQuery:

    <script type='text/javascript' src=''></script>

    jQuery 1.8.3 should be in use on that site with Gravity Forms 1.6.12 and WordPress 3.5.1. The old jQuery is creating JavaScript errors which is why the datepicker is not working properly. Here are some of the errors:

    Timestamp: 3/13/2013 7:39:02 AM
    Error: TypeError: jQuery.browser is undefined
    Source File:
    Line: 48
    Timestamp: 3/13/2013 7:39:17 AM
    Error: TypeError: $.browser is undefined
    Source File:
    Line: 1532

    Get the right version of jQuery back on that site and the JavaScript errors will go away.

    The colon between HH and MM is not related to the jQuery error. That is coming from a rule in your theme's stylesheet line 367. This is the problematic CSS:

    input:not([type="submit"]):not([type="file"]), textarea {
        display: block;

    If you override that, you will see that the colon is back in the proper position. You can override that by adding this CSS to your theme's stylesheet:

    body .gform_wrapper .gfield_time_hour input,
    body .gform_wrapper .gfield_time_minute input {

    Finally, for the spacing between the fields, add this to your theme's stylesheet:

    body .gform_wrapper ul li.gfield {

    That will get you closer. Get some of these things fixed and we will take another look.

    Posted 7 years ago on Wednesday March 13, 2013 | Permalink
  3. millszee

    Your a LEGEND... Thanks. I haven't yet figured out how to update to the latest version of jquery yet but I'll confirm when I have and all is good, for future reference.

    One last thing I was wondering about.. all the labels are bold except for the name label? Is this normal? Can I make it bold also?


    Posted 7 years ago on Friday March 15, 2013 | Permalink
  4. I was going to try to give you the CSS to fix the name label, but looking at the source of the page there is some problem with the markup. Take a look at this:

    <li id='field_2_29' class='gfield    <br><br>           gfield_contains_required& # 8 2 1 7 ; ><label class='gfield_label' for='input_2_29_3'>Name<span class='gfield_required'>*</span></label>

    Those < br > < br > should not be there, and the

    gfield_contains_required& # 8 2 1 7 ;

    is not correct either. That's not being done by Gravity Forms. After gfield_contains_required should not be a fancy quote. Take a look at the source of your page.

    I think if you fix that, the Name label will be bold, like all the rest.

    Posted 7 years ago on Sunday March 17, 2013 | Permalink