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.

List 6 fields next to each other (inline)

  1. mgerenser
    Member

    The order form on our web site is located at http://richardpyznar.com/order/

    What we want to be able to allow customers to order up to a dozen different items right from this page. Each item has 6 fields that must be filled out (area, catalog, catalog #, price, condition and quantity). I want all 6 of these fields to appear inline, next to each other. However, when I try to use the Ready Class gf_inline, it gets messed up. Our site's width is 960px, so there should be plenty of room to run these 6 fields together on one line. Any idea what the issue is, and how I can fix this?

    If I remove the Ready Class, and divide it up by thirds, it looks fine, but then it puts all this order info for one item onto two rows. Is there any way to divide it into sixths?

    Posted 10 years ago on Tuesday October 4, 2011 | Permalink
  2. your problem is coming from your theme stylesheet - (style.css line 791 )

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

    if you disable that rule, you'll see that the inline class works as intended.

    screenshot: http://bit.ly/oCXFw7

    I see you're using a WooTheme. I didn't even have to look to be sure actually. WooThemes adds custom Gravity Forms styles to their themes that override the default form layouts and cause problems from time to time. You can remove those styles from your stylesheet if you'd like, or you can consult with the WooThemes support team on the best way to override their theme styles for your forms.

    Posted 10 years ago on Tuesday October 4, 2011 | Permalink
  3. mgerenser
    Member

    Awesome! Thanks for the quick fix. I'll talk to the WooThemes support staff about this, but for now, I commented out this section in the style.css file and now everything on my form appears as expected. Thank you so much!

    Next question. This is related to the way we have our order form set up on this page. If we want to add 11 more "rows" (or items), what's the easiest way to do this? Do I have to manually create 11 more sections in the form editor? Is this too many fields for one page?

    Posted 10 years ago on Tuesday October 4, 2011 | Permalink
  4. There's no built-in way to duplicate groups of fields. Your best bet is to export the form as XML and manually copy the groups of fields and duplicate them. If you do that, you have to be mindful to increment the field ID's everywhere so your form still works properly.

    If you're not comfortable doing that, then doing it all manually in the form editor is going to be the way to go.

    That's going to be a lot of fields, but you should be fine. I've seen some really huge forms out there. Occasionally people run into PHP memory issues with really large, complex forms but that probably won't be a problem for you.

    Posted 10 years ago on Tuesday October 4, 2011 | Permalink
  5. mgerenser
    Member

    Kevin, thanks for the quick and accurate reply. Exporting as an XML and re-importing the file was a huge time saver, and worked very well!

    Posted 10 years ago on Wednesday October 5, 2011 | Permalink
  6. Wonderful. I'm happy to hear that helped out. Thanks for the update.

    Posted 10 years ago on Wednesday October 5, 2011 | Permalink

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