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.

Published on February 24th, 2012

47 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/