Data fields in same row

I would be easiest if you could create the form then post the link along with direction on which 3 fields you want inline. That way we could look at your specific form and give you some example CSS to style everything the way you'd like.

Thanks for the link.. I'll take a look at it and post something back here as soon as possible.

Christian,

You can try adding this to the bottom of your theme style sheet.

#gform_wrapper_3 #field_3_6, #gform_wrapper_3 #field_3_7 {float:left; margin-right:10px!important; }

You'll also want to go into the form editor and change the field sizes to "large" for those fields for it to look right with the new CSS rules.

You can see my test screenshot for the result.

I hope that helps.

Christian, thanks for the note. I'm really glad your loving the forms.

You can try adding this to the bottom of your theme style sheet.

#gform_wrapper_3 #field_3_6, #gform_wrapper_3 #field_3_7 {float:left; margin-right:10px!important; }

You'll also want to go into the form editor and change the field sizes to "large" for those fields (maybe "medium" for the third one) for it to look right with the new CSS rules.

You can see my test screenshot for the result.

I hope that helps. Let us know if you need anything else.

Great. That's what we like to hear. Thanks for the update.

Hey Danny,

I grabbed your form markup and spent a couple of minutes making some CSS tweaks to get you started. Basically, you float some of the < li> elements (the ones you want on the left) and then you'll see that I set a height value on the upper list items so you didn't get a "jagged float" with different sized elements hanging on each other.

I had to reset the input/select width percentages on this form so everything would look like your example image.

Here's the CSS.. you can append it to the bottom of your theme style sheet.

#gform_wrapper_2.gform_wrapper .top_label input.medium, #gform_wrapper_2.gform_wrapper .top_label select.medium {width:90%;}

#gform_wrapper_2.gform_wrapper .top_label #field_2_30 input.medium, #gform_wrapper_2.gform_wrapper .top_label #field_2_30 select.medium {width:45%!important;}

#field_2_3, #field_2_5, #field_2_6, #field_2_8, #field_2_24, #field_2_28, #field_2_31, #field_2_33, #field_2_35 {float:left;}

#field_2_3, #field_2_4, #field_2_5, #field_2_10, #field_2_6, #field_2_7, #field_2_8, #field_2_9, #field_2_24, #field_2_26, #field_2_28, #field_2_39, #field_2_31, #field_2_32, #field_2_33, #field_2_34, #field_2_35, #field_2_36 {width:50%;}

#field_2_3, #field_2_4, #field_2_5, #field_2_10, #field_2_6, #field_2_7, #field_2_8, #field_2_9, #field_2_24, #field_2_26, #field_2_28, #field_2_29, #field_2_31, #field_2_32, #field_2_30 {height:75px;}

And here's my test page. It worked fine in several browsers I checked but you may need to tweak it here and there.