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

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 Secure WP-Config.php File

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

REAM MORE:

11
Share Your Opinion

Leave a Reply

  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
%d bloggers like this: