Contact Form 7 Tutorial – Create A 2-Column Responsive Form With Contact Form 7 | CF7 Tuts Part 4

Contact Form 7 Tutorial – Create A 2-Column Responsive Form With Contact Form 7 | CF7 Tuts Part 4

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist:
Download our exclusive 10-Point WP Hardening Checklist:
Contact Form 7 Tutorial – Create a 2-Column Responsive Form With Contact Form 7 | WP Learning Lab

Putting the contact form code into the YouTube description didn’t make sense because YouTube doesn’t allow pointy brackets, which there are a lot of in this code. So instead, you can find it here:

Below are the CSS styles I mention in the video:

/*— 2 Column Form Styles Start —*/

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

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

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

.clearfix {
display:block;
}

/*— 2 Column Form Styles End —*/

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.

They key to creating a contact form using Contact Form 7 with two columns is the use of HTML Div tags and CSS floats.

A regular WordPress contact form is nice, but the two columns really adds a bit of polish. First things first, if you haven’t installed Contact Form 7 yet, let’s do that.

To install this plugin please log into your WordPress dashboard, hover over Plugins and then click on Add New.

On the next page type “Contact Form 7” into the search bar. The plugin we want should be the first one in the top left.

Click on the Install Now button and then click Activate after it’s installed.

It will add a new menu item in the left hand admin menu called Contact Form. Hover over that click on Add New.

You will taken to the new form creator. First enter a name for your contact form and then paste the HTML form code into the form editor.

Next, click on the Mail tab to customize the email that is generated when the form is submitted. Make sure you add all of the available fields that are at the top of the Mail tab. Watch the video to see how to do this in detail. When you’re done, click on Save Changes.

Next, we need to add this form to a page. After saving a blue bar will appear at the top of the form editor. Inside that blue bar is the shortcode for your form. Copy that code.

Now go to Pages, then Add New to create a new page OR find the page where your contact form needs to live.

Inside the page editor paste the shortcode and click on Update to save the page. When you view the page, you will see a 1 column form. Now it’s time to make it 2-column and responsive using CSS.

Back inside the WordPress admin find a place where you can add custom CSS. Your theme may have a special spot in the Theme Options section or you may have a code insert plugin or you may have a plugin that allows you to add CSS directly to specific pages. However it is that you add CSS, do that.

Just paste in the CSS and save. As long as you didn’t change the HTML, your contact form 7 will now be 2 column responsive! And that’s how easy it is to create a contact form WordPress.

I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.

————–

If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.

Connect with us:

WP Learning Lab Channel:

Facebook:

Twitter:

Google Plus:

Pinterest: