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.

Creating a Form Structured Like a Table

  1. atomicdesign
    Member

    Hi, wish I could submit a screen shot as it would make this easier to explain. My client has a form that exists is designed with three columns. The first column has descriptions, while the second two have entry boxes. You can see the HTML table in the link below.

    The closest method I could find is the List option, but there doesn't seem to be any way to create the extra column with just text. Any suggestions are appreciated:

    http://www.cashsmart.net/site/applying/thank-you/

    Posted 7 years ago on Tuesday January 15, 2013 | Permalink
  2. To share a screenshot, please use one of the free image hosting services and post the screenshot there, then paste the link here.

    Posted 7 years ago on Tuesday January 15, 2013 | Permalink
  3. atomicdesign
    Member

    I probably should have removed that comment about the screenshot as the link I included in my original post clearly shows what we need. :)

    Posted 7 years ago on Wednesday January 16, 2013 | Permalink
  4. Oh, sorry. I didn't get past the first part. Let me take a look.

    I did a quick mockup. You can see what it looks like here: http://minus.com/lND8TOotpx0dv

    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.

    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.

    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.

    [css]
    body .gform_wrapper .top_label .gfield_label {
     display: none!important;
    }

    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.

    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:

    [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;
    }

    It is certainly possible to get a layout like this with Gravity Forms.

    Posted 7 years ago on Wednesday January 16, 2013 | Permalink
  5. Anonymous
    Unregistered

    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!

    Posted 7 years ago on Wednesday January 16, 2013 | Permalink
  6. 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.

    Posted 7 years ago on Wednesday January 16, 2013 | Permalink
  7. Anonymous
    Unregistered

    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

    Posted 7 years ago on Wednesday January 16, 2013 | Permalink
  8. That sort of functionality to add a row is available with the List type field. Take a look at this form: http://gravity.chrishajer.com/family-reunion-rsvp/

    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.

    Posted 7 years ago on Wednesday January 16, 2013 | Permalink
  9. atomicdesign
    Member

    Hi Chris,

    I tried to follow your instructions exactly, reading and re-reading them several times, but unfortunately its not producing the desired effect:

    http://www.cashsmart.net/site/applying/budget-and-contacts/

    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.)

    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?

    Using firebug to inspect the output and can't tell why you get nice columns and I don't. :(

    Posted 7 years ago on Saturday January 26, 2013 | Permalink
  10. atomicdesign
    Member

    Ahh solved!

    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. ;)

    Posted 7 years ago on Saturday January 26, 2013 | Permalink
  11. Thank you for posting an update.

    Posted 7 years ago on Wednesday January 30, 2013 | Permalink

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