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

0
10





In this tutorial, we will see on how to create a two column responsive form. 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.

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

NO COMMENTS

LEAVE A REPLY