Search
Close this search box.

Create A 2-Column Responsive Contact Form with Contact Form 7

[updated_on]
[updated_on]
Share this post:

With over 5 million active downloads, the Contact Form 7 plugin by Takayuki Miyoshi is one of the most popular contact form plugins around.

And for good reason. It makes contact forms a breeze. In this Contact Form 7 tutorial I’m going to show you how to create a 2-column Responsive form using Contact Form 7.

2-Column Responsive Contact Form 7 HTML Code

<div class="clearfix">
<div id="left">First name [text first-name] Last Name[text last-name] How Did You Find Us? [text text-find-us]</div>
<div id="right">Email  Phone [text your-phone]</div>
</div>
Subject [text* your-subject] 
Message [textarea* your-message] 
[submit "Send"]

2-Column Responsive Contact Form 7 CSS Code

/*--- 2 Column Form Styles Start ---*/

#left {
    width: 47%;
    float: left;
    margin-right:6%;
}
 
#right {
    width: 47%;
    float: left;
}
 
.clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}
 
.clearfix {
    display:block;
}

/*--- 2 Column Form Styles End ---*/

More Contact Form 7 Tutorials you may want to check out after this one:

Share this post:

Featured

Top Guides

Top Resources

57 thoughts on “Create A 2-Column Responsive Contact Form with Contact Form 7”

  1. lotfi

    hi

    first of all thanks a lot for the helpful tuts

    i followed the tutorial but i got a conflict between the theme and contact form custom css, now i have empty space between the last section and the footer, and also in the upper section of the menu

    is there anyway to fix it please !?!?

    thanks again

    Reply
  2. Marc

    Hi
    Thank for help peoples whit WP
    I try your code with last Avada and i stay with one Column
    I try to change css class too
    You need to check in RECRUTEMENT
    Marc

    Reply
  3. daniel mcgarrity

    sadly, despite an excellent tutorial, even copying and pasting does not allow this to create multiple columns in my wordpress contact 7 form.

    Reply
  4. Ron Tuman

    I have created a Job application form using 2-Column Responsive Contact Form with Contact Form 7, I also added a few features with other plugins to make it look the way I wanted. Unfortunately, I cannot seem to get all the text to appear the same throughout, some are bolder and other text is not.
    Can you suggest how I might change the coding to make it all look the same?

    I am including a link to the form below to the website I am building.

    Thank you

    Reply
  5. sam

    Thanks for the tutorial and the code.
    configuration error :This email address does not belong to the same domain as the site. i got this error message when i was trying to configure my contact form following your tutorial. Any help. Please.

    Reply
  6. B. Martin

    Hi,
    you are using float:left for both sides.
    Is this correct?.

    #left {
    width: 47%;
    float: left;
    margin-right:6%;
    }

    #right {
    width: 47%;
    float: left;

    Reply
    1. Bjorn Allpas

      Hi Bernhard,

      Yes, using float left for both sides is correct in this case. This will make sure that the #left and #right elements are side by side. The 6% margin on the right of the #left div will provide space between the two elements.

      If you made #left floated to the left and #right floated to the right it would be difficult to control the distance between the two elements and nearly impossible to keep the distances consistent.

      I hope that helps!

      Reply
  7. Djong TM

    Hi, I thank you very much for this kind of tutorials. This’s very useful. And I ask to copy this code for my try. Thank you.

    Reply
  8. Darshana Pradeep

    Thanks for the video tutorial. Please tell me how to change the Contact form 7 body text color (not the writable area it is just text available in body of the Contact form 7). Already I insert following CSS codes based on your video tutorial: (Little bit modified)

    /*— 2 Column Form Styles Start —*/

    #left {
    width: 47%;
    float: left;
    margin-right:6%;
    }

    #right {
    width: 47%;
    float: left;
    }

    .clearfix:after {
    content:”\0020″;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
    }

    .clearfix {
    display:block;
    }

    /*— 2 Column Form Styles End —*/

    In addition to that following CSS codes also separately add based on another tutorial:

    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea
    {
    background-color: #fff;
    color: #000;
    width: 50%;
    }

    But still I can’t change the text color of the body of contact form. Writable area background and text color can be changed. Please help me. Thanks.

    Reply
  9. Darshana Pradeep

    Hello Bjorn,

    Please note that “width: 50%;” was removed when I add it and colors also changed. Thanks. (This is related to my previous reply)

    Reply
  10. Latina Tanev

    Thank you very much for the 2 column video. I have couple problem using it. When I switch to mail tab and
    in the FROM line if I paste [your-name] gives me the following error: This email address does not belong to the same domain as the site.
    The second problem after I left the existing email and and did everything else the boxes in the two rows are short compare to the message box which extends beyond the two column and looks very bad.
    Can you give me some suggestion. I will highly appreciate it.

    Reply
  11. Sarah Ahmed

    Hi, Thank you for help, I tried this in my wordpress website but all feilds are still in one column.. Where I have to put CSS code? I edited custom CSS file and inserted it in the end of that code? It is right to do ?

    Reply
  12. Rylan

    I just noticed that this no longer works for some reason?
    my contact form is not in two columns anymore…

    #left {
    width: 47%;
    float: left;
    margin-right:6%;
    }

    #right {
    width: 47%;
    float: left;

    Reply
  15. Alvaro

    Hi Bjorn! Really helpful! What if i want to add another column on on the right?

    i did it but the height doesnt look equal! Thanks in advanced!

    Reply
  16. P Roden

    Hi Bjorn,

    I am trying to create a wordpress site that will allow users to input data, and that data will be imputed again each month and a comparison made between them (weight loss)

    Can you offer any advice please?

    regards,

    Patrick

    Reply
  17. Mark Nasse

    Hey Jeff, I’m just working on a contact form right now, however there is a small space between E-mail and the top of the form. I’m not sure what is wrong with it.

    [text first-name placeholder “Enter Your Name”]
    [text company-name placeholder “Enter Your Company Name”]
    [text text-find-us placeholder “How did you find us?”]


    [text your-URL placeholder “Enter your company website”]
    [select menu-145 “Select a video duration” “30 Seconds – Facebook Ad” “60 Seconds – Short Explainer Video” “90 Seconds – Normal Explainer Video” “120 Seconds – Long Explainer Video” “Over 2 Minutes”]

    [text* your-subject placeholder “Subject”]
    [textarea* your-message placeholder “Tell us about your company, we would love to hear about it!”]
    [submit “Send”]

    Reply
  18. Vinicius

    Hi Bjorn,

    First thank you for the free contant you are giving us. But I’m having a problem with my contact form, for some no reason the spacing between the two columns is too wide. Do you have any idea what the problem could be, even if I copy exactly you HTML code.

    Thank you again for the help.

    Reply
  20. Kim LaGrow

    Hi Bjorn:

    I have tried using your cform 7 2 column code and I am not seeing two columns. I am using the DIVI theme, which I use for a ton of clients, and I’ve even tried to rename the div #left and #right columns to make sure they don’t interfer with any other css. No luck :-(.

    Any suggestions? Thanks so much for your help!

    Reply
  21. Tiuzao

    Hi, Bjorn.
    Why didn’t you use media queries to create a 2 column responsive contact form?
    Wouldn’t a good way to do this?
    Thank you for your help
    Hugs.

    Reply
  22. Hamza

    Hi Bjorn,

    my textarea take one column and not 2 columns. I don’t know where is the problem.
    i find in inspect element col 40 row 1 and i change it but same problem.
    Maybe another code of css is the problem…

    I am using Bootstrap

    Reply
    1. hamza

      so i want to resize automatically textarea in width of two columns to have responsive design without using mediaqueries…

      Thanks bjorn for your tutoriel

      Reply
  23. Alex

    Hi Bjorn,

    thanks for the code! It looks great, but it doesn’t work properly on mobile: columns do not stack on each other.

    could that be fixed somehow?

    Thanks!

    Reply
  24. Debra

    Hi I’ve used your method before, and it works great – however I am trying to add it to a new website, but for some reason it won’t work? (I’ve changed the tag names so they don’t clash with other tags), would you mind taking a look and telling me what is the problem?

    Reply
  25. Debra

    Sorry, please delete last comment and reply to this one as I forgot to check the box that notifies me of your reply. Thanks!

    Hi I’ve used your method before, and it works great – however I am trying to add it to a new website, but for some reason it won’t work? (I’ve changed the tag names so they don’t clash with other tags), would you mind taking a look and telling me what is the problem?

    Reply
  26. George

    Hi, Could you please help?!

    I need to do a 3 column form – Name, Email and Send button

    Would you have a code for this?

    Thank you in advance.

    George

    Reply
  27. Anon

    I try to use this form but whenever I try to type something in whatever field(name, subject email) it pops up an email client automatically. What is the problem? It seems like the entire form is an entire hyperlink.

    Reply
  32. Tyler Scott

    Can I get some help? I’ve copied your HTML and CSS codes (thanks), but my Subject and Message do not expand to full width, just half. Any assistance would be great!

    Reply
  33. mike

    thank you for you the 2 coloumn. i tried to apply it on my site, i did not get it clearly. i need your assistance.

    i want the form field and the button to be side by side. can you help me with the styling?

    Reply
  34. Henry

    Hi,

    I followed your tutorial and my subject and text fields don’t cover 100% of the page. How do I correct this?

    Reply
  37. Carlos paz

    Hello Bjorn.

    I’ve been following your youtube channel and I appreciate all your tutorial, they are great.

    At this moment I install contact form 7 and follow your steps for the 2 columns contact form but did not work, the look for your website and copy and paste your code as you have it here but jet nothing change i keep getting just one column.

    My website is not public jet.

    Please advice
    Thanks

    Reply
  38. dario

    thank you ,,,it worked for me. I was working on a XTheme church template and i used your codes. Thank you and i really like your videos.

    Reply
  39. Tamer

    This is amazing! Thank you so much. Is there a way to make pressing tab, go left to right? So if I have first name and last name on the same line, I could press tab and it would from col1 to col2 then row2 col1 col2?

    Reply
  41. Dan Haddock

    #right id does not take effect!

    Hi Bjorn, I have taken your code out of my project and pasted it into a new form for testing. Unfortunately the ID right, does not seem to want to take its width setting.

    Both fields are on the same line though!

    Thanks again for an amazing tutorial. Would be great to troubleshoot why this might be happening, don’t stress it if it isn’t immediately obvious.

    Reply
    1. Dan Haddock

      Bit of a wierd one. I managed to fix it.

      There was a width setting that was not getting overwritten.

      I fixed it by setting up a second ID and giving it a property of bg color green.
      This somehow prompted the width to take affect, and the issue I was having with one inactive field was cured.

      All fixed 🙂

      Reply
  43. Nathan K Smith

    Your tutorial was very helpful! How do I get the boxes to all be the same size? This is the site that I created the 2 column form on.

    Reply
  48. Kelvin Johnstone

    Hi Bjorn…

    Thanks for publishing such great content. I copy and pasted your CSS and HTML onto a site I am building, and two things happened:

    (1) The lines on the right column do not line up with the lines on the left column
    (2) The form is not responsive as it is a mess on my iphone

    Any suggestions?

    Thanks,

    Kelvin

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

© 2014 – [year] WPLearningLab
Youtube Facebook Twitter
WPLearningLab