In this tutorial, we will see how to create a two column responsive form with contact form 7. The form will be in two columns in bigger screens / Tablets and will become one column in mobile devices. Our final form will look like the following.

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

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: 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: ;
 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: ;
}

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

READ  How to Add Menu, Product Category and Attributes in WooCommerce Store (PART-8)

If you have any questions, please let me know in the comments.

REAM MORE:
5 1 vote
Rate This Post
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.

Subscribe
Notify of
guest
8 Comments
Inline Feedbacks
View all comments
web design minnesota
June 17, 2019 1:35 pm
Rate This Post :
     

This is an awesome post. Really very informative and creative contents.

lemiTrieltWat
December 7, 2018 12:54 pm
Aurovrata V.
December 3, 2018 7:48 pm

You can actually achieve this using a plugin now, Check out Smart Grid extension for CF7. (https://wordpress.org/plugins/cf7-grid-layout/)

Fernando
October 16, 2018 7:57 pm

Hi Anant

Sorry by my knowledge, where i put this information to make this form go up

mohd imran ahmed
mohd imran ahmed
October 3, 2018 12:26 pm

great work bro

8
0
Would love your thoughts, please comment.x
()
x