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 to Add Multiple Fields in Single Row?

  1. I just purchased Gravity Forms upon the recommendation of the StudioPress forums, and so far it looks great! I'm trying to recreate a pdf form and it has several columns and rows, of which I'm trying to add multiple fields within a single row. How would I accomplish this? Here's a screen shot of the pdf I'm trying to mimic. http://i808.photobucket.com/albums/zz7/spearsmarketing/screen1.jpg

    Posted 8 years ago on Thursday February 10, 2011 | Permalink
  2. If you are using the latest public release of Gravity Forms (v1.4.5) then you would have to write the CSS yourself to float fields side by side. Gravity Forms doesn't do this by default. You would have to write some custom CSS and add it to your themes stylesheet to target and float the fields you want to style. If you search the forum there are numerous posts on this subject providing guidance and code snippets.

    Gravity Forms v1.5, which is available as a development release on the Downloads page, introduces a feature called Ready Classes which make it easier to implement multi-column forms using helper classes. These are pre-built CSS classes that help you style your form. They work with most themes, however as with all CSS we can't guarantee you won't have to make some tweaks depending on the CSS your theme is outputting.

    You can read more about Ready Classes here:

    http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/

    You must be using the development release of Gravity Forms v1.5 in order to use these.

    Posted 8 years ago on Thursday February 10, 2011 | Permalink
  3. I just purchased Gravity Forms yesterday, so I'm assuming I have the latest release. I'm using the Prose theme on the Genesis framework from StudioPress.

    I searched through the forum and found this thread, http://forum.gravityhelp.com/topic/data-fields-in-same-row, but I don't understand the field numbers that is being talked about in the css.

    My css knowledge is limited (although learning!) so any help in this area would be greatly appreciated.

    Posted 8 years ago on Thursday February 10, 2011 | Permalink
  4. @set17 as I said above, the Ready Classes that help users style forms this way are only available in Gravity Forms v1.5 which is a development release, it's not the public release which is what you download when you purchase. The public release is v1.4.5.

    It's a development release which users must opt to download and install themselves from the Downloads page. It's still considered a test release, not a final release. It is, however, stable so you can use it. If you install v1.5 and then look at the post I referenced above regarding Ready Classes that can get you started.

    You can download Gravity Forms v1.5 from the Downloads page here on this site.

    If your CSS knowledge is limited there is only so much assistance we will be able to provide as implementing custom complex form field layouts does require CSS knowledge in order to implement. Hopefully the Ready Classes are sufficient for your needs, they do provide a lot of functionality.

    Posted 8 years ago on Thursday February 10, 2011 | Permalink
  5. If you don't want to upgrade to the beta version right now, you can copy the ready class styles from the link below and add those to the end of your theme stylesheet. Then you can add the class names to your field as described in the documentation.

    http://pastie.org/1443282

    http://www.gravityhelp.com/documentation/css-ready-classes/

    Posted 8 years ago on Thursday February 10, 2011 | Permalink
  6. Thanks guys. I download the beta version and have begun using the ready classes. It seems to be working for what I'm trying to do. Thanks again for the help!

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  7. OK, I've got the form completed, but it's not displaying correctly. When I preview it, it looks fine, but when I actually insert it on the page, it's not aligning right. Here's the link: http://medianegotiator.net/advertising-analysis/

    I used the ready classes, gf_left_half, gf_right_half, gf_left_third, gf_middle_third, gf_right_third.

    Any suggestions?

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  8. If it's working properly in the preview and not in the theme, that indicates it's a theme-related style issue and not the plugin.

    Your theme is adding left padding to the list elements and it's throwing the widths off - that's why the right content is floating incorrectly.

    If you disable the padding property on line 2 of this file, you'll see it works properly.

    http://medianegotiator.net/wp-content/themes/prose/css/minified.css

    screenshot: http://grab.by/8TT7

    You can try adding this to your theme stylesheet to override it.

    body .gform_wrapper .gform_body .gform_fields .gfield {padding-left:0!important}

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  9. Kevin, I'm not sure which padding property you're referring to, as when I view the link you posted, it's all on one line and there are multiple padding properties.
    I added the code you suggested and it has not fixed it. You can see what I've got here:

    /***** Contact Form ********************/
    
    .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select {
    	background: #F3F3F3;
    	color: #222222 !important;
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
    	font-size: 12px !important;
    	padding: 4px 0 4px 5px !important;
    	border: 1px solid #DDDDDD;
    	}
    
    .gform_footer input.button {
    	color: #FFFFFF !important;
    	}
    
    .gform_wrapper .ginput_complex label {
    	font-size: 12px !important;
    	}
    
    .gform_wrapper li, .gform_wrapper form li {
    	background: none !important;
    	margin: 0 0 10px 0 !important;
    	}
    
    .gform_wrapper .gform_footer {
    	border: none !important;
    	}
    
    .gform_wrapper .gform_body .gform_fields .gfield {
            padding-left:0!important
            }

    Other suggestions?

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  10. melfelk
    Member

    I've added this as well:

    body .gform_wrapper .gform_body .gform_fields .gfield {padding-left:0!important}

    to my theme, and still no luck, as you can see http://www.tsamonterey.com/red-kettle-cup/

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  11. melfelk
    Member

    Seth,

    I added in the code you provided in my theme stylesheet. The first line Kevin posted, alone, that didn't fix mine, but what you posted fixed mine with ONE fix....

    Line 31-33

    .gform_wrapper .gform_body .gform_fields .gfield {
    padding-left:0!important
    }

    It's all corrent, but don't forget to add the " ; " after important on line 32 of your code there.

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  12. I added in the semi-colon, ";" and still no luck. What am I doing wrong here?

    body .gform_wrapper .gform_body .gform_fields .gfield {
            padding-left:0!important;
            }
    Posted 8 years ago on Friday February 11, 2011 | Permalink
  13. melfelk
    Member

    Here is exactly what mine looks like. In fact, looks like I have that last part in twice (top and bottom). I dont' think that would make a difference, but this is exactly how I put it in my theme css file.

    /***** Gravity Form Hack ******/
    
    body .gform_wrapper .gform_body .gform_fields .gfield {
            padding-left:0!important;
            }
    
    /***** Contact Form ********************/
    
    .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select {
    	background: #F3F3F3;
    	color: #222222 !important;
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
    	font-size: 12px !important;
    	padding: 4px 0 4px 5px !important;
    	border: 1px solid #DDDDDD;
    	}
    
    .gform_footer input.button {
    	color: #FFFFFF !important;
    	}
    
    .gform_wrapper .ginput_complex label {
    	font-size: 12px !important;
    	}
    
    .gform_wrapper li, .gform_wrapper form li {
    	background: none !important;
    	margin: 0 0 10px 0 !important;
    	}
    
    .gform_wrapper .gform_footer {
    	border: none !important;
    	}
    
    .gform_wrapper .gform_body .gform_fields .gfield {
            padding-left:0!important;
            }
    Posted 8 years ago on Friday February 11, 2011 | Permalink
  14. @melfelk - you don't have to put the semicolon at the end of the CSS rule.. only if there are other properties defined after it.

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  15. melfelk
    Member

    @kevin i wasn't sure, but at any rate, it's fixed now :)

    @seth perhaps your minify css plugin is causing a conflict? are you putting this in your Prose theme css file or gravity form css? It should go in your theme css (at least that's what worked for me...and I'm running Genesis as well)

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  16. I'm not using a minify css plugin (although prose might have this built in?). I'm adding it in the prose stylesheet (style.css).

    Here's the code I've got:

    /***** Gravity Form Hack ******/
    
    body .gform_wrapper .gform_body .gform_fields .gfield {
            padding-left:0!important
            }
    
    /***** Contact Form ********************/
    
    .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select {
    	background: #F3F3F3;
    	color: #222222 !important;
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
    	font-size: 12px !important;
    	padding: 4px 0 4px 5px !important;
    	border: 1px solid #DDDDDD;
    	}
    
    .gform_footer input.button {
    	color: #FFFFFF !important;
    	}
    
    .gform_wrapper .ginput_complex label {
    	font-size: 12px !important;
    	}
    
    .gform_wrapper li, .gform_wrapper form li {
    	background: none !important;
    	margin: 0 0 10px 0 !important;
    	}
    
    .gform_wrapper .gform_footer {
    	border: none !important;
    	}

    What else can I try? You can see the sections that aren't lining up correctly, http://medianegotiator.net/advertising-analysis/

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  17. @seth17 - Yeah, your CSS file is all minified so everything runs together. You should try using the developer tools in your browser to inspect the elements so you can see what's going on easier. I personally prefer using the Firebug extension with Firefox. If you refer back to the first screenshot, you can see the rule that was disabled..

    #content .post ul li, #content .page ul li, #header .widget-area ul li {
        background: url("http://medianegotiator.net/wp-content/themes/prose/images/post-list.png") no-repeat scroll left top transparent;
        margin: 0 0 3px;
        padding: 0 0 3px 16px;
    }

    The CSS rule I suggested worked fine for me.. you can see it added at the end of the CSS and that it fixed the float problem.

    screenshot: http://grab.by/8Ufv

    That said, you can try using the inheritance this way instead. It should work fine.

    body #content .post .gform_wrapper .gform_body ul li,
    body #content .page .gform_wrapper .gform_body ul li,
    body #header .widget-area .gform_wrapper .gform_body ul li {padding-left:0}

    screenshot: http://grab.by/8UfN

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  18. Kevin, I'm using Firebug, but since I don't understand what each element means for the plugin, it's not helping me. Here's the exact code I currently have in my style sheet:

    /***** Contact Form ********************/
    
    .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select {
    	background: #F3F3F3;
    	color: #222222 !important;
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
    	font-size: 12px !important;
    	padding: 4px 0 4px 5px !important;
    	border: 1px solid #DDDDDD;
    	}
    
    .gform_footer input.button {
    	color: #FFFFFF !important;
    	}
    
    .gform_wrapper .ginput_complex label {
    	font-size: 12px !important;
    	}
    
    .gform_wrapper li, .gform_wrapper form li {
    	background: none !important;
    	margin: 0 0 10px 0 !important;
    	}
    
    .gform_wrapper .gform_footer {
    	border: none !important;
    	}
    
    body .gform_wrapper .gform_body .gform_fields .gfield {
            padding-left:0!important;
            }
    
    body #content .post .gform_wrapper .gform_body ul li,
    body #content .page .gform_wrapper .gform_body ul li,
    body #header .widget-area .gform_wrapper .gform_body ul li {
           padding-left:0
           }

    UGGG, this is so frustrating!

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  19. I'm using Firebug, but since I don't understand what each element means for the plugin, it's not helping me

    Not sure what that means exactly.. if you're talking about how the form is structured, this guide should help explain it.

    http://www.gravityhelp.com/documentation/visual-css-guide/

    All you should need to do is properly target the elements via their unique ID, class name or through inheritance from a parent element. You can find samples of of that here.

    http://www.gravityhelp.com/documentation/css-targeting-samples/

    Looking at your CSS above, the only thing I see is that you don't need the padding rule defined twice. You can remove this part..

    body .gform_wrapper .gform_body .gform_fields .gfield {
            padding-left:0!important;
    }

    Where are you putting these style rules by the way? Are you sure they're being referenced in the page?

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  20. Here's my stylesheet: http://www.pastie.org/1553996

    Here's a screenshot of the preview screen: http://oi52.tinypic.com/2hr0h0i.jpg

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  21. I don't need to see the CSS file, I am asking what file name/file path you're adding this to? All I see being called into the page other than some plugin CSS files is the minified.css file and it doesn't include the new form styles you're trying to add.

    My guess is that you're adding the styles to a CSS file that doesn't get called on the page, or else you're adding it in your theme admin and it's not getting output to the CSS.

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  22. Kevin, in the design settings options for the Prose theme, there is a "minify css" checkbox under the general settings label. This was checked. I unchecked it and now the form seems to be working! Under the checkbox it says the following:

    "Note: Check this box for a live site, uncheck for testing.
    Note: Use the Editor to add/edit custom CSS."

    I was making all the changes in the "style.css", not the "custom.css". Should I add the code to the custom.css and re-check the minify option?

    Thanks for your help, this Prose theme is not all it's cracked up to be!

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  23. @seth17 We aren't familiar with the Prose theme other than we know it's a StudioPress theme. Most themes have a custom.css for customizations you would make so it would make sense to put your custom CSS there. I'm not sure if that would fix the minify CSS issue you are having or not. There are so many themes out there and they all do things differently so it would be best to try it and see if it works.

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  24. @seth17 - thanks for the note. As Carl said, it's hard to keep up with what all the themes do or don't do. The important part is that you put the rules in some file that gets included in the page so it can render properly. Usually the style.css file is a good choice but many of the advanced themes have a custom.css file that you use for custom styles.

    If you're unsure of the preferred place to put the custom styles, your best bet is to contact your theme provider for guidance.

    Let us know if you need anything else.

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  25. Thanks guys, your help with my ignorance has been much appreciated. I use the StudioPress themes very regularly, but Prose is very different than all the others. I'm pretty sure it's the only one that has the "custom.css". Oh well, as long as it's working, I'm happy (and so is my client!) Thanks again!

    One other thing, what is the correct way to insert the form on the page, or are there multiple options?

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  26. To insert a form into a page or post you use the shortcode or the shortcode wizard.

    See this documentation:

    http://www.gravityhelp.com/documentation/embedding-a-form/

    If you have problems using the shortcode wizard, if it won't insert the shortcode after clicking "Insert Form" then clear your browser cache, restart your browser and try again. This sometimes doesn't work because of a browser cache not loading new javascript the first time you try using it.

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  27. Thanks again, that's just what I needed.

    Posted 8 years ago on Friday February 11, 2011 | Permalink
  28. ian.antonio
    Member

    Hi Seth i just bumped into your old topic and i saw your website. i'm just wondering if you could share how did you create or what plugin did you use for the pop up form that appears on your website? Is it gravity form also? Thank you and have a nice day :)

    Posted 7 years ago on Monday April 9, 2012 | Permalink
  29. Hi Ian, just ran across this. For some reason I didn't get an email about it. Anyway, the email signup/pop-up form is using Aweber. http://spmk.it/K8BDGG

    Posted 7 years ago on Friday May 11, 2012 | Permalink

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