Create a two column form using Contact form 7
Contact form 7 is a very flexible form plugin for WordPress. As I mentioned in the previous post you can style the form as you require.
In this tutorial we will learn on how to create a two column form in Contact Form 7 step by step.
1. Through the form editor we are going to create our form. To style it properly we will wrap it with css classes.
<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>
There are few things to remember here.
a. Each form element should be wrapped with “p” tag along with their Labels. I added “br” tag in-between the label and the form element.
b. The whole form is wrapped by a css id called #two-column
c. The elements, which are going to go on the left are get wrapped with the css id #left.
d. The elements, which are going to go on the right are get wrapped with the css id #right.
2. Add you form to a page and publish. Now your form will look like the following. It may vary depend on your theme.
3. Now we are going to add some CSS to make the form two column and bit more stylish.
#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;
}
4. Now your form will look like the following.
Hi
i enjoy very much your website and your tips
i implemented today the 2 column procedure and was successfully although i have no idea with code
i have a question
is it possible to do the same for 3 or 4 column plus face the contact form with a background image?
if so can you please guide me hoe to do that?
All the best
Arik
how about contact form 7 with radio button? I need a tutorial how to create the css of radio button
You could try using http://damirfoy.com/iCheck/
Where does the custom CSS go? In the theme stylesheet or the plugin stylesheet?
In the theme stylesheet.
Hi Bage,
Thanks for the great article. where exactly does it go in the theme stylesheet? I tried to include it but it didn’t change anything (stayed one column) and I am a newbie when it comes to coding .. :s
You have to include the css code in your theme stylesheet.
Hi, I’m not able to do this (Create a two column form using Contact form 7).
Could you please help me further.
Add the css code in your stylesheet and then create the form exactly it is it above. Don’t forget to include the css wrapper classes in the form editor.
I have tried to use this code also but am still suck in single column
have put the CSS code in the stylesheet and it unfortunately still doesn’t work, any ideas what I am doing wrong?
Have you included the css wrapper classes in the form (in the form editor)?
I could weep, this is exactly what I have been looking for! Thank you!!!
Thank you.
This is a very helpful tutorial.
I added everything above and the page + form is rendering perfectly.
To fit my 2 column page, I also reduced the form field widths by 20%.
However, now the form fields are character limited (e.g. unable to completely enter email address).
Any suggestions on what I’m missing / doing wrong?
Cheers
You could always reduce the font size a bit.
Thanks for sharing this code. It’s been SUPER helpful.
Hi!
Does anyone knows how to make a two column form responsive?
Just set the widths in percentage instead of fixed width.
bage,
Looks great!
I’m having a problem when submitting the two-column form. When I receive the message in my inbox it’s from [your-name]. There isn’t a [your-name] field in the two-column form. There’s only [text* first-name], [email* your-email], [text* last-name], [text* your-phone], [text* your-subject] and [textarea your-message].
What’s wrong?
In you email response box, you will have to use the right shortcodes.
In this case
[first-name]
[last-name]
[your-email]
[your-phone]
[your-subject]
[your-message]
Brilliant! I used it with Headway. Took me a min to figure out where to put the html and css but I figured it out and it looks superb. Thanks. :]
Thank you for this tutorial. Can you explain how to do this for a 3 column form7 form? That would be amazing.
Thank you
Almost the same. Just define 3 css classes and place form fields as you needed.
Hi bage, have you verified problems with Chrome and Firefox? In IE9/10 is all ok nut with other browsers there is a little bit problem. The fields cannot be written.
If i remark float command in css are ok but not splitted in 2 columns.
thanks in advance
Actually they are working fine on Chrome and Firefox. Do you have a live example for me to check?
you can try here:
http://www.weddingviaggi.it/scheda-sposi/
Hi there,
Firstly, thank you for the very helpful post.
I set this code up and it worked fine. But I see the email field has changed form recently. Not sure why?
Would appreciate any suggestions of how to fix this : http://cshe.fr/contact/
Thanks
You also have to add input[type="email"] in you css along with input[type="text"].