WP Snippet

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.

193 Comments

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

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

  3. nevermind i found out about the tags.

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

    • bage

      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 )

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

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

  6. How do I make a 3 column form?

    • bage

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

      • 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

  7. 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!

  8. 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.

  9. How can I get the submit buttom bigger?

  10. 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.

  11. 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!

  12. 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

    • bage

      if you wrap the select element within the column, it will work properly. Do you have a link for me to check?

  13. 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

  14. 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

  15. 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!

  16. Thank you very much!!!! Great job!!!!

  17. Hi,

    How do I make email field required?

    Looking forward to hear from you.

  18. 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

  19. 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 */

  20. 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

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

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

  22. Thanks a lot!
    a very helpful article!

  23. 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.

  24. 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!

  25. 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

  26. 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

  27. 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 🙂

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

  29. 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

  30. Thanks this works great!

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

  32. 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.

  33. 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

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

  35. 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

  36. Perfect!
    Thank you…

  37. 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.

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

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

  40. Thanks!
    Works like a charm..

  41. 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

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

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

    Thanks in advance

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

  44. 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

  45. 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

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

  47. Thanks mate this worked perfectly!!!

  48. thanks! very helpful.

  49. 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

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

  51. 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

  52. 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!

  53. never mind, I figured it out 🙂

  54. Thanks for the tutorial, works great!

  55. 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

  56. Bage,

    You’re brilliant! Thanks for this snippet!

  57. 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

  58. 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

  59. 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

  60. 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

  61. 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!

  62. 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

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

  64. 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

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

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

  67. 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.

  68. 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!

  69. Hi!

    Thanks for the info! Really helpful. Works perfectly.

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

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

  72. 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

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

  74. 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.

  75. 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

  76. 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

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

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

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

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

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

  80. 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

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

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

  83. Thanks for this – seemed to work very well

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

  85. 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

  86. 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..

  87. how do i obtain black borders around each field?

  88. 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

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

  89. 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

  90. 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

  91. Perfect tutorial. Thank you!

    Worked first time and totally logical to customise.

  92. Works!
    Thanks for posting it!

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

  94. Great tutorial! Thank you!

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

  96. Thnx for this simple but effective code

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

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

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

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

  101. 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

  102. Thank you very much! A wonderfull tutorial!

  103. hi, thanks for great code 🙂

    please help me how can i add drop down menu ?

    thanks alot

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

  105. Nice tutorial, works great. Thanks!!!

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

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

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

  109. 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!

  110. Hello,

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

    What could it be?

    Thanks!

  111. 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

  112. Olá, como montar 3 colunas?

    Obrigado.

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

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

  115. 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!

  116. Thanks for the code. I copied the codes, but i am having problem. although it came out as expected in the web browswer, however it is not responsive. The styling is now working on mobile devices, please i need you help.

    Thanks

    #responsive-form{
    max-width:800px /*– change this to get your desired form width –*/;
    margin:0 auto;
    width:100%;
    }
    .form-row{
    width: 90%;
    }
    .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;
    line-height: 16px;
    font-size: 14px;
    border-width: 2px;
    border: 0px solid #ccc;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -webkit-box-shadow: 0 2px #ccc;
    -moz-box-sizing: border-box;
    box-sizing: border-box

    }

    input[type=submit], button {

    background-color: #2f276a;

    color: #ccc;

    border: none;
    padding: 4px 349px;
    -webkit-border-radius: 6px;

    }
    }

  117. Very useful, thank you! 🙂

  118. Hi, for me not work…

    my code is equal your code… but not stay two column in same line… you can help me?

    my style.css;

    #responsive-form{
    max-width:550px /*– 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: 48%;
    }
    }

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

  119. Hi,

    First of all thanks for this great post helped me a lot to change my contact form in the design i want it.
    But unfortunately i found a bug in the css code.
    When ever someone send a form which has not filled all the requirements fields the red box beneath every required field shows up which is normal but when you fill in like 1 field ans still have not filled some of the required fields and try to send the form again all the layout of the forms will be messed up i made a screenshot so you can understand the problem better. Hopefully there is fix for this. and thanks again for this great post. please take a look ate screenshot on this link: http://s18.postimg.org/od46svzi1/form_bug.png

  120. I have copied the CSS in my local server which I have setup for practice. When I am copying the style sheet it is not reflecting in the main contact form at front end. Can I know the reason.

  121. Hello!

    First off, thank you for a tutorial!

    Secondly, in my case, the formatting does not work as expected. Basically, the CSS does not even kick in I have looked at the code, but I am unable to find the problematic spot. I have copy-pasted the code from this site and changed nothing.

    I have created a sample page to demonstrate the problem at http://www.bencik.cz/contactformproblem/ – if you could take a look at it, I would be grateful.

    Many thanks,
    Daniel

  122. Some one can tell me where I find the place for put HTML an CSS I have MH-Magazine Theme

  123. thank you for this guide, that was really helpful

  124. Thank you for great info. It has been very helpful.

  125. Hello and thank you for posting such a lovely styling method to Contact Form 7. I am very happy with how it has allowed me to organize our contact page with great opportunity to gain information that will enable us to assist our clients.

    After styling my new contact form, and adding some check boxes and drop down forms, I successfully sent a test e-mail through my website.

    When I check the e-mail I received, the name fields, and check boxes, and drop down information were not included! Can one of you potentially assist in resolving this issue?

    Thanks in advance!
    Miranda

  126. Thank you very much for this great tutorial!

  127. Thanks for the great tutorial, it works perfect for me.

  128. Trying to put 4 columns in one row.
    Can you help me out please?

  129. the one row is not working in mobile view

  130. Wonderful!!! Great!
    I’ve been waiting and searching for this for a long time.
    Thanks a lot 🙂

  131. Hi,
    I would really like to use your form in my current web page.
    I have added the HTML to my page & have copied the CSS to a css file names as your example.
    Where am i to put the Style the form now code ?
    I added it to the css ?
    Please take a look at my page and advise where i went wrong.
    http://www.theremotedoctor.co.uk/test-form2.html?scrollto=content

    Many thanks for a great write up.

  132. I’m using minamaze pro child theme (think up themes). I used your tutorial on another site with beautiful results, but this time it isn’t working! Can you take a look, please?

  133. Hm, second row (subject and message) are not filling the row, the just use about 60% of the line space.

  134. very helpful information for css form builder.

  135. Just wanted to say thank you very much. This is really great and working quit fine.

    Just one problem I cant solve. When I do not fill required fields and hit send, of course the red message “Required field” pops up but also all the fields under the message are moved on position.
    To explain better, lets say the rows are like this
    Last name – First name
    E-Mail – Phone
    Website – Company

    Not filling in the Last name (required) the fields move like this
    Last name – First name
    EMPTY – E-Mail
    Phone – Webite
    Company

    I cant find out how to fix this.

    Thank you very much in advance!!!

  136. Thank you very much for your post.

    I use your code every time I make a contact form!

    Thanks!
    Nikos
    Greece

  137. Hi,

    First of all, thank you for this wonderful tip, it works like a charm !
    Well, almost 🙂

    When I fill up my fields and submit, the green confirmation message is displayed in a very odd place, at the top, under the top fields…
    That’s pretty ugly, how can I make it look better, like appear under the submit button ?

  138. All right, thanks a lot for the great TuT!

  139. Excelente! Muchas gracias!

  140. Great form worked perfectly as you said it would. I have 1 problem: I cannot edit the mail, messages or additional settings tabs – it’s just blank when i click these tabs so I am unable to define what should be in the email body as well as what email address the form is being sent to. Any help would be greatly appreciated!

    Thanks
    Donald

  141. Thanks for the tutorial. I have input the html into my contact form and placed the CSS in my style.css child theme stylesheet but for some reason the form isn’t picking up the CSS. I have also tried putting it into my custom css textfield in my WP theme with no luck. Any ideas?

    Thanks in advance.

  142. Really nice tutorial! Thankyou for share this!

  143. Thanks for the code it was exactly what I was looking for. It didn’t work at first, with the CSS pasted into the Enfold Child Theme. So I included a custom css plugin and put it in there. Sorted!

    Now the 2 column part works, but not the second piece of CSS coding. I’ve looked through all the comments, and but can not work out where the issue lies.

    The link above is the test page, with various other parts on it!

    The contact form for the enfold theme is so basic and doesn’t send data to MailChimp as CF& does.

    Many thanks
    Anhgus

  144. Thank you for code!

    if someone wants to integrate recaptch, you have to modify the end of the form code:

    [recaptcha]
    [submit “Send”]

  145. Thank you VERY MUCH! You saved my 7 hours of running around. Here, look at it again. https://bimprojects.org/contact-us/

  146. Thanks for the description! It was very useful!
    Peter

  147. Thank you. amazing tutorial

  148. HI

    How do i make 4 columns?

  149. .column-half

    width: 50%

  150. Hey man.. Just want to give a quick shout out, this works magic.
    For those of you who have a problem with accessing the stylesheet, you can use a plugin called SIMPLE CUSTOM CSS.

  151. Thank you so much for this, WPSnippet! I used it with my own styling – it looks beautiful and works perfectly.

  152. Hello, sharing some love and goodness on this topic…

    there is now a cf7 plugin extension that will so this out of the box for you with an integrated UI editor, multiple-columns, reponsive, tables of fields, and much more. Check out the CF7 Smart-grid Extension (https://wordpress.org/plugins/cf7-grid-layout/)

  153. como se hace eso pero con tres columnas

  154. Thanks for the great job.
    How can I style the height of the textarea your-message only?
    I tried to assign an ID to the field and style it in the Css. Nothing works. If you find a few minutes to answer I’ll be greatful.

    Many Thanks,

  155. Most of it worked perfectly fine – thanks 🙂

    I have just one problem. I changed the the width from 600px to a 100% to have the form in line on the left and right with the other elements on the website.

    #responsive-form{
    max-width:100% /*– change this to get your desired form width –*/;
    margin:0 auto;
    width:100%;

    But to put it exactly in line I have to change the padding to zero:

    .column-half, .column-full{
    float: left;
    position: relative;
    padding: 0rem; /*– instead of 0.65rem –*/;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }

    But now I have no spacing between the two columns on the desktop version.
    How can I change this?

    • bage

      For that spacing only we had the padding for .column-half, .column-full. You can just add

      .column-half, .column-full{padding: 0 15px}

  156. What about 3 columns? Can .column-third, be added? I tried, no luck

  157. I added

    .column-third{
    float: left;
    position: relative;
    padding: 0.65rem;
    width:33%;

    Works Perfect!

  158. IF I need to add a 2 column, but leave the second column blank, how can I keep the next sex of rows from aligning left of it?

    [email* email placeholder “Email address”]
    leaving blank

  159. 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!

Leave a Reply