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


  1. B. Martin

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

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

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

  2. Pingback: Hongkong Pools

  3. Pingback: replica hermes bag

  4. Pingback: bvlgari ring b zero1 fake

  5. Pingback: arpels van cleef necklace knock off

  6. Pingback: juegos friv

  7. Pingback: Bdsm

  8. Pingback: friv 1

  9. Pingback: kari satilir