Create Responsive Multi-column Contact form 7

Contact form 7, is the most popular WordPress contact form plugin around. with 1+ million active installations, regular updates, secure and robust code, Contact form 7 or what we call CF7 became an indispensable add-on for every website owner and developer.

In this article I will show you how to create a stunning contact form using CF7.

Why do we need a multi column Contact form 7?

The default form that you see when you activate the CF7 plugin, is really simple and usually doesn’t look great, and this is why, most of websites owners try to adjust it to make it look great.

Another reason to create multi column Contact form, is to minimize the form height, and improve the user experience. Imagine you have 12 fields form, it won’t be good to make your visitors scroll all the way to the bottom of the page just to fill in all the fields, instead, we create a 2 columns form, which will be half height of the original form.

How to Display Contact Form 7 Fields on 2 Columns?

First, we will need to create a new contact form and we can create 6 fields, Name, Email, Phone, Subject, Message and of course the submit button.

Here is the HTML code for our demo form wrapped with the proper HTML classes:

And this is how my form looks before adding the CSS code.

White this might look different from one person to another due to different themes styling, but overall it will have the same structure.

Here is the CSS code that I created for this form.

And here is our form after adding the CSS code above:

Notice the code below, you can use 100% of width instead of 50% when you have a full page width.

Now, we will need to style the form once more, so it looks Sharpe and responsive.

and here is the final result:

You May Also Like

About the Author: Editorial Staff

11 Comments

  1. I just test your form, and when I try to send empty email, i get CF7 fields errors and fields they are not functional. Did you see that bag?

    1. Hi Bojan,
      Thank you for your message and for noticing that.
      this is mainly caused by some css optimization plugin.
      In case you see this issue on your website. you might use one of the codes below.

      either this one:

      span.wpcf7-not-valid-tip {
      display: contents;
      }

      Or this one:

      .wpcf7-form-control-wrap {
      position: initial;
      }

      You can use the !important parameter if it’s not working.
      This will fix the issue.

        1. Hi Bojan,
          Sorry for all the delay, I wasn’t able to go online much for the last weeks, Hope you are fine and safe wherever you are.
          I will write a detailed article and also create a video on how to create customized forms with contact 7 form with multiple examples.
          This is one example already (i created this form 1 year ago) http://form.alpha-biz.net/

          I will share details on how to create 1 row, 2 rows, and any number of rows you wish.

          Thank you for stopping by.
          Best regards

  2. Hi. Can you tell me how to pre fill the “MESSAGE” placeholder with black solid text? That way my clients would already see a full message and it would save them time, but if they wanted to modify it and write their own phrase they could do it.

    For example instead of clients seeing the word “Message” with gray text, I want them to see the phrase “I request more information about your services” in black solid text, so they would already have the phrase already written by default, but if they wanted to modify it to write their own phrase, they could do it.

    1. Hi Charly,
      First, excuse me for replying so late, and thank you so much for stopping by.
      the response to your first part of the question, (how to prefill the textarea with a default value and send it as is via email) is pretty simple.
      This should be the code for a normal text area:

      [textarea your-message “I request more information about your services”]

      you can check it live here: https://wphub.me/contact

      For the second part of the question (how to change the color of the placeholder), you can add this below code to your style.css or in Appearance>Customize>Additional CSS

      ::-webkit-input-placeholder { /* WebKit browsers */
      color: #000 !important;
      opacity: 1;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #000 !important;
      opacity: 1;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #000 !important;
      opacity: 1;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #000 !important;
      opacity: 1;
      }

      Important notice: When we prefill an input with some default text, that’s not a placeholder anymore, so the above CSS code won’t change the color of that text, the above code will only change the elements tagged with placeholder tag.
      To change the color of a default value of a textarea as an example, use the below code instead:

      textarea {
      color: #000 !important;
      }

  3. Hey,
    I’m trying to use your instructions to modify my contact form but I also have drop-down menus and don’t know how to change their appearance and whenever I try to send a faulty request and the “the field is required” messages pop up the order of the field change and they are not where they are supposed to be.

    1. Hi Julia,
      Thank you so much for getting by.
      Can you please share with me your website link? I will be happy to check and fix this for you.
      Best regards

Leave a Reply

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