iheart pagelines

How to use Platform 5 with Contact Form 7

Published on by | Add Comment

Greetings fellow PageLiners for today's tutorial we are going to take one of the most used free contact form builders and make it better with Platform 5.

Contact Form 7

Now unless you have been living under a rock I am sure you have heard of Contact Form 7. With over 1+ million active installs it has proven to be one of the best free form builder for WordPress. The markup is very easy to understand and offers enough features to get the job done.

The only problem with Contact Form 7 is that it does look pretty plain and if you want it to be responsive you would need to know a little css.

But we are going to fix that with Platform 5 and its grid system.

The Grid System

Platform 5 has a very easy to understand grid system and if you have ever used Bootstrap then you should feel right at home. The grid consists of 12 columns all controlled by classes for various break points.  For the grid to take affect the containing div must have a class of

.pl-row

Here is an example:

<div class="pl-row">

<div class="pl-col-sm-6"></div><div class="pl-col-sm-6"></div>

</div>

So today we are going to introducing the Platform 5 grid to Contact form 7. You can read more about the grid system here.

Lets Begin

I am going to be working with the default form that comes with Contact form 7. Currently it should look like this.

We are going to incorporate the grid so that it becomes responsive and looks stylist.

To begin if you would like you can clone the default form or work on the originally the choice is yours.

Now we are ready to layout our form fields.

I would like to have a 3 column grid for my input fields and 1 column for the large text area. This is what my markup looks like.

<div id="form-holder" class="form-wrp">

<div class="small-input pl-row">
<div class="pl-col-sm-4">[text* your-name placeholder "Name"]</div>
<div class="pl-col-sm-4">[email* your-email placeholder "Email"]</div>
<div class="pl-col-sm-4">[tel your-tel placeholder "Number"]</div>
</div>

<div class="big-area pl-row">
<div class="pl-col-sm-12">
[text your-subject placeholder "Subject"]
<div class="text-content">[textarea your-message placeholder "Your Message"]</div>
</div>
</div>

[submit "Send"]
</div>

Add just a couple lines of css.

.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select {
width: 100%;
padding: 15px;
}
.big-area {
margin-top: 14px;
}

textarea.wpcf7-form-control.wpcf7-textarea {
height: 200px;
}

The Final Result:

 

With our form built inside the Platform 5 grid the input fields will stack when the screen gets below 768px and revert back to 3 column on large screens.

This was a just a brief example of what is possible when you combine the Platform 5 grid and Contact Form 7. You can get really creative and build some awesome layouts that normal would be hard if you wasn't CSS master.

So experiment and share your layouts in the comments.

Be sure to connect with us on social media.

Also I have extended the Lifetime Membership special till Feb.6.

Leave a Reply

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


GET 20% OFF

Lifetime Membership With
Coupon Code - 20PERCENT
SHOP NOW
Let's Build Something Together.
Sign-up for exclusive content. Be the first to hear about iHeart PageLines news.
Subscribe

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match