Skip to main content

In this tutorial, we will see how to create a 2-column responsive form with contact form 7 WordPress Plugin. The form will be visible in two columns on bigger screens / Tablets and will become one column on mobile devices.

Contact form 7 is one of the most popular and most downloaded WordPress plugins to create a contact form for your WordPress website. and the main issue of responsive contact form in 2 columns will solve this article.

Our final form will look like the following.

Desktop final form 2 column form contact form 7

Creating a 2-Column Responsive Form with Contact form 7 WordPress Plugin


To create a responsive 2 column form for the Contact Form 7 plugin, You need to add 2 codes: HTML Markup and CSS Style. combinations of these 2 below codes with giving you the desired output. Let’s see how???

HTML Markup

Let’s create the HTML markup for the form first. We will wrap the whole form with an ID named “responsive-form” and then will have rows and columns like the following:

<div id="responsive-form" class="clearfix">
<div class="form-row"&gt;
<div class="column-half">First Name [text* first-name]</div>
<div class="column-half">Last Name [text* last-name]</div>
</div>
<div class="form-row">
<div class="column-half">Email [email* your-email]</div>
<div class="column-half">Phone [text* your-phone]</div>
</div>
<div class="form-row">
<div class="column-full">Subject [text* your-subject]</div>
</div>
<div class="form-row">
<div class="column-full">Your message  [textarea your-message]</div>
</div>
<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>
</div><!--end responsive-form-->

CSS Styles

Let’s look at the CSS styles for our two-column grid.

#responsive-form{
 max-width:600px /*-- change this to get your desired form width --*/;
 margin:0 auto;
        width:100%;
}
.form-row{
 width: 100%;
}
.column-half, .column-full{
 float: left;
 position: relative;
 padding: 0.65rem;
 width:100%;
 -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
 content: "";
 display: table;
 clear: both;
}
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
 .column-half{
  width: 50%;
 }
}

Let’s style the form now.

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
 width: 100%;
 padding: 8px;
 border: 1px solid #ccc;
 border-radius: 3px;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
 background: #fff;
}
.wpcf7-submit{
 float: right;
 background: #CA0002;
 color: #fff;
 text-transform: uppercase;
 border: none;
 padding: 8px 20px;
 cursor: pointer;
}
.wpcf7-submit:hover{
 background: #ff0000;
}
span.wpcf7-not-valid-tip{
 text-shadow: none;
 font-size: 12px;
 color: #fff;
 background: #ff0000;
 padding: 5px;
}
div.wpcf7-validation-errors { 
 text-shadow: none;
 border: transparent;
 background: #f9cd00;
 padding: 5px;
 color: #9C6533;
 text-align: center;
 margin: 0;
 font-size: 12px;
}
div.wpcf7-mail-sent-ok{
 text-align: center;
 text-shadow: none;
 padding: 5px;
 font-size: 12px;
 background: #59a80f;
 border-color: #59a80f;
 color: #fff;
 margin: 0;
}

With these styles applied the form will look a lot nicer. On the desktop it will be displayed in two columns and in a mobile device, it will be displayed in one column.

This is a complete tutorial on How to Create a Two-Column Responsive Form with Contact form 7 WordPress Plugin. If you have any questions, please let me know in the comments.

READ MORE:


JOIN OUR NEWSLETTER



No Spam. Ever!

You can unsubscribe any time — obviously.


 

Anant Vijay Soni

Anant Vijay Soni

A passionate blogger and serial youtuber, timely efforts, and dedication are the key protocols that keep me succeeding. I love to share information about WordPress, SEO, Social Media Marketing, Affiliate Marketing, Make Money Online, Email Marketing and much more.

8 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.