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.

Address Form Formatting Wrong

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Mark Bailey
    Member

    Hi, I am trying to set up a basic contact form with the default address fields (and such), but the form's formatting is badly off. Under each field (First name, last name, street address, etc.), the descriptor is about 20 pixels too far below the field.

    In one case, it pushes the ZIP field over to the right.

    Here is a screenshot:

    http://wpcdn.com/images/gravity-forms-issue.jpg

    The end result is that users are confused by the form because the descriptors are actually closer to the fields below them. And the ZIP formatting looks odd too.

    I've tried with different themes and the results are the same. The themes have no gforms CSS. And I looked in Firebug but I can't find the CSS that's driving this problem (if it is indeed a CSS problem).

    Any help will be appreciated!

    Thanks,

    Mark

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  2. Rob Harrell
    Member

    Mark,

    Can you please post a link to your form for us?

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  3. Mark Bailey
    Member

    Hi,

    Sure:

    http://www.medicareguidance.org/contact-us/

    Thanks,

    Mark

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  4. Rob Harrell
    Member

    Mark,

    This screenshot shows your issue. Your theme is placing a bottom margin of 20px below each input (see the generic input and textarea selectors there?

    To fix, use this:
    Just place in your theme's stylesheet (or wherever you are instructed to place custom CSS at the theme level).

    [css]
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text], body .gform_wrapper .gform_body .gform_fields .gfield input[type=email], body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel], body .gform_wrapper .gform_body .gform_fields .gfield input[type=url], body .gform_wrapper .gform_body .gform_fields .gfield input[type=number], body .gform_wrapper .gform_body .gform_fields .gfield input[type=password], body .gform_wrapper .gform_body .gform_fields .gfield textarea {
margin-bottom: 0;
}

    Result

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  5. Mark Bailey
    Member

    Thank you for the amazingly fast support! That improves it, however the ZIP field is still over to the right. How can I fix that?

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  6. Mark Bailey
    Member

    Actually the ZIP part looks okay in Firefox now (after your fix above for the whole issue). Still to the right in Chrome though. (Darn browser inconsistencies.)

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  7. Rob Harrell
    Member

    Looks good in Chrome for me: Screenshot

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  8. Mark Bailey
    Member

    Cool! Thanks for all the ultra-fast help!!!

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

  9. Rob Harrell
    Member

    No problem, glad to help!

    Posted 11 years ago on Thursday June 13, 2013 | Permalink

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