https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table Gravity Support Forums Topic: Creating a Form Structured Like a Table en-US Mon, 20 Apr 2026 04:34:11 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-136436 Wed, 30 Jan 2013 11:27:52 +0000 Chris Hajer 136436@https://legacy.forums.gravityhelp.com/ <p>Thank you for posting an update. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-132461 Sat, 26 Jan 2013 12:20:00 +0000 atomicdesign 132461@https://legacy.forums.gravityhelp.com/ <p>Ahh solved!</p> <p>The problem was a lack of floats and a lot of clears from the original CSS. So maybe next time the thing to do is test it with the default CSS. ;) </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-132454 Sat, 26 Jan 2013 12:06:02 +0000 atomicdesign 132454@https://legacy.forums.gravityhelp.com/ <p>Hi Chris,</p> <p>I tried to follow your instructions exactly, reading and re-reading them several times, but unfortunately its not producing the desired effect:</p> <p><a href="http://www.cashsmart.net/site/applying/budget-and-contacts/" rel="nofollow">http://www.cashsmart.net/site/applying/budget-and-contacts/</a></p> <p>The individual blocks aren't going into columns and what's more, the default styling is making each of the text fields and selects squashed. (So the "$" text field and the "please choose" drop down is squashed.)</p> <p>Perhaps that's the problem is that you did your example with a clean CSS file versus modifying the styling that installs with the plugin?</p> <p>Using firebug to inspect the output and can't tell why you get nice columns and I don't. :( </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-123690 Wed, 16 Jan 2013 17:52:06 +0000 Chris Hajer 123690@https://legacy.forums.gravityhelp.com/ <p>That sort of functionality to add a row is available with the List type field. Take a look at this form: <a href="http://gravity.chrishajer.com/family-reunion-rsvp/" rel="nofollow">http://gravity.chrishajer.com/family-reunion-rsvp/</a></p> <p>The + to add a new row is available when you use the List field. It's available as a type of field in the Advanced field in the form builder. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-123659 Wed, 16 Jan 2013 16:36:57 +0000 Anonymous 123659@https://legacy.forums.gravityhelp.com/ <p>If we had a row of fields, how could we make an add button or conditional logic so they can put as many in as they have. So say one chapter has 15 members the other has 40, instead of having 40 fields how can I make it so they can hit a button to input another field area, if that makes sense </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-123652 Wed, 16 Jan 2013 16:17:13 +0000 Chris Hajer 123652@https://legacy.forums.gravityhelp.com/ <p>The CSS I provided goes into your theme's stylesheet (style.css or custom.css normally). The rest of the work is done in the form. Please reread my last reply and let me know if you have any specific questions after you get started on your form. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-123648 Wed, 16 Jan 2013 16:13:03 +0000 Anonymous 123648@https://legacy.forums.gravityhelp.com/ <p>Where in gravity froms do you enter the code? I'm trying to produce a similar result. We have members and wish to have a form where you report the new members, class standing etc. So we need it to be one field but I'm really struggling with how to pull it off, help! </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-122824 Tue, 15 Jan 2013 20:30:45 +0000 Chris Hajer 122824@https://legacy.forums.gravityhelp.com/ <p>Oh, sorry. I didn't get past the first part. Let me take a look.</p> <p>I did a quick mockup. You can see what it looks like here: <a href="http://minus.com/lND8TOotpx0dv" rel="nofollow">http://minus.com/lND8TOotpx0dv</a></p> <p>To build that, I added three HTML fields to start, with the column headers in them. Give each of these the CSS Ready Classes for thirds (gf_left_third, gf_middle_third and gf_right_third.) You can do that on the advanced tab of each field. You will continue this for each row of fields.</p> <p>After the headers were laid out, I added my first row. The first column is an HTML field (I checked "Disable default margins") and I added the class of gf_right_third. The center column is plain text with a descriptive label for the admin. This gets a CSS class of gf_middle_third. Then the final column is also text, descriptive label, and a CSS class of gf_right_third.</p> <p>Then I saved and previewed the form. The labels being over column 2 and 3 in each row were unnecessary so I added this CSS to hide those labels.</p> <pre><code>[css] body .gform_wrapper .top_label .gfield_label { display: none!important; }</code></pre> <p>Then I refreshed again and the table header and the first row are done. Then proceed on to 2nd and 3rd (and subsequent) rows. Just remember to give each field the proper CSS class in the proper field on the Advanced tab. Refresh as you go. If things get out of line, check to see that you added the classes correctly and in the proper place on the advanced tab.</p> <p>I also adjusted the widths of the 'thirds' since the left column needed to be more wide than the other two. So I added this CSS:</p> <pre><code>[css] body .gform_wrapper .gf_left_third { width:39%!important; } body .gform_wrapper .gf_middle_third { width:29%!important; } body .gform_wrapper .gf_right_third { width: 29%!important; }</code></pre> <p>It is certainly possible to get a layout like this with Gravity Forms. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-122811 Tue, 15 Jan 2013 20:00:07 +0000 atomicdesign 122811@https://legacy.forums.gravityhelp.com/ <p>I probably should have removed that comment about the screenshot as the link I included in my original post clearly shows what we need. :) </p> https://legacy.forums.gravityhelp.com/topic/creating-a-form-structured-like-a-table#post-122609 Tue, 15 Jan 2013 13:33:41 +0000 Chris Hajer 122609@https://legacy.forums.gravityhelp.com/ <p>To share a screenshot, please use one of the <a href="https://www.google.com/search?q=free+image+hosting" rel="nofollow">free image hosting</a> services and post the screenshot there, then paste the link here. </p>