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.
You can find an updated version of this tutorial with responsive style here.
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.
If the custom CSS goes in the theme’s stylesheet, won’t it affect all the forms throughout the Website? What if you only want 1 form to be styled that way for a specific purpose?
Wrap the form with an ID and then use your styles. It will work just for that form.
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”].
Hi bage,
Thank you very much for the tutorial. Worked for me fine, with the addition for the input[type=”email”] in the css.
Now my problem: as you can see http://shavebox.ch/kontakt/ the lable “Ihre Mitteilung” is not above the textarea (your-message). Any idea?
Thanks.
I used to do all my forms with the Gravity Form plugin. However, I am working on a new project with a theme which does not support Gravity Form. Your tutorial is gonna be helpfull. Thanks 🙂
[…] http://www.wpsnippet.com/create-a-two-column-form-using-contact-form-7/ […]
Thank you for this, I was in such a hurry on this website I’m sure you saved me hours.
Now if there was javascript to make it jump horizontally moving from First Name to last name it would be so much better for the user.
But I’m still very grateful. 🙂
why do I get this horrible line?
http://www.bonappetitalpes.com/feedback
many thanks.
Jon
It comes from your footer styles. You should add a clearfix class when using css float. Nothing to do with the forms.
Hi, love the two look of this, but I’m running into a couple issues.
1) There is no border around the email field.
2) I changed the width throughout the CSS to 100% to make it responsive, but when I test it out the field don’t all line up nicely on the left. Some get indented in a bit.
3) I have a serperate contact form (also CF7, on my ‘Services’ page) on a different page that I would like to have the same styling but in single column. Not sure how to do this.
Any advice is much appreciated, Gabe
whaleheartproductions.com/contact
Here’s the correct code, so that the email-space hat the same style as anything else, too
#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”], #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=”text”], #two-column #left input[type=”text”], #two-column #right input[type=”email”], #two-column #left input[type=”email”]{
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 input[type=”email”]:focus, #two-column textarea:focus{
background: #eee;
}
#two-column input[type=”submit”]:hover{
background:#fff;
color:#222;
border: 1px solid #222;
}
Hello Bage, thank you very much for this tutorial. i have a few questions:
I would like to center the form on my page. right now it is alligned to the left. how can i do this?
also, i seem to be unable to create a form from scratch, i am only able to edit your example. i can work with that, but i would ideally like to make on from scratch. this is what i have so far, but it shows up as a blank page.
It’s not a big deal, but if you have time, could you try to see what’s wrong with it?
Thanks a lot!
Anrede
[checkbox* Anrede exclusive “Herr” “Frau” “Firma”]
Name
[text* Name]
E-Mail
[email* E-Mail]
Beladung
[text* Strasse]
[text* PLZ]
[text* Ort]
[text* Etage]
[text Vorderhaus-/-Hinterhaus-/-Seitenflugel]
Augzug
[checkbox* Aufzug exclusive “Ja” “Nein”]
test
[text test]
=test2
[text test2]
the code came out all wrong when i pasted it in, that may have something to do with it. i wrote it in notepad. i will try to write it again from scratch in contact form 7
Hi,
Nice. But the styling will not work on the email, need to change:
input[type=”text”]
should simply be input
AK
That is true, there is a recent update to contact form 7 which separated email and regular text field. Still it is best to use input[type=”text”] and input[type=”email”]
Hey there
Thanks for this guide and the comment responses. It’s helped me make a 4 column form.
If you take a look at http://bit.ly/1bElefz, everything looks good in the browser. Then look at it in a mobile phone and not so great.
Can you give me some advice on how to get the form fields to stack when responsive?
Thanks!
if you are going to use a responsive layout, you should consider using % for withs, instead of fixed withs.
Hi There
I did use % for the widths and not fixed widths. You can see if you look at the source code at http://bit.ly/1bElefz.
Any further advice?
Thanks!
Thanks for the info!
I only have one challenge! Is it possible to change the fill-in order of the two column form? I would like to jump from first name to last name (on the same row) instead of first moving downwards.
Thanks in advance.
In a normal form we can use tabindex. like the following
<input type=”text” name=”username” tabindex=”1″ />
Have to think about contact form 7
Any idea why I’m not having success getting the Your Message to line up with the text area box?
CSS has always been a struggle for me – something about it will not click in my brain.
Here’s where the form is currently located:
http://www.norcalunique.com/wpdir/contact/
You should increase the width of text area.
Thank you so much for sharing this, it helped me set up the form exactly how I wanted it!
Hi there,
I’m having three issues with this code.
1) The first line is too short and does not align on the left.
2) For some reason the email field is in a different style: No rounded corners, different dimensions.
3) I tried to change out all of the pixel widths with percentages so that it would be responsive and it scrambled the layout.
Any assistance would be greatly appreciated. The form is located at: http://www.ayshomecare.net. It’s located in the slide-down “drawer” labeled “Contact” in the top right corner.
Thank you,
Kathleen
Thanks for this! great tutorial. I figured out the email thing before reading through the comments (Doh!)
Hi,
where do we add css code? I added it to the field “additional setting” right below the contact form I am trying to style, but it isn’t working. I’m using CF7 Version 3.1.1
Please Cancel this comment as I got my answer. Thanks for this tutorial and sorry for this comment.
Hi,
Thanks for this tutorial, My radio buttons are in vertical, Is there a way to style them in line horizontally?
Hi,
great manual! Thank you!
But how can I add EMPTY rows in the right div?
In the first row I would like to have input fields on each side. In the third line just an input filed on the left side and in the fourth row again two fields on each side.
doesn’t make the job…
Sorry for my bad english
Hi this isn’t working on the avada theme, alignment is left and there is no bg colour. Also no space between two columns. Any advice?
Kind Regards
…not responsive.
any idea on how to fix this for mobile? I tried but seems I see only 1 column. Thanks.
Thanks for the tutorial!
I’m for hours, trying to create 3 boxes that are aligned on the same line. I tried to follow your answer in the comments creating a div 3 columns. But nothing worked. ~
pastebin.com/QxaWDMgi
What do I do?
I have added this to my page like you have it. Everything changes but only text and email boxes. I have a dropdown menu but that stays the same. How can I change this?
You need to style the select element too. The example code only have styles for text box.
Hey Bage, thanks for putting this together. I need to create quite a unique form that needs various width boxes, with some lines having just one box that goes across the whole form, then (for example) four different size boxes on a different line (all different lengths). It’s quite difficult to explain but basically my customers receive a form to fill out (via post) but I’d like to replicate that form as an image with interactive boxes so that people can do it online instead of by pen (fill out and send back by post) – it would speed things up a lot for me. So all the boxes need different lengths to match what the form looks like. It’s a tricky one but any help you can give would be brilliant! Thanks!
Why my form is looking like this?
http://www.sldesign.ro/cerere-pret/
it is something theme related. It doesn’t render the contact form shortcode.
Hi, Thank you so much for your help with the two columns. But can you please advice on how two make the two columns responsive on mobile?
Thank you.
I have been trying to have the input border change to red when when an empty form is submitted. Could you guide us on that please?
Hey!
Many thanks for your very helpful tutorial! It helped me to solve a problem which I had for a looong time.
Kind regards
Stephan
Great Article was looking for something similar would you be kind enough to put up an example for a responsive two col form.
Many thanks great blog 🙂
You can define the column with in percentage instead of pixels to achieve that.
Here is a tutorial on responsive two column form.
http://www.wpsnippet.com/creating-responsive-two-column-form-using-contact-form-7/
Hello
Could I just check something. Your code works just fine apart from the ’email’ box. There is no styling in mine. I
Rgds
add your styles to
input[type="email"].Hello
It’s ok, I saw Axel reply on the 17th September. I’ve changed it and added the one for [tel].
Rgds
Hello there,
just founded this beautyfull example of two columns form.
I have problem with google crome.
Somehow it breaks ( after 4thi row ) got two diferent forms, and on both after 4thi row, it breaks on google crome and makes filend not clickable or writeable.
look at image
http://i.imgur.com/Umhzzf3.jpg
pleasehelp me to sokwe this problem, or i must go back to normal one column form:-(
Best regards,
M
Great….
Working perfect thanks.
Hello,
When I submit the contact form the THANK YOU MESSAGE is not alingned properly.
Also how can I space out the submit button?
http://goo.gl/x6NUFY
Hi there. This is my first time using CF7 and i don’t have css knowledge. How am i supposed to “add” the css to the form? Is the code you posted the final code?
I am really new so im sorry.
Thanks
Yes, it is the final code, but you may have to modify and adapt it to match your theme. You have to add the css code to your theme stylesheet.
Hi Buddy
Thanks so much on the 5 Star tutorial! Its literally the best one Ive seen yet based on what I have been looking for!
I was wondering if you knew how to style the email and phone fields?
this is the contact form Im currently working on using your code
http://blog.teamac.ca/testpage/
Thanks so much You’re Awesome!
You have to use
input[type="email"]andinput[type="tel"]I am trying to make a 2 column form in Contact Form 7, In this post it says “Now we are going to add some CSS to make the form two column and bit more stylish”. Bage I see in your previous post about adding this code to the stylesheet but where in the stylesheet is this added? Any help greatly appreciated Thank you
You have to add the styles to the theme stylesheet.:)
Hello,
great tip but the field email its longer then the other fields. How can i fix it?
Not sure if anyone is still on this thread but if so– wondering if anyone has advice:
I’ve used this exact method a few times. I am working on a new site and am trying to duplicate it here. I did it the exact same way (see contact form at the bottom of home page) and edited the CSS stylesheet to match this one. However, it is not working… Any ideas?
Thank you!!
Really thank you very much. I spent an entire day struggling with the contact form without design into 2 columns. Fortunately, I have found your website. Looking at my website, thanks to you that I finally did what I wanted. Thank you, thank you very much. Sorry for my english is not very good.
Hi!
Thanks so much for this!
I did notice the styles weren’t working for me in one of the fields: email. Then I saw that there’s not a css style for the “email” input type, so I created it and now it works great. I basically added this to in addition to your css:
#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;
}
Just in case someone had the same issue.
Love,
Yari
[…] Para que tengáis más información sobre esta personalización de columnas, os recomiendo este post sobre crear un Contact Form 7 de dos columnas. […]
I am having the same issue where the formatting used in CSS in the stylesheet for the theme isn’t having any effect on the form. Can you help?
Thank you very very much!
Hi,
great tutorial I’m very happy with it.
In my form I also use select tag however I’m not able to obtain the same style as for other tags (text, email, …)
I tried with this css code:
#two-column #right input[type=”select”]{
position: relative;
padding: 5px;
border:1px solid #000;
font-size :14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
However it doesn’t work.
Could you please help me to understand how to style select tag?
Superb. Worked like a charm.
Thanks 🙂
Thanks…!!
I want four items in one row. Please tell me ho to do it?
Good job! Thanks a lot. Regards
Thank you so much..
Hi
Glad I found these instructions they have worked a treat to create two columns. One the left side I have name last namee email telephone and subject. Then on the right side I have a large text box.
Everything works fine until you press send before everything is filled in. It creates a pink strip behind the top text boxes and the alert instructions are cramped between the input columns.
Any idea how I can fix this. Otherwise its BRILLIANT thank you so much.
Tim
Nice tutorial! It maybe a bit technical for average users I think.
For styling, I would recommend this one: https://wordpress.org/plugins/form-styles-for-contact-form-7/stats/
It quickly adds styles to your form. No extra coding
Hi there, great tutorial. I am just wondering if it is possible to fit the whole form into one row. I wish to create a contact footer like this one: http://consulting.stylemixthemes.com/fifteen/
Any ideas?
Dear:
One question if you help me to get out from this issue.
how the radio buttons or check boxes can be divided.
example:
i have 10 check boxes / radio buttons on the form.
i want to make it look good i want 5 on one line and 5 on next line how it can be done in contact form 7.
Thanks in advance
Hi,
I cannot get this to work. Were about in the css stylesheet do you put the code? Does it go in the body tags, at the end. It doesn’t matter I put it, I still get one column. I have copied everything exactly as you have it above. I must be doing something very wrong. Please help?!!
Thanks
Thanks for this great guide!
Only have one issue with my contact form, I have to options to select a preset name and one for the date and these options look different in the contact form.
http://mangohoian.com/reservations-contact-form/
How can I solve this?
Cheers,
Bjorn
Excelent post, really work for me. Thanks !
Hi, and thank you so so much for this wonderful article! I’m a total and complete beginner to css and I have found it incredibly difficult to customize the contact form 7 on my own and yours is the first article I have found helpful online.
I know this is an old article, and as amazing as it is, it’s almost, but not quite what I need for my website and I was hoping you could help me customize the code to look like the contact form here:
danidiamond.com/contact/
I would be forever grateful for any help!!
Thanks so much for taking the time!
Sincerely,
Christine 🙂