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:
To share a screenshot, please use one of the free image hosting services and post the screenshot there, then paste the link here.
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.
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!
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.
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
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.
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. :(
Thank you for posting an update.