stl99
Member
Hello,
I am wondering if there is a not too complicated as well as cross browser compatible way to create a two column form just like this one: http://www.lgt.com/de/contact.html?DCSext.nav_type=1.
Any help would be highly appreciated!
Cheers,
Thomas
(I know there a few topics about two column forms but the form I want to build looks a lot more complex...)
It's definitely possible, but it would take some time and polish. I would use the other posts you found for two column forms to get you started and if you come across any specific styling issues, feel free to ask.
stl99
Member
Hello David,
Thanks for the answer!
I worked something out and so far the form looks quite good ("body.custom div#leaf-135" is a special snippet of a custom css file inside the Headway Theme):
body.custom div#leaf-135 .label {line-height: 25px; margin-top:10px;}
body.custom div#leaf-135 .medium {width:270px;}
body.custom div#leaf-135 .dropdownkontakt {float:left;}
body.custom div#leaf-135 .dropdowninteresse {margin-top: 10px;float:left;}
body.custom div#leaf-135 .nachricht {margin-left:300px; margin-top:-80px;float:left;}
body.custom div#leaf-135 .nachricht label {width:270px;}
body.custom div#leaf-135 .textarea {width:280px; height:75px;}
body.custom div#leaf-135 .dropdownanrede {margin-top:20px;float:left;}
body.custom div#leaf-135 .name {margin-top: 10px;float:left;}
body.custom div#leaf-135 .vorname {margin-left: 300px; margin-top: -86px;float:left;}
body.custom div#leaf-135 .firma {float:left;}
body.custom div#leaf-135 .strasse {margin-top: 45px;float:left;}
body.custom div#leaf-135 .plzort {margin-left: 300px; margin-top:-43px; float: left;float:left;}
body.custom div#leaf-135 .telefon {float:left;}
body.custom div#leaf-135 .email{margin-left: 300px; margin-top:-43px;float:left;}
body.custom div#leaf-135 .kontaktieren {float: left}
body.custom div#leaf-135 .kontaktieren label {display:inline;}
body.custom div#leaf-135 .gchoice_12_1 {margin-top:10px;margin-left: 10px;float: left}
body.custom div#leaf-135 .gchoice_12_1 label {margin-left:5px;}
body.custom div#leaf-135 .gchoice_12_2 {margin-top:10px;margin-left: 10px;float: left}
body.custom div#leaf-135 .gchoice_12_2 label {margin-left:5px;}
body.custom div#leaf-135 .gchoice_12_3 {margin-top:10px;margin-left: 10px;float: left}
body.custom div#leaf-135 .gchoice_12_3 label {margin-left:5px;}
body.custom div#leaf-135 .erreichbar {margin-left: 300px; margin-top: -40px; float:left;}
body.custom div#leaf-135 .erreichbar label {width: 350px;}
body.custom div#leaf-135 .gfield_html {margin-top:25px;width:550px;float:left;}
body.custom div#leaf-135 .gfield_html a {font-weight:bold; color:#333333;}
body.custom div#leaf-135 .gfield_html a:hover {text-decoration:underline;}
body.custom div#leaf-135 .einverständnis {margin-top:10px;float:left;width: 450px;}
body.custom div#leaf-135 .einverständnis label {margin-top: 10px;foat:left;width: 450px;}
body.custom div#leaf-135 .gchoice_14_1 {margin-top: 10px;}
body.custom div#leaf-135 .gchoice_14_1 label {margin-top: -23px; margin-left:19px ;}
body.custom div#leaf-135 .pflichtfelder {margin-top:20px;float:left; width:550px;}
body.custom div#leaf-135 .button {margin-top:15px; background:#ffffff;float:left;}Maybe its not the most elegant css but it seems to work... Any concerns (cross browser, ..)?
Cheers,
Thomas
Looks pretty solid. I did notice float was spelled incorrectly here.. might cause you an issue.
body.custom div#leaf-135 .einverständnis label {margin-top: 10px;foat:left;width: 450px;}
stl99
Member
I recently discovered yet another problem:
The gchoice checkbox, label and required sign above the send button don’t display inline. I already played a bit with some margins & float but the result wasn't cross browser compatible....
http://www.hkcmanagement.de/testformular
Any ideas?
Cheers
Thomas
Line 326 of the headway.css file sets a "clear:both" rule for inputs, textareas and labels. It looks like thats probably causing the problem.
http://www.hkcmanagement.de/wp-content/themes//headway-166/media/cache/headway.css?1283773103
I don't see the difference you mentioned in the second column, but when floating multiple items like these, if the heights of the elements are inconsistent, you will often end up with elements "hanging" on each other or not stacking correctly. You can set a height value on all of the elements to prevent this.
stl99
Member
Thanks again, I will give it a shot...
I really hope that there is a feature coming that enables 2 or more columns more simply (maybe to begin with via a special css class that divides the columns automatically?).
I saw this request on a lot of posts concerning form plugins!
Thomas
If you get creative with the inline HTML fields, you can split the form into 2 columns pretty easily without having to float individual fields, etc. Check out this previous thread for an example.
