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.

Change address field and name labels

  1. I'm trying to change the amount of space between the input box and the label underneath.

    If you look at the form on this page: http://www.newvideo.com/apple/ the work First is a little too far away from the box. And it because especially confusing in the address field where the 'address 2' label is close to two of the input fields.

    Thanks!

    Posted 8 years ago on Thursday February 3, 2011 | Permalink
  2. I'm not seeing your problem. I checked in several browsers. What browser are you seeing this issue in?

    If you want to tweak your sub-label positioning, you can easily target them to apply new properties with CSS. Here's a guide to show you how to target the specific elements in the advanced field groupings. You'll see examples for sub-labels there as well.

    http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/#advanced

    Posted 8 years ago on Thursday February 3, 2011 | Permalink
  3. Here is an example:

    http://www.newvideo.com/wp-content/uploads/2011/02/example.jpg

    I know it's super nit-picky but i'd like to get rid of the space that is highlighted in orange.

    Posted 8 years ago on Thursday February 3, 2011 | Permalink
  4. You can add this to your theme stylesheet and tweak it to your preference. It will target all of the sub-labels in the advanced fields.

    body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label,
    body .gform_wrapper .gform_body .gform_fields .gfield .instruction {margin:0 0 3px 0}
    Posted 8 years ago on Thursday February 3, 2011 | Permalink
  5. placson
    Member

    Hi Kevin,

    I tried adding that to the end of my style.css and it didn't work. Here's my URL

    http://www.warriorsquest.net/tournament/registration/

    I'd also like to decrease the gap between label and field. (I"m on Chrome and Firefox on Linux)

    Posted 8 years ago on Friday May 20, 2011 | Permalink
  6. I don't see it at the end of your style.css file. When it's added it works just fine in my tests.

    I copied your page markup and added the styles inline here.. I adjusted the line height as well.

    [css]
    body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label,
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label,
    body .gform_wrapper .gform_body .gform_fields .gfield .instruction {
    	margin:0 0 2px 0;
    	line-height: 1
    }

    You should be able to add that to the end of your style.css file and see the changes.

    Posted 8 years ago on Friday May 20, 2011 | Permalink
  7. placson
    Member

    You rock Kevin. Thanks!

    Posted 8 years ago on Friday May 20, 2011 | Permalink
  8. My pleasure. Glad that helped you out.

    Posted 8 years ago on Friday May 20, 2011 | Permalink

This topic has been resolved and has been closed to new replies.