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

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

Advertisements


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

2-Column Responsive Contact Form 7 CSS Code

Comments

  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

  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

  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.

  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

  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.

  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;

    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!

      1. B.Martin

        Hi Bjorn,
        thank you for clarifing. I think I got it.

  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.

  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.

  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)

  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.

  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 ?

  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;

  13. Juliana

    Amazing tutorial! very well explained and helpful. Thank you very much!
    I just wanted to ask you how do I make all the fields to look aligned? and how do I add a space between the text and the field?

    This is what happens on my site: http://universoclick.com/ensayo-contact-form/
    I am using the Sydney Theme

  14. ben brinnand

    Hi Takayuki Miyoshi
    How would I reduce the vertical space between fields?
    thanks in advance

  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!

  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

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

    [email your-email placeholder “Enter Your E-mail”]
    [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”]

  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.

  19. ramshid

    i am using eight degree theme. There is no custom css here. How can I do it?

  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!

  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.

  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

    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

  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!

  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?

  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?

  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

  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.

  28. Mark

    Love the tutorial, just wondering how to get the 2 column to revert back to one column on mobile?

  29. Andy

    Hi just implemented on my site and it seems to be Responsive to ipad size but smaller it does not appear to work

    Any pointers please

    https://uktvturkey.uk/

    menu subscribe and 48 hour trial

    other than that work great

  30. Siobhan

    Hi Bjorn,
    I am trying to build a website for my company. I copied and pasted the custom css you provided for the 2 column form. It is not being responsive on this webpage.

    http://www.yycmoving.com/calgary-moving-company/

    This is just a random page that I am testing the form on.

    I do not know anything about CSS. Can you please help me?

  31. Ricardo

    Hi Bjorn! Very helpfull! Thanks a lot!
    But, what if I just want to have the submit button inside the email field? What should I do?
    Like this
    http://bit.ly/2n6TB9W

    Thanks!

  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!

  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?

  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?

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

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

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

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

    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 🙂

Join the conversation!