I'm trying to create a 3 cols layout with gf_left_third/gf_middle_third/gf_right_third and this works fins as long as I use input fields but when I add a textarea there will be a big space.
Screenshot will describe it better, http://jarvens.com/wp-content/uploads/2012/03/gf_cols.png
I want "Contact person", "Phone" etc just below "Company" field.
It's this possible to do?
I have played around but I dont get it.
Hmm, this is possible to do, however, I"m not sure the ready classes would solve for it. I did this form styling for a client of mine:
ubikuos.com/contactanos
So I think to achieve this, might need to do some manual CSS labor - but it can be done.
Yep, the Ready Classes float the content and if the elements are different sizes, you end up with a staggered effect. That's just how floats work. That said, the Ready Classes probably aren't the best choice for what you're trying to do.. oh wait, I think Rob already said that.. smart fellow that Rob.
To pull this off the way you want, you'll need to use the HTML blocks to add markup to your form. What you want to do is close the main list structure in places and introduce div "wrappers" that you can float into columns. It sounds difficult at first, but it's pretty easy.. you'll end up adding 4 HTML blocks to your form. (remember to check the "disable default margins" option on each for this). Here we go.
</li><!-- close the html field li -->
</ul><!-- close the list -->
<div id="gf_content_col_1" class="gf_faux_col"><!-- open the first div -->
<ul class="gform_fields top_label"><!-- reopen the list -->put content for first/left div here
</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the first div -->
<div id="gf_content_col_2" class="gf_faux_col"><!-- open the second div -->
<ul class="gform_fields top_label"><!-- reopen the list -->put content for second/middle div here
</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the second div -->
<div id="gf_content_col_3" class="gf_faux_col"><!-- open the third div -->
<ul class="gform_fields top_label"><!-- reopen the list -->put content for third/right div here
<!-- added inline classes for example -->
<style type="text/css">
div#gf_content_col_1.gf_faux_col,
div#gf_content_col_2.gf_faux_col,
div#gf_content_col_3.gf_faux_col {
width: 29%;
float:left;
}
div#gf_content_col_1.gf_faux_col,
div#gf_content_col_2.gf_faux_col {
margin-right: 3%
}
div#gf_content_col_3.gf_faux_col {
clear:right;
}
/* resize the inputs in the columns */
div.gf_faux_col input.medium,
div.gf_faux_col input.large,
div.gf_faux_col textarea {
width:96% !important
}
</style>
</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the third div -->Here's the result
screenshot: http://bit.ly/AgLQMO
screenshot (validation): http://bit.ly/xC6nvr
Any you can download my test form to play with here..
Download test form XML: Form (zip file)
That should have you well on your way. Have fun with it.
Thanks for your fast and workable answer and sorry for my delay.
This works and your XML saved this situation.
One little issue is that I lost most of my css mods but I have almost resolved that too.
Two more things,
1. How to place Submit button in the third column?
2. How to set a red border on a required field after Submit if not fulfilled?
Do you have a link to your form?
This web site is not public yet and behind auth but Kevin has created the form already earlier in this thread.
> 1. How to place Submit button in the third column?
I "solved" this with alignment for the gform_footer div.
.gform_footer { text-align:right; }
Is it possible to place the submit button wherever you want?