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.

Published on February 24th, 2012

73 Comments

  1. arik says: - reply

    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

  2. mobitz says: - reply

    how about contact form 7 with radio button? I need a tutorial how to create the css of radio button

  3. kjoy says: - reply

    Where does the custom CSS go? In the theme stylesheet or the plugin stylesheet?

  4. Yann says: - reply

    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

  5. Joe says: - reply

    Hi, I’m not able to do this (Create a two column form using Contact form 7).
    Could you please help me further.

    • bage says: - reply

      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.

  6. sam says: - reply

    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?

  7. Marie says: - reply

    I could weep, this is exactly what I have been looking for! Thank you!!!

  8. Simon says: - reply

    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

  9. karri says: - reply

    Thanks for sharing this code. It’s been SUPER helpful.

  10. Magnus says: - reply

    Hi!
    Does anyone knows how to make a two column form responsive?

  11. Joel says: - reply

    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 says: - reply

      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]

  12. Sharon says: - reply

    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. :]

  13. fudge says: - reply

    Thank you for this tutorial. Can you explain how to do this for a 3 column form7 form? That would be amazing.

    Thank you

  14. Andanet says: - reply

    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

  15. Simon says: - reply

    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

  16. Luigi says: - reply

    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.

  17. Axium Web says: - reply

    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 :)

  18. jeff says: - reply

    Thank you for this, I was in such a hurry on this website I’m sure you saved me hours.

  19. jeff says: - reply

    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. :)

  20. jon says: - reply

    why do I get this horrible line?

    http://www.bonappetitalpes.com/feedback

    many thanks.

    Jon

    • bage says: - reply

      It comes from your footer styles. You should add a clearfix class when using css float. Nothing to do with the forms.

  21. Gabe says: - reply

    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

  22. Axel says: - reply

    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;
    }

  23. Max says: - reply

    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 says: - reply

      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

  24. AK says: - reply

    Hi,
    Nice. But the styling will not work on the email, need to change:

    input[type=”text”]

    should simply be input

    AK

    • bage says: - reply

      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”]

  25. Todd says: - reply

    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!

  26. Marco says: - reply

    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 says: - reply

      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

  27. Shanae says: - reply

    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/

  28. Florian says: - reply

    Thank you so much for sharing this, it helped me set up the form exactly how I wanted it!

  29. Kathleen says: - reply

    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

  30. Oscar says: - reply

    Thanks for this! great tutorial. I figured out the email thing before reading through the comments (Doh!)

  31. Abid says: - reply

    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

  32. Abdullah says: - reply

    Hi,
    Thanks for this tutorial, My radio buttons are in vertical, Is there a way to style them in line horizontally?

  33. Emmitt says: - reply

    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

  34. Sandy says: - reply

    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

  35. Edwin says: - reply

    any idea on how to fix this for mobile? I tried but seems I see only 1 column. Thanks.

  36. 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?

  37. J. Brasco says: - reply

    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?

  38. ryan says: - reply

    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!

  39. alin says: - reply

    Why my form is looking like this?

    http://www.sldesign.ro/cerere-pret/

  40. Georgina says: - reply

    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?

  41. Tre says: - reply

    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?

  42. Stephan says: - reply

    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

  43. Sam says: - reply

    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 :)

  44. Alan says: - reply

    Hello

    Could I just check something. Your code works just fine apart from the ‘email’ box. There is no styling in mine. I

    Rgds

  45. Alan says: - reply

    Hello

    It’s ok, I saw Axel reply on the 17th September. I’ve changed it and added the one for [tel].

    Rgds

  46. Mark says: - reply

    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