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.

How can I get the form fields/boxes side by side?

  1. Hello,

    I need to recreate this form ( http://www.statefundins.com/quote/life/ ), and can't figure out how to get the form fields/boxes side by side.

    I'm sure it's a CSS issue, but I don't know CSS well enough to make this happen. The site is in Thesis: http://rckurpg.es/p4bY5y.

    Thanks for any and all help!

    Posted 10 years ago on Thursday July 7, 2011 | Permalink
  2. If it were just a few simple things, I'd say to try using the CSS ready classes but they may not be ideal for your form layout.

    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    There isn't a provision for 5 content columns though and with the amount of fields you have, they wouldn't end up working right or being grouped logically in your admin.

    I would suggest using the inline HTML fields to create div elements around the groups of fields, then using CSS to float the new div/groups into 5 columns. You have to be a little creative with the markup & placement but it's not difficult to do. Here's a post that details how I added fieldset containers to a form.. you should be able to modify that slightly for divs instead.

    http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

    Either way, it's going to take some work and a pretty good understanding of CSS to pull it off. If you're not really comfortable with it, you might consider contracting a developer to help you put it all together. Here's a good place to find one if you need.

    http://wpcandy.com/pros/experienced/with-gravity-forms

    Posted 10 years ago on Thursday July 7, 2011 | Permalink
  3. Thanks Kevin!

    Sadly a developer is not in his budget. :(

    So I'd replace "fieldset" with "div" in your example?

    Thanks again!

    Posted 10 years ago on Thursday July 7, 2011 | Permalink
  4. Yep, you'd basically remove the fieldset stuff from the previous example and use div elements like this..

    First HTML block content

    </li><!-- close the html field li -->
    </ul><!-- close the list -->
    
    <div id="field_column_1"><!-- open the first div -->
    <ul class="gform_fields top_label description_above"><!-- reopen the list -->

    ---- Put form fields for the first column here...

    Second HTML block content

    </li><!-- close the html field li -->
    </ul><!-- close the list -->
    </div><!-- close the first div -->
    
    <div id="field_column_2"><!-- open the second div -->
    <ul class="gform_fields top_label description_above"><!-- reopen the list -->

    ---- Put form fields for the second column here...

    Third HTML block content

    </li><!-- close the html field li -->
    </ul><!-- close the list -->
    </div><!-- close the second div -->
    
    <div id="field_column_3"><!-- open the third div -->
    <ul class="gform_fields top_label description_above"><!-- reopen the list -->

    ---- Put form fields for the third column here...

    Fourth HTML block content

    </li><!-- close the html field li -->
    </ul><!-- close the list -->
    </div><!-- close the third div -->
    
    <div id="field_column_4"><!-- open the fourth div -->
    <ul class="gform_fields top_label description_above"><!-- reopen the list -->

    ---- Put form fields for the fourth column here...

    Fifth HTML block content

    </li><!-- close the html field li -->
    </ul><!-- close the list -->
    </div><!-- close the fourth div -->
    
    <div id="field_column_5"><!-- open the fifth div -->
    <ul class="gform_fields top_label description_above"><!-- reopen the list -->

    ---- Put form fields for the fifth column here...

    Sixth (last) HTML block content

    </li><!-- close the html field li -->
    </ul><!-- close the list -->
    </div><!-- close the fifth div -->

    Once you've done that, you would want to target those div elements and float them so they all work in columns.. here's a quick CSS example that you can tweak to get started.. place it at the end of your theme stylesheet and style away.

    [css]
    body .gform_wrapper div#field_column_1,
    body .gform_wrapper div#field_column_2,
    body .gform_wrapper div#field_column_3,
    body .gform_wrapper div#field_column_4,
    body .gform_wrapper div#field_column_5 {
    	width:18%;
    	height:400px
    }
    body .gform_wrapper div#field_column_1,
    body .gform_wrapper div#field_column_2,
    body .gform_wrapper div#field_column_3,
    body .gform_wrapper div#field_column_4 {
    	margin-right:1%;
    	float:left
    }

    Hope that points you in the right direction.

    Posted 10 years ago on Thursday July 7, 2011 | Permalink
  5. Can I actually use the fieldset the same way by inserting it into HTML or it will be filtered off?

    Posted 10 years ago on Tuesday July 19, 2011 | Permalink
  6. It won't be filtered out. It's possible, if you really study the code and implement it correct, to implement Fieldsets using the HTML blocks positioned correctly and using the correct HTML to close and open tags properly.

    Posted 10 years ago on Tuesday July 19, 2011 | Permalink
  7. Actually, this example was based on a previous code snippet that created fieldsets. You can find that here.

    http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

    Posted 10 years ago on Tuesday July 19, 2011 | Permalink

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