How to Display Contact Form 7 Fields on 2 Column

How to Display Contact Form 7 Fields on 2 Column

We all know, with over 1 million active downloads, the Contact Form 7 plugin by Takayuki Miyoshi is one of the most popular contact form plugins around.

And for good reason. It makes contact forms a breeze. In this Contact Form 7 tutorial, I’m going to show you how to create a 2 column Responsive form using Contact Form 7.


<div class=”clearfix”>
<div id=”left”>
First name [text first-name] <br/>
Last Name[text last-name] <br/>
How Did You Find Us? [text text-find-us]
</div>
<div id=”right”>
Email [email* your-email] <br/>
Phone [text your-phone]
</div>
</div>

Subject [text* your-subject] <br/>
Message [textarea* your-message] <br/>
[submit “Send”]

——————
——CSS———
——————

/*— 2 Column Form Styles Start —*/

#left {
width: 47%;
float: left;
margin-right:6%;
}

#right {
width: 47%;
float: left;
}

.clearfix:after {
content:”\0020″;
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}

.clearfix {
display:block;
}

/*— 2 Column Form Styles End —*/


You can get the video tutorial:

3 Column code:

 

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

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

More:

Source 1

Source 2

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *