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.
arik
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
mobitz
how about contact form 7 with radio button? I need a tutorial how to create the css of radio button
bage
You could try using http://damirfoy.com/iCheck/
kjoy
Where does the custom CSS go? In the theme stylesheet or the plugin stylesheet?
bage
In the theme stylesheet.
Stephanie Treasure
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?
bage
Wrap the form with an ID and then use your styles. It will work just for that form.
Yann
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
bage
You have to include the css code in your theme stylesheet.
Joe
Hi, I’m not able to do this (Create a two column form using Contact form 7).
Could you please help me further.
bage
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.
sam
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?
bage
Have you included the css wrapper classes in the form (in the form editor)?
Marie
I could weep, this is exactly what I have been looking for! Thank you!!!
Simon
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
bage
You could always reduce the font size a bit.
karri
Thanks for sharing this code. It’s been SUPER helpful.
Magnus
Hi!
Does anyone knows how to make a two column form responsive?
bage
Just set the widths in percentage instead of fixed width.
Joel
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?
bage
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]
Sharon
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. :]
fudge
Thank you for this tutorial. Can you explain how to do this for a 3 column form7 form? That would be amazing.
Thank you
bage
Almost the same. Just define 3 css classes and place form fields as you needed.
Andanet
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
bage
Actually they are working fine on Chrome and Firefox. Do you have a live example for me to check?
Andanet
you can try here:
http://www.weddingviaggi.it/scheda-sposi/
Simon
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
bage
You also have to add input[type=”email”] in you css along with input[type=”text”].
Luigi
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.
Axium Web
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 🙂
jeff
Thank you for this, I was in such a hurry on this website I’m sure you saved me hours.
jeff
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. 🙂
jon
why do I get this horrible line?
http://www.bonappetitalpes.com/feedback
many thanks.
Jon
bage
It comes from your footer styles. You should add a clearfix class when using css float. Nothing to do with the forms.
Gabe
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
Axel
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;
}
Max
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]
max
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
AK
Hi,
Nice. But the styling will not work on the email, need to change:
input[type=”text”]
should simply be input
AK
bage
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”]
Todd
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!
bage
if you are going to use a responsive layout, you should consider using % for withs, instead of fixed withs.
Todd
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!
Marco
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.
bage
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
Shanae
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/
bage
You should increase the width of text area.
Florian
Thank you so much for sharing this, it helped me set up the form exactly how I wanted it!
Kathleen
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
Oscar
Thanks for this! great tutorial. I figured out the email thing before reading through the comments (Doh!)
Abid
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
Abid
Please Cancel this comment as I got my answer. Thanks for this tutorial and sorry for this comment.
Abdullah
Hi,
Thanks for this tutorial, My radio buttons are in vertical, Is there a way to style them in line horizontally?
Emmitt
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
Sandy
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
notresponsiveatall
…not responsive.
Edwin
any idea on how to fix this for mobile? I tried but seems I see only 1 column. Thanks.
Rafael Santana
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?
J. Brasco
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?
bage
You need to style the select element too. The example code only have styles for text box.
ryan
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!
alin
Why my form is looking like this?
http://www.sldesign.ro/cerere-pret/
bage
it is something theme related. It doesn’t render the contact form shortcode.
Georgina
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?
Tre
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?
Stephan
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
Sam
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 🙂
bage
You can define the column with in percentage instead of pixels to achieve that.
bage
Here is a tutorial on responsive two column form.
https://www.wpsnippet.com/creating-responsive-two-column-form-using-contact-form-7/
Alan
Hello
Could I just check something. Your code works just fine apart from the ’email’ box. There is no styling in mine. I
Rgds
bage
add your styles to
input[type="email"].Alan
Hello
It’s ok, I saw Axel reply on the 17th September. I’ve changed it and added the one for [tel].
Rgds
Mark
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
Masud
Great….
Working perfect thanks.
Manish
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
Alejandro
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
bage
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.
chris
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!
bage
You have to use
input[type="email"]andinput[type="tel"]Keith
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
bage
You have to add the styles to the theme stylesheet.:)
Stefan
Hello,
great tip but the field email its longer then the other fields. How can i fix it?
Jen
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!!
Giao
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.
Yarina
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
John Petersen
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?
Enzo
Thank you very very much!
Domenico
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?
Stratos A
Superb. Worked like a charm.
Thanks 🙂
Voshon
Thanks…!!
Wajahat
I want four items in one row. Please tell me ho to do it?
GRAFICOSUD
Good job! Thanks a lot. Regards
Akshaya
Thank you so much..
Tim
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
Adrew
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
Stijn Jasper
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?
SRKK
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
lea
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
Bjorn Spee
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
Jesus Ernesto Sanchez Rodriguez
Excelent post, really work for me. Thanks !
Christine
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 🙂
Vineeth Mungath
I was looking for an easy solution(like plugins) to make contact form in multicolumn layout and this tutorial helped me to make my client website contact forms in two column layout. Appreciate your efforts.Thank you
Anuj
The css which is given is not proper.
the email field is going behind the phone number field.
Please suggest
photo editing point
That’s a wounderful tutorial!!! Thank you very much! I got a couple of techniques for myself!
Shamikh
Hello sir thanks you so much for this amazing code.. but for now i am facing issue in the mobile view. this form is not mobile responsive please teel me the correct way what i can do for now?