This css will create 2 columns
#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
First Name
[text* first-name]
Email
[email* your-email]
Last Name
[text* last-name]
Phone
[text* your-phone]
Subject
[text* your-subject]
Your message
[textarea your-message]
[submit "Send"]
