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.

Form displays as two narrow columns

  1. UnitedWayErie
    Member

    This is a newbie questions. My apologies if it's a stupid one.

    I just started using the plugin and tried creating a volunteer form (http://liveunitederie.org/take-action/volunteer/volunteers-needed). When I previewed the form, everything looked great. But when it's embedded, the form displays with each questions in a narrow column on the left and the input space in a wider column on the right. This ends up looking really bad as the questions get a little longer and end up only having space for 1-2 words per line.

    Can someone help me understand what I'm doing wrong? Thanks!

    Posted 11 years ago on Thursday October 14, 2010 | Permalink
  2. You aren't doing anything wrong. Gravity Forms uses the available content space to output the form. Your available content space is fairly narrow and so the left aligned field labels don't have as much space to work with so the text wraps.

    If you are using long field labels you should use top align field labels instead of left align field labels. Then you don't have the space issue. Left aligned field labels are only typically useful when the field labels are short and to the point (ex. Name, Email, Phone, etc.). If you are asking questions, top align labels make more sense.

    You can change your field label placement by editing your form settings and selecting top aligned from the Label Placement option.

    See this screenshot: http://grab.by/6RZk

    Posted 11 years ago on Thursday October 14, 2010 | Permalink
  3. UnitedWayErie
    Member

    Thanks for the quick reply. However, I think now I'm even more confused. I double checked my form settings and see that the Label Placement is already set to Top Aligned...and yet they're showing on the left. Like I mentioned, everything looks fine in the "Form Preview" mode. But they're definitely showing up differently in the actual site.

    Posted 11 years ago on Thursday October 14, 2010 | Permalink
  4. The issue is your WooThemes theme has hardcoded the label placement in it's stylesheet.

    You need to edit your themes style.css file and change line number 469 which looks like this:

    .gform_wrapper .top_label .gfield_label { display:block;float:left; padding-right:20px; width: 100px; margin: 5px 0px 4px !important; }

    Change it to this:

    .gform_wrapper .top_label .gfield_label { display:block;padding-right:20px; width: 100px; margin: 5px 0px 4px !important; }

    This should fix the issue. Your theme is telling it to float the field label to the left, so that needs to be removed.

    Posted 11 years ago on Thursday October 14, 2010 | Permalink
  5. UnitedWayErie
    Member

    That did it! Thanks a lot....I never realized the theme I'm using already was coded for Gravity Forms.

    Really really appreciate the help!

    Posted 11 years ago on Thursday October 14, 2010 | Permalink