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

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.

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">
<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:

• How to Create a WordPress Website, Blog and eCommerce Store.
• How to Add Mailchimp Form in Facebook Page | Increase Email List's Subscribers
• 30+ Free Tools for Social Media and Community Management Resources