This css will create 2 columns
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
#two-column{ width: 550px; } #two-column #left{ width: 300px; float: left; } #two-column #right{ width: 250px; float: right; } #two-column p{ margin-bottom: 12px; } #two-column input[type="text"]{ border:none; border:1px solid #000; font-size :14px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 540px; padding: 5px; } #two-column #right input[type="text"], #two-column #left input[type="text"]{ width:240px; } #two-column textarea { position: relative; padding: 5px; border:1px solid #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 540px; } #two-column input[type="submit"]{ padding:8px 18px; background:#222; color:#fff; border: 1px solid #fff; float:right; font-size: 14px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #two-column input[type="text"]:focus, #two-column textarea:focus{ background: #eee; } #two-column input[type="submit"]:hover{ background:#fff; color:#222; border: 1px solid #222; } #two-column input[type="email"]{ border:none; border:1px solid #000; font-size :14px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 540px; padding: 5px; } #two-column #right input[type="email"], #two-column #left input[type="email"]{ width:240px; } |
Add this to the contact form 7 front end
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="two-column"> <div id="left"> <p>First Name [text* first-name]</p> <p>Email [email* your-email] </p> </div> <div id="right"> <p>Last Name [text* last-name] </p> <p>Phone [text* your-phone] </p> </div> <p>Subject [text* your-subject] </p> <p>Your message [textarea your-message]</p> <p>[submit "Send"]</p> </div> |
