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.

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. 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. Profile photo of
      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!