Creating a responsive two column form using Contact form 7

In my previous article I have wrote about creating a two column form in Contact form 7. Now in this tutorial we will see on how to create a responsive two column form. The form will be in two columns in bigger screens and will become one column in mobile devices. Our final form will look like the following.

final-fom-desktop

HTML Markup

Let’s create the HTML markup for the form first. We will wrap the whole form with an ID named “responsive-form” and then will have rows and columns like the following.

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">First Name [text* first-name]</div>
<div class="column-half">Last Name [text* last-name]</div>
</div>

<div class="form-row">
<div class="column-half">Email [email* your-email]</div>
<div class="column-half">Phone [text* your-phone]</div>
</div>

<div class="form-row">
<div class="column-full">Subject [text* your-subject]</div>
</div>

<div class="form-row">
<div class="column-full">Your message  [textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>

</div><!--end responsive-form-->

If you publish the form right now, it will look similar to the following.

unstyled-form

CSS Styles

Let’s look at the css styles for our two column grid.

#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
	margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
}

These styles define rows and columns. if you look at your form right now, you will see the form is already in two columns.

grids-added

Let’s style the form now..

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	background: #CA0002;
	color: #fff;
	text-transform: uppercase;
	border: none;
	padding: 8px 20px;
	cursor: pointer;
}
.wpcf7-submit:hover{
	background: #ff0000;
}
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

with these styles applied the form will look lot nicer. In desktop it will be displayed in two columns and in a mobile device it will be displayed in one column.

in desktop
final-fom-desktop

in mobile
final-form-mobile

If you have any questions, please let me know on the comments.

148 Comments

  1. […] You can find an updated version of this tutorial with responsive style here. […]

    • Steve says: - reply

      Hello,

      How do I copy and past the code from the above css file into my theme style sheet so that I can at least get started and start working with it? Thank you!

  2. Paul says: - reply

    where should i write the css code? i don’t see a window for that.

  3. bilal says: - reply

    how do i make this centered? its currently on the left. also how do i put the tags within the text box, so when i click inside the tag disappears?

  4. bilal says: - reply

    nevermind i found out about the tags.

    BUT how do i center the whole form including the button?

    • bage says: - reply

      With little bit of css you can do that. using “margin-left:auto, margin-right:auto” will center any div to the parent div. (Like the css definition I have used in #responsive-form )

  5. Matthew says: - reply

    Hello, the HTML bit dose it go in the form field? or what? i understand the css bit just no the HTML bit (yes im backwards)

  6. bilal says: - reply

    It doesn’t seem to work, here is my Custom CSS, what could be the problem?

    #logo {
    float: none;
    text-align: center;
    }

    .main-nav { display:none; }
    .call-to-action { display:none; }
    #featured-image {
    display: right;
    }

    body {
    background: none repeat scroll 0 0 #fff;
    color: #555555;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    text-rendering: optimizelegibility;
    }

    #featured p {
    font-size: 0;
    line-height: 0;
    padding: 0;
    text-align: center;
    }

    .powered {
    display:none;
    }

    #wrapper,
    #featured,
    .widget-wrapper {
    background-color: transparent;
    border: none;
    }

    .scroll-top {
    display: none;
    }

    #responsive-form{
    max-width:600px /*– change this to get your desired form width –*/;
    margin:0 auto;
    width:100%;
    }
    .form-row{
    width: 100%;
    }
    .column-half, .column-full{
    float: left;
    position: relative;
    padding: 0.65rem;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
    .clearfix:after {
    content: “”;
    display: table;
    clear: both;
    }

    /**—————- Media query —————-**/
    @media only screen and (min-width: 48em) {
    .column-half{
    width: 50%;
    }
    }

    .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
    .wpcf7 input[type=”text”]:focus{
    background: #fff;
    }
    .wpcf7-submit{
    float: center;
    background: #b2c195;
    color: #b2c195;
    text-transform: uppercase;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    }
    .wpcf7-submit:hover{
    background: #b2c195;
    }
    span.wpcf7-not-valid-tip{
    text-shadow: none;
    font-size: 12px;
    color: #ff0000;
    background: #fff;
    padding: 5px;
    }
    div.wpcf7-validation-errors {
    text-shadow: none;
    border: transparent;
    background: #fff;
    padding: 5px;
    color: #9C6533;
    text-align: center;
    margin: 0;
    font-size: 12px;
    }
    div.wpcf7-mail-sent-ok{
    text-align: center;
    text-shadow: none;
    padding: 5px;
    font-size: 12px;
    background: #59a80f;
    border-color: #59a80f;
    color: #fff;
    margin: 0;
    }

    img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    margin: 0 228px ;
    }

    .copyright {
    margin: 0 -153px;
    }

    .widget-wrapper select, .widget-wrapper input[type=”text”], .widget-wrapper input[type=”password”], .widget-wrapper input[type=”email”] {
    width: 240px;
    }

    area:focus, input:focus, textarea:focus {
    background: none repeat scroll 0 0 #eee;
    }

    select, input[type=”text”], input[type=”password”], input[type=”email”] {
    border: 1px solid #555555;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
    }

    element.style {
    display: none;
    }
    div.wpcf7-validation-errors {
    border: medium none;
    }

    img {
    border: 0 none;
    height: auto;
    margin: 0px 1px;
    max-width: 100%;
    vertical-align: middle;
    }

  7. bilal says: - reply

    How do I make a 3 column form?

    • bage says: - reply

      Define a css class like .column-one-third{width:33%; float:left} and can use that like i used the .column-half

      • bilal says: - reply

        could you show an example of a 3 column in your current 2 column form? Just change of the half to one-third. kind of confused, i need to actually see the css/form code im really a noob. Thanks

  8. Hello,
    Thx for the tuto 🙂

    1- Is there a way for the txt era in two columns to be 100%…because it seems to be only 50% (width) ? I dont know where to change it in the css.. i see only one 50% but it doesnt work while 100%.
    2- Is it possible to give the code for 3 fonctionnal columns (responsively).

    Thanks!

  9. Tyler says: - reply

    Hey man,

    Great tutorial. But I can’t seem to get it to work.

    I’ve created the form and put the CSS into my child theme style.css folder.

    Could you venture to the site and take a look real quick?

    Much thanks.

  10. ninoa says: - reply

    How can I get the submit buttom bigger?

  11. Lorenzo says: - reply

    Hi,
    I’ve implement the code as it is but somethings don’t work, for instance I can’t change the submit botton’s color in:
    .wpcf7-submit{
    float: right;
    background: #326534;
    color: #326534;
    text-transform: uppercase;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    }

    I’ve needed to add this code in CSS:

    input[type=”submit”], .button {
    background: none repeat scroll 0 0 #326534;
    }

    Another thing is the space between lines is not shown like in the example.

    Thanks in advance for your comments.

  12. Hi! My forms are not equals. Those that are full does not have the same length than those with the class column-half.

    I’m not so sure that the second part of CSS works. Do I need to copy that bit on the style.css too?

    Thanks!

  13. Zack says: - reply

    Hey Bage,
    Great tutorial. I have a question I was hoping you could help with, as I have been banging my head against a wall all day trying to figure out the issue i’m having.

    I have created a contact form similar to the one in this tutorial using the code you provided but adding some different fields. One of the fields I added was a dropdown menu.

    When I added this dropdown it seems to push a blank into the next line, shifting the that is supposed to be on the left to the right and the thats supposed to line up with it on the left down to the next line.

    This is what it’s supposed to look like
    –textField– –dropDown–
    –textField– –textField–

    but it looks like this:
    –textField– –dropDown–
    –textField–
    –textField–

    I had originally tried to do a simple side by side arrangement again using tags and I was having similar issues there as well. Is there a known issue that using a dropdown causes with float or .

    I can seem to figure this out.
    Please help.
    Thanks

  14. Zack says: - reply

    Hey Bage,

    Great article. I have a question I was hoping you could help me with.

    I have created a similar contact form to the one you demonstrate here but using different fields and field types. I seem to have an issue when adding in a dropdown menu where the on the next line is shifted to the right. It looks like a blank is being inserted. This causes the row below to shift right and the on the right of the next row to shift down.

    Do you know if there is an issue with dropdown menus and float or why putting a text field adjacent to a dropdown would cause this formatting error?

    I have tried to put a textfield next to a dropdown menu several different ways and it always seems to mess up the formatting. I haven’t been able to solve this all day.

    Please help.
    Thanks

  15. Timo says: - reply

    Hey bage,

    thanks a lot for your tutorial.

    My form (http://schnupperkurs.org/ratingen/golf/schnupperkurs-golfclub-hoesel/) doesn’t show any text when it is beeing written in a field. It seems like there is no room for text in the fields anymore.

    What can I do?

    Thanks for your help.

    Timo

  16. Lee says: - reply

    Hi!

    This was exactly what I was looking for!

    I was looking for a 3 column design so amended your code to suit.

    i will add the code here if that is ok?

    HTML:

    [text* name id:name placeholder “Enter your first name”]
    [email* email id:email placeholder “Enter your email address”]

    [textarea* message id:message placeholder “Enter a message here”]

    [submit id:submit]

    #responsive-form{
    max-width:940px /*– change this to get your desired form width –*/;
    margin:0 auto;
    width:100%;
    }
    .form-row{
    width: 100%;
    }
    .column-half, .column-full{
    float: left;
    position: relative;
    padding: 0.65rem;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .clearfix:after {
    content: “”;
    display: table;
    clear: both;
    }

    .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .wpcf7 input[type=”text”]:focus{
    background: #fff;
    }
    .wpcf7-submit{
    float: left;
    background: url(‘my button image!’) top left no-repeat transparent;
    width: 201px;
    height: 57px;
    text-indent: -50000px;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    }

    span.wpcf7-not-valid-tip{
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    background: #ff0000;
    padding: 5px;
    }
    div.wpcf7-validation-errors {
    text-shadow: none;
    border: transparent;
    background: #f9cd00;
    padding: 5px;
    color: #9C6533;
    text-align: center;
    margin: 0;
    font-size: 12px;
    }
    div.wpcf7-mail-sent-ok{
    text-align: center;
    text-shadow: none;
    padding: 5px;
    font-size: 12px;
    background: #59a80f;
    border-color: #59a80f;
    color: #fff;
    margin: 0;
    }
    /**—————- Media query —————-**/
    @media only screen and (min-width: 48em) {
    .column-half{
    width: 50%;
    }
    .column-one-third {
    width:33%;
    float:left;
    }
    .wpcf7 textarea {
    margin-left: 20px;
    height: 100px;
    }
    .wpcf7-submit{
    margin-left: 40px;
    }
    }

    I used id’s for the name email and message but that was because of another design I was doing!!

    By the way, thank you so much for sharing this!

  17. Toni says: - reply

    Thank you very much!!!! Great job!!!!

  18. Dex says: - reply

    Hi,

    How do I make email field required?

    Looking forward to hear from you.

  19. Atheng says: - reply

    Bage,

    Great tutorial and form. After plugging all the snippets, I found that the Email and Phone text field with different height. Email with 288px by 42px and Phone with 288px by 34px.

    Please help.

    Thanks

  20. Henry says: - reply

    Hello there,

    I have a little problem with the contact form. If you take a look at my website http://www.aguest.nl/cms/contact/ you can see that that there is space between the fields. IfI push on send button than the error messages do not connect to the fields. On another site I’ve used it and it works prefect. What am I doing wrong?

    Voornaam [text* first-name]
    Achternaam [text* last-name]

    E-mail [email* your-email]
    Telefoon [text* your-phone]

    Onderwerp[text* your-subject]
    Geboortedatum (gratis huidanalayse)[text geboortedatum]

    Uw bericht [textarea your-message]

    [submit “Verzenden”]

    And in my CSS this code:
    /* contactformulier begin */
    #responsive-form{
    max-width:825px /*– change this to get your desired form width –*/;
    margin:0 auto;
    width:100%;
    }
    .form-row{
    width: 100%;
    }
    .column-half, .column-full{
    float: left;
    position: relative;
    padding: 0.65rem;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
    .clearfix:after {
    content: “”;
    display: table;
    clear: both;
    }

    /**—————- Media query —————-**/
    @media only screen and (min-width: 48em) {
    .column-half{
    width: 50%;
    }
    }
    .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
    .wpcf7 input[type=”text”]:focus{
    background: #fff;
    }
    .wpcf7-submit{
    float: right;
    background: #7dbeb6;
    color: #fff;
    text-transform: uppercase;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    }
    .wpcf7-submit:hover{
    background: #083543;
    }
    span.wpcf7-not-valid-tip{
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    background: #7dbeb6;
    padding: 5px;
    }
    div.wpcf7-validation-errors {
    text-shadow: none;
    border: transparent;
    background: #7dbeb6;
    padding: 5px;
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 12px;
    }
    div.wpcf7-mail-sent-ok{
    text-align: center;
    text-shadow: none;
    padding: 5px;
    font-size: 12px;
    background: #7dbeb6;
    border-color: #083543;
    color: #fff;
    margin: 0;
    }
    /* contactformulier einde */

  21. Xavi says: - reply

    Hello,

    just a quick question, i’ve done everything and seems that it works perfect but there’s one thing i would like to change. My form is only two columns if i make my safari window very big and i would like to keep it two columns from lets say 600px to infinite, and become all in one column if the browser is detected smaller than 600px width. What should i modify to get the efect that i want?

    Thanks in advance for your kind attention

  22. John says: - reply

    Can I use these css code on optimizepress theme? Or on OptimizePress CHILD theme?

    How??????????????

  23. Thanks a lot!
    a very helpful article!

  24. Thurain says: - reply

    Awesome! Combine your tutorial and below link tutorial, I am able to add amazing contact form for my website.

    http://www.elioverbey.net/customize-and-style-the-contact-form-7-wordpress-plugin/

    Thank you.

  25. tomm says: - reply

    Thanks for the explanation, but I think there is a slight error.

    When a single field on the right is entered by a user (like Last Name in the example) and the submit button is pressed, the entry boxes will shift vertically because of the validation tips.

    Any suggestion on how to solve this?
    Thanks for your efforts!

  26. Alejandro says: - reply

    Hi Bage,
    I posted a message on the old tutorial but here I am in the new one.

    This is the link to the form I want to use for my employer’s site. It will be “charter quote request” form which includes multible rows in a 2 column form and also a drop down field to select preferred airplane.
    Can you help me out on how to style this form? Do i have to add the css code to the Form Editor where the html code goes? I have very little knowledge about WP, just starting to learn it to slowly modify the website. Do i need any other plugins or anything in order to display CSS styles on my WP site?

    Thanks in advance

  27. Alejandro says: - reply

    Nvm i Figured it out!

  28. Alvin says: - reply

    Hey Bage,

    Thanks for providing the codes as I had spent hours on trying to make the form responsive.

    I’m currently using the Avada WordPress theme for one of my websites, and I can’t seem to style the submit button.

    Is there a way to make the background transparent?

    Many thanks for your help!

    Cheers,
    Alvin

  29. This is awesome. Exactly what i needed for my client! saving this page as bookmark for future clients and do some experimenting with the code 🙂

  30. Thank you, it was exactly what I was searching for and it works perfectly !

  31. fernanda says: - reply

    Hey, congrats for the tutorial.
    I’m not able to config this form, could you give a hand?
    I’d like the three itens from de left to have the same size as text area on the right, but when I chance the navigator it goes wrong.
    Tks in advance

  32. Ole says: - reply

    Thanks this works great!

  33. tim says: - reply

    when i copy in the css to the styles.css nothing changes 🙁

  34. Kai says: - reply

    Hi, thank you for the tutorial. At this URL http://199.116.248.13/~xlreiser/booking2/ I’m working on a form. The first input object is a pull down menu. It did not become responsive, or styled as the rest of the input boxes. I’d be grateful for any assistance. All elements must be responsive. and preferably also styled the same.

  35. […] Alle Felder untereinander zu setzen, mag für kurze Formulare gängig sein, für längere Formulare ist es nicht angeraten. Zweispaltige und zudem responsive Layouts lassen sich in Contact Form 7 nur über Umwege erreichen. Eine von uns getestete Lösung dafür wurde auf WPSnippets veröffentlicht. […]

  36. Maria says: - reply

    Hi Badge,
    Thanks for the great tutorial! I am having a bit of trouble. It all seems to be working fine at desktop size. When I make my window smaller and it turns to 1 column, then I cannot select the Name field anymore or the Dropdown menus (only one seems to keep working). Could you please have a look?
    http://lisbondestinationtours.com/request-tour-responsive/

    Thanks! Maria

  37. Rochelle says: - reply

    thank you for sharing your code. Now I can start doing what I want to.

  38. Pablo says: - reply

    Hi there!

    We experienced the same “hassle” when using Contact Form 7. That’s why we decided to develop our own form builder plugin for WordPress. The result is PlanSo Forms.

    With PlanSo you can easily create multi-column forms via drag-and-drop.

    Please feel free to check it out and let us know how you like it. You will find it in the WP Plugin directory: https://wordpress.org/plugins/planso-forms/ or via our homepage http://forms.planso.de.

    Cheers

  39. Georges says: - reply

    works great! Thanks

  40. JUNIOR says: - reply

    Perfect!
    Thank you…

  41. querystore says: - reply

    dear sir, i want select a service to be in full like name field
    and i want a contact a form like here http://www.zimmber.com
    please help me.
    thanks.

  42. Joseph says: - reply

    This is a perfect tutorial. Thanks, worked like a charm.

  43. Derek says: - reply

    Thanks so much for posting this. So useful! One quick question. When I hit submit on my form, I get a green box around the top part of the form with Your message was sent successfully. I tried removed the CSS that looks to add this to the validation, and it still does not work. Is there any way to get rid of any of the validation checks and have the result put at the bottom of the screen?

  44. Thanks!
    Works like a charm..

  45. Lister says: - reply

    hi, its a perfect tutorial, i just want to ask, how to change the background of the whole contact form example: background-color: #ddd

    thanks

  46. Simone says: - reply

    Hello!
    Great tutorial!
    I’ve a problem with my form. Could you please check it?

    http://www.sipo2015.it/modulo-iscrizione/

    Thanks in advance

  47. Balachandra says: - reply

    Thank you very much.
    I am a newbie to wordpress. Your code has saved a lot of time

  48. shim says: - reply

    hi
    i am trying to set all he fields in the same line
    but i am stock, i have tried couple of thing and could not figured it out
    any advise ?
    thanks

  49. Thomas says: - reply

    Hi,
    ia am using this form and it works fine. Now i tried to use it in another projekt and the email that is sent is noch formatted the richt way. It should look like:

    Nachrichtentext/Buchungsanfrage:
    Von: Thomas Paschen
    Adresse: Maiermühle 11 83334 Inzell
    Telefon: 08665 218558
    Email: [email* email]

    But the Emai looks like:
    Nachrichtentext/Buchungsanfrage: Von: Thomas Paschen Adresse: Maiermühle 11 83334 Inzell Telefon: 08665 218558 Email: [email* email] — Diese E-Mail wurde von einem Kontaktformular von Pension und Gästehaus Restner (http://www.pension-restner.de/wordpress) gesendet

    Could you help?
    Thanks

  50. george says: - reply

    There’s quite a large gap between the box levels. Is there a way to shorten that so that they’re no so spaced height wise?

  51. Martin says: - reply

    Thanks mate this worked perfectly!!!

  52. elena r. says: - reply

    thanks! very helpful.

  53. Ralf says: - reply

    Hi,

    I have installed the contact form according to your specifications and inserted in Childtheme in the style css. But it does not work.
    Share please have with the error I made myself.

    Best Regards

    Ralf

  54. Sander says: - reply

    Hi, where do I have to put this code?

    .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
    .wpcf7 input[type=”text”]:focus{
    background: #fff;
    }
    .wpcf7-submit{
    float: right;
    background: #CA0002;
    color: #fff;
    text-transform: uppercase;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    }
    .wpcf7-submit:hover{
    background: #ff0000;
    }
    span.wpcf7-not-valid-tip{
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    background: #ff0000;
    padding: 5px;
    }
    div.wpcf7-validation-errors {
    text-shadow: none;
    border: transparent;
    background: #f9cd00;
    padding: 5px;
    color: #9C6533;
    text-align: center;
    margin: 0;
    font-size: 12px;
    }
    div.wpcf7-mail-sent-ok{
    text-align: center;
    text-shadow: none;
    padding: 5px;
    font-size: 12px;
    background: #59a80f;
    border-color: #59a80f;
    color: #fff;
    margin: 0;
    }

  55. Marco says: - reply

    Hello Bagerathen,

    wonderful styling, thank you.

    I got a problem: My subject is not 100% row, I dunno why. Could you please help me?

    My site is still In Construction. However I can provide you access if needed.

    Ragrads, MT

  56. Ivy says: - reply

    Thanks for the tutorial! I’ve encountered an issue though – the Google reCAPTCHA stopped working. The reCAPTCHA image still appears but it’s not linked (can’t click on the box) and the “Send” button works without having to click on reCAPTCHA. Hoping you could help!

    Thanks in advance!

  57. I says: - reply

    never mind, I figured it out 🙂

  58. Thanks for the tutorial, works great!

  59. Swapnil says: - reply

    Thanks!!!

    Its work amazing… I have used your previous code that was not working for me but i have tried this and its work on the first attempt

  60. Remco says: - reply

    Bage,

    You’re brilliant! Thanks for this snippet!

  61. Josh says: - reply

    Thanks for putting this up. Easy to follow and works a treat.

    Only thing i am finding is that when it displays on a mobile device i am getting the fields running edge to edge of the screen with no margins or padding. Any suggestions here. just a little bit of breathing space down either side would tidy it up nicely.

    Cheers

    J

  62. Akansha says: - reply

    Hi, thanks a lot for making contact form such a easy task.

    I have no knowledge of CSS but I did it with the help of the code you have provided.

    There is one issue that I am facing on my site. Look at the screenshot please.

    There is space on the right in text area box and a issue in validation.

    https://drive.google.com/file/d/0By_vZEM2YaxDSGJHQ0VmSVZjbFE/view?usp=sharing

  63. Terry says: - reply

    Hi,

    I am trying to create two Contact 7 forms for my site, one with only the one column (easy out of the box), but then I want another that is two columns & responsive.
    My question is, where do I put the css code to do this so that it only affects the one form?

    TIA

    Terry

  64. Terry says: - reply

    Hi,

    Not to worry about the previous post……all sorted

    Thanks for the great post above…all worked out through the excellent material in there.

    Best wishes

    Terry

  65. Efrain says: - reply

    Thanks for this code it look really good.

    For some reason when I view the form on my cell the select field do not adapt properly. I tried adding the following code but the width wont take effect:

    .wpcf7-select {
    width: 100%;
    max-width: 100%;
    }

    Here is the page with the problem:
    http://maidquick.com/request-free-estimate/

    Thanks!

  66. Andreas says: - reply

    Hi,

    thanks for this great tutorial!

    Just one problem: in desktop mode it works fine, but in mobile view the first and third formrow (First name & Email) are not accessible.
    Any idea what could cause this?

    Kind regards
    Andreas

  67. Ok, I copied/pasted the CSS into the style.css file and changed the code on the form itself, but I can’t get the CSS to work.

    Any ideas?

  68. Steffi says: - reply

    Hi, I am very happy that I found your code. Thank you for sharing it! It works great for me. However the css styling for the :focus of the textarea is troubling me as it does not change the background color, whatever I try in the css-styles.

    What works is:
    .wpcf7 input[type=”text”]:focus{
    background: #fff;
    }
    .wpcf7 input[type=”email”]:focus{
    background: #fff;
    }

    What does not work:

    .wpcf7 input[type=”textarea”]:focus{
    background: #fff;
    }

    Any advice?
    I used your responsive code also the styling and wanted to adjust it a bit.

    Thanks alot for helping, Steffi

  69. Thank you Bagerathan, this was very useful, and very simple to implement.

  70. Tim says: - reply

    Thank you for posting this solution.
    I have a large form to create and this will help a lot!

  71. Craig Leigh says: - reply

    Thank you for the tutorial. Everything you have written works exactly but now I have one slight issue. Since using the tags to give the form some style, my entire website now has a roughly 10px border around it. The same is on the home page. I cannot find anywhere in the CSS that will change it but as soon as I deactivate the CF7 plugin, the site returns to normal.

  72. hi, just wanted to say thanks for the guide. it works perfectly and if you know little more of html you can even change some small details at your own preference.
    i suggest it to everyone!

  73. Hi!

    Thanks for the info! Really helpful. Works perfectly.

  74. Rams says: - reply

    No questions here, just compliments! Thank you for writing this piece 🙂

  75. BC says: - reply

    This is the most helpful article I’ve found in a long time – awesome advice and really easy to follow. THANK YOU!!!

  76. Jacqui says: - reply

    Thanks for the info – I managed to set up a three column form and it works a treat!

    http://www.mrnwatch.org.za/pet-register/

    I now need to clearly mark splits between segments of my data, but doesn’t seem to work. Any advice?

    Jacqui

  77. Martin says: - reply

    Thank you very much for this! I was looking hours for some good solution and this is the best I could have found.

  78. Rene says: - reply

    Hi, I made my form based on yors, but it’s bugging the footer of the layout, I wish you could help me with that.

    You can see that the footer of the layout with the form is not full page like it’s on the page that don’t have the form.
    http://www.carroeseguro.com.br/contact
    http://www.carroeseguro.com.br/

    * Sorry for the bad English, not my native language. And thank you so much for the code.

  79. Yves says: - reply

    Hi Bage,
    Thank you for sharing with us simple ones your knowledge. Very helpful. How do you style the message that’s come up after clicking on send? Here’s where the message goes after sending the form. http://aomtinfo.org/course-evaluation
    Thanks
    Yves

  80. Danny says: - reply

    Thanks for much for this. Im slowing picking up CSS on my new site and ive managed to not only get this working but looking nice. I have one little issue though and I hope your knowledge can help.

    On my site http://www.mintyslippers.com I have a contact form. All works great except if ANY of the left columns fail validation the tooltip seems to push things along one column and it makes the alignment go wrong. Doesnt seem to be a problem if items in the right column fail. Any ideas?

    • bage says: - reply

      You can add the following css to make it work as you expect.

      .form-row:after{
      content: "";
      display: table;
      clear: both;
      }

  81. Scott says: - reply

    Hi Bage,

    This post is awesome, thank you. I’m having issues with taking this to three columns. It lays out fine on desktop but responsive on the phone does not break the three columns into three individual lines, so it looks bad. What the heck am I missing? Here’s my code…

    .column-one-third{
    float: left;
    position: relative;
    padding: 0.65rem;
    width:33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }

    First Name* [text* first-name]
    Last Name* [text* last-name]

    Email* [email* your-email]
    Phone* [text* your-phone]
    Your Age* (Minimum age is 15 years old.)[text* your-phone]

    Subject [text* your-subject]

    Your message [textarea your-message]

    [submit “Send”]

  82. Scott says: - reply

    Hmmm, stripped the code, lets try this again.

    [code]

    First Name* [text* first-name]
    Last Name* [text* last-name]

    Email* [email* your-email]
    Phone* [text* your-phone]
    Your Age* (Minimum age is 15 years old.)[text* your-phone]

    Subject [text* your-subject]

    Your message [textarea your-message]

    [submit “Send”]

    [/code]

  83. Scott says: - reply

    I give up, not sure why your form is stripping out the html.

    First Name* [text* first-name]
    Last Name* [text* last-name]

    Email* [email* your-email]
    Phone* [text* your-phone]
    Your Age* (Minimum age is 15 years old.)[text* your-phone]

    Subject [text* your-subject]

    Your message [textarea your-message]

    [submit “Send”]

  84. Gregory says: - reply

    Perfect, it was exactely what i wanted.

    One question: How / which css lines should I add or modify in order to have my formular in the same appearance when I want to print it?

    The appearance is currently not the same When I Click on CTRL + P.

    It would be great if you have an answer.

    greetings from Germany

    Grégory

  85. Alex R. says: - reply

    Nice tips. Can we reuse the code with Bootstrap? I’m using it and don’t want to rewrite all CSS.

  86. I cannot thank you enough sir. My WPCF7 looks better now!

  87. JohnT says: - reply

    Thanks for this – seemed to work very well

  88. Steve says: - reply

    Hello,

    I’m trying to create a form with four columns but the fields are close to one another and I would like to have more space between the columns. How can I achieve this? Thank you.

    Here is what I’m working with below:

    #responsive-form{
    max-width:1200px /*– change this to get your desired form width –*/;
    margin:0 auto;
    width:100%;
    }
    .form-row{
    width: 100%;
    }
    .column-one-fourth{width:25%; float:left}, .column-half, .column-full{
    float: left;
    position: relative;
    padding: .65rem;
    width:100%;
    -webkit-box-sizing: width:200px;
    -moz-box-sizing: width:200px;
    box-sizing: border-box
    }
    .clearfix:after {
    content: “”;
    display: table;
    clear: both;
    }

    /**—————- Media query —————-**/
    @media only screen and (min-width: 48em) {
    column-one-fourth{
    width: 25%;
    }
    }
    .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: width:200px;
    -moz-box-sizing: width:200px;
    box-sizing: border-box
    }

    .wpcf7 input[type=”text”]:focus{
    background: #fff;
    }
    .wpcf7-submit{
    float: right;
    background: #CA0002;
    color: #fff;
    text-transform: uppercase;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    }
    .wpcf7-submit:hover{
    background: #ff0000;
    }
    span.wpcf7-not-valid-tip{
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    background: #ff0000;
    padding: 5px;
    }
    div.wpcf7-validation-errors {
    text-shadow: none;
    border: transparent;
    background: #f9cd00;
    padding: 5px;
    color: #9C6533;
    text-align: center;
    margin: 0;
    font-size: 12px;
    }
    div.wpcf7-mail-sent-ok{
    text-align: center;
    text-shadow: none;
    padding: 5px;
    font-size: 12px;
    background: #59a80f;
    border-color: #59a80f;
    color: #fff;
    margin: 0;
    }

  89. Steve says: - reply

    Hello bage,

    How can I change the CSS to allow for 4 columns and then how can I adjust the spacing between each column?

    Thank you.
    Steve

  90. simon says: - reply

    Hi bage
    First: Thank you so much for this form-modifications. This is just brilliant!

    But: There remains one question–> How can i bring the textboxes of the two columns on the same height? Their height differ about a half of a textboxsize.

    I really tried to find a solution on my own, but i failed..

  91. Eugenio says: - reply

    how do i obtain black borders around each field?

  92. Daniele says: - reply

    Hi,
    thank you for tutorial.
    Would appreciate your help. When I try to send message, I get: “Your message was sent successfully.”, but there is no email. I have checked email address in Contact Form > Mail, also spam folder, but I dont’t receive emails.
    Can you help?
    Thank you in advance

    • bage says: - reply

      You should check weather you server sending emails. You could try installing WordPress SMTP plugin and configure it.

  93. Daniele says: - reply

    Hi,
    you were right. Thanks
    Now I´m trying to make space between 2 fields in one row(email and phone number). I put id class in HTML, then styled CSS: #spaces {
    margin-right: 40px;
    }
    When I put margin-left it works, but with margin-right nothing.
    Also I did some styling to placeholder text, styles all placeholder text, except number field. ..?

    Any advice would be appreciated
    Thank you

  94. Dorina says: - reply

    Hello,

    I followed all the steps and copy the hole css file but my contact form the the “subject” is to short (the same size than name and phone. And my message field is also to small.
    You can have a look on my Website.

    Greetings

  95. Jon says: - reply

    Perfect tutorial. Thank you!

    Worked first time and totally logical to customise.

  96. Sueli says: - reply

    Works!
    Thanks for posting it!

  97. Mo says: - reply

    Thank you for a great tutorial. I followed the instructions initially and the form displayed correctly, but for some reason, the CSS styles are not creating the 2-column format and everything is displaying in one column. I have scoured through the code to see if I missed anything, but cannot seem to locate the problem. Can you review my code and see if I am missing anything? Thanks.

    Also, do you know how to align the recaptcha box with the rest of the form? I have tried a few tricks, but am unable to target it properly.

    /*** ———- CONTACT FORM 7 ———- ***/

    #responsive-form {
    max-width: 1170px;
    margin: 0 auto;
    width: 100%;
    }
    .form-row {
    width: 100%;
    }
    .column-half, .column-full {
    float: left;
    position: relative;
    padding: 0.65rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .clearfix:after {
    content: “”;
    display: table;
    clear: both;
    }
    .wpcf7 input, .wpcf7 textarea, .wpcf7 placeholder {
    font-family: ‘PT Sans’, sans-serif;
    font-size: 16px !important;
    }
    .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
    height: auto;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .wpcf7 input[type=”text”]:focus, .wpcf7 input[type=”email”]:focus, .wpcf7 textarea:focus {
    background: #f2f2f2 !important;
    }
    .wpcf7-submit {
    float: right;
    background: #CA0002;
    color: #fff;
    text-transform: uppercase;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    }
    .wpcf7-submit:hover {
    background: #ff0000;
    }
    span.wpcf7-not-valid-tip {
    text-shadow: none;
    font-size: 12px;
    color: #ff0000;
    padding: 5px;
    }
    div.wpcf7-validation-errors {
    text-shadow: none;
    border: transparent;
    background: #f9cd00;
    padding: 5px;
    color: #9C6533;
    text-align: center;
    margin: 0;
    font-size: 12px;
    }
    div.wpcf7-mail-sent-ok {
    text-align: center;
    text-shadow: none;
    padding: 5px;
    font-size: 12px;
    background: #59a80f;
    border-color: #59a80f;
    color: #fff;
    margin: 0;
    }

    /* Contact Form 7 column adjustments */

    @media only screen and (min-width: 48em) {
    .column-half {
    width: 50%;
    }
    }

    ======= 2-column CONTACT FORM =======

    [text* first-name placeholder “Enter your first name”]
    [text* last-name placeholder “Enter your last name”]

    [email* your-email placeholder “Enter your email address”]
    [text* your-subject placeholder “Subject”]

    [textarea your-message placeholder “Message”]

    [recaptcha]

    [submit “Send”]

  98. Erna says: - reply

    Great tutorial! Thank you!

  99. Nahid Ahmed says: - reply

    Nice and clear … It really helped ………
    Thank you

  100. david says: - reply

    Thnx for this simple but effective code

  101. Nicole says: - reply

    thaaaaaank you so much!
    you have know idea how long I spent to finally have a decent 2 column contact form.

  102. Russ McClay says: - reply

    Incredibly helpful tutorial, bage! Worked perfectly. Thank you so much!

  103. Great tutorial, buddy! I owe you one! Really great. I learned many technics following your codification.
    I’m really pleased. Excellent! Thank you!!

  104. Tash says: - reply

    Thank you!!! Works perfect even with the new Contact Form 7!

  105. Roger Green says: - reply

    Hi,

    I have copied the first “Let’s look at the css styles for our two column grid” and the “HTML Markup” and it looks exactly as it should – and it almost works. However I can’t type into the first line. If I create a new first/top line I can now type into the old first/top line (which is now the second line) but not the new one. Does this make sense?

    Any ideas?
    Regards
    Roger

  106. Silvia says: - reply

    Thank you very much! A wonderfull tutorial!

  107. tuna says: - reply

    hi, thanks for great code 🙂

    please help me how can i add drop down menu ?

    thanks alot

  108. uncl_k says: - reply

    Thank you lots! I want to implemet a date picker http://contactform7.com/date-field/
    and a dropdown into the two column form. Works great i not bothering to put them in two columns, but as soon as I but them into the “form row” class, then the boxes will not accept input.

    selected day [date* your-date min:today max:2017-12-31 step:1 class:required “date today”]
    selected time [select menu-32 “0800” “0900” “1000” “1100” “1200” “1300” “1400” “1500” “1600” “1700”]

    How can this be??

  109. Mark says: - reply

    Nice tutorial, works great. Thanks!!!

  110. hey.
    what i can paste responsive code to style.css or other css file?

  111. Exelent.. works great, Thank you so much !!

  112. Great tutorial, it helped me a lot! I just had to change the code a bit for making it better. But great!

  113. BEFORE Noon, the code worked perfectly for the Job Application form I’m building.

    AFTER Noon, my columns started getting wonky. I’ve checked my /div tags and it seems as though everything’s right. What am I doing wrong?

    ALSO, I want to slim the space between fields in rows but retain the space between fields in the columns.

    Please help!

  114. Clara says: - reply

    Hello,

    When I add a select and text on the same collumn, it breaks the line.

    What could it be?

    Thanks!

  115. Marius says: - reply

    Thank you so much for this – I literallyl spent 3 hours trying to fix css issues with CF7, then found your blog – fixed it.

    Lots of love

  116. Olá, como montar 3 colunas?

    Obrigado.

  117. Diony says: - reply

    Hi, thanks for this tutorial!
    I´m trying to insert the three collumns: insert field name / field e-mail and field submit
    But not is in the same line.
    I´m using this code below:

    FORM CODE:

    Nome: [text* first-name]
    Email [email* your-email]
    [submit “Enviar”]

    CSS CODE:

    div.wpcf7 {
    background-color: #eff9fb;
    padding:20px;
    }
    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea {
    background:#c9faff;
    color:#022940;
    font-family:lora, sans-serif;
    font-style:italic;
    }
    .wpcf7 input[type=”submit”],
    .wpcf7 input[type=”button”] {
    background-color:#022940;
    width:100%;
    text-align:center;
    text-transform:uppercase;
    }

    #responsive-form{
    max-width:600px /*– change this to get your desired form width –*/;
    margin:0 auto;
    width:100%;
    }
    .form-row{
    width: 100%;
    }
    .column-half, .column-full{
    float: left;
    position: relative;
    padding: 0.65rem;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
    .clearfix:after {
    content: “”;
    display: table;
    clear: both;
    }

    /**—————- Media query —————-**/
    @media only screen and (min-width: 48em) {
    .column-half{
    width: 40%;
    }
    .column-one-third {
    width:20%;
    float:left;
    }
    .wpcf7-submit{
    margin-left: 20px;
    height: 40px;
    }

  118. Uzo says: - reply

    A very awesome tutorial. Bage! you’re the man. You save me all the headaches. Thanks a gazillion times.

  119. Kenneth says: - reply

    Hi, Nice tutorial you got over there.
    Im wondering can the code apply to only a specific form? i’ve got few contact form and i do not want to apply this styling to all of them.
    please help! appreciated!