Last Updated on
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">
<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-->

READ  Top 5 Ways To Generate Low Cost Website Traffic

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 lot nicer. In the desktop it will be displayed in two columns and in a mobile device, it will be displayed in one column.

If you have any questions, please let me know in the comments.
REAM MORE:
READ  18 Useful Tricks To Speed Up WordPress & Boost Performance

Follow me

Anant Vijay Soni

Founder at Avstech Software
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.
Follow me
Anant Vijay Soni

Author 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.

More posts by Anant Vijay Soni

11
Share Your Opinion

avatar
9 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
lemiTrieltWataquaponic gardening bookMelodyfrom u flowersAurovrata V. Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
mohd imran ahmed
mohd imran ahmed

great work bro

Fernando

Hi Anant

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

Easy loans

For those who’re provided the chance to make use of Wizard in job abstract, you must certainly profit from it.

payday lender Interest rates

It’s also a lot better to borrow from payday lenders than from buddies or family.
Many of us flip to family and friends when we need cash.
However money can really cause rifts between you and those you’re
keen on. Although you may assume it is a whole lot, borrowing from family and friends often ends in catastrophe.

Aurovrata V.

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

from u flowers

Thank you for the quick service and the identical day supply.

Melody

Since we each have background expertise in schooling and curriculum development, we’re
captivated with helping others learn about aquaponics, from dwelling scale systems to beginning an aquaponics farm revolution with our buddies at
Green Acre’s Aquaponics.

aquaponic gardening book

This materials festivals very well with water and wont deteriorate into small items that your fish might eat.

lemiTrieltWat