Contact Form 7 Tutorial - Create a 2-Column Responsive Form With Contact Form 7 | CF7 Tuts Part 4 - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress WPLearningLab Video: 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

Check out https://happyforms.me/ , it's a cool new form builder that you may like better than CF7 (and it's free!): HappyForms.me

Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/

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: https://wplearninglab.com/contact-form-7-2-column-responsive-form

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:"\0020";
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 (https://wordpress.org/plugins/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.

https://wplearninglab.com/

Connect with us:

WP Learning Lab Channel: http://www.youtube.com/subscription_center?add_user=wplearninglab

Facebook: https://www.facebook.com/wplearninglab

Twitter: https://twitter.com/WPLearningLab

Google Plus: http://google.com/+Wplearninglab

Pinterest: http://www.pinterest.com/wplearninglab/

Published: Saturday, August 10, 2019 8:43 AM
Category: Wordpress WPLearningLab

163 Views

Related Videos

Popular
Creating A Contact Form Using Contact Form 7 WordPress Plugin | Contact Form 7 Tuts Part 1

by Best Webhosting Added 4 years ago 110 Views / 0 Likes

Creating A Contact Form Using Contact Form 7 WordPress Plugin - Step-by-Step | WP Learning Lab Check out https://happyforms.me/, it's a cool new form builder that you may like better than CF7 (and it's free!): HappyForms.me Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/ In this tutorial I'm going to show you how to create a contact form using contact form 7. Let's get started. The first t
Popular
Contact Form 7 File Upload Field Tutorial | Contact Form 7 Tutorials Part 10

by Best Webhosting Added 4 years ago 113 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Tutorial updated for 2017/2018: https://www.youtube.com/watch?v=-RtBrUCSkBk&t=151s&index=20&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV Contact Form 7 File Upload Field Tutorial • | WP Learning Lab The Contact Form 7 file upload feature is a great addition that a lot webmasters will find useful. There is one trick to setting it up that many people get wrong, this tutorial will
Popular
Adding Contact Form 7 Hidden Fields With Dynamic Data | Contact Form 7 Tutorials Part 6

by Best Webhosting Added 4 years ago 114 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Adding Contact Form 7 Hidden Fields With Dynamic Data | WP Learning Lab Adding hidden fields with dynamic contact to contact form 7 is easy when you install the contact form 7 modules plugin. If you don't install that plugin you will need to create the functionality u
Popular
Adding Hidden Fields Using The Contact Form 7 Modules Plugin | Contact Form 7 Tutorials Part 11

by Best Webhosting Added 4 years ago 110 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Contact Form 7 - Adding Hidden Fields Using The Contact Form 7 Modules Plugin | WP Learning Lab Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist The ability to create hidden fields is one of the major things missing from Contact Form 7. Luckily there's a nice little plugin that will add that ability to CF7 and as a
Popular
Easily Add Contact Form 7 Placeholder Text To Any Input Field | Contact Form 7 Tutorials Part 14

by Best Webhosting Added 4 years ago 108 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Easily Add Contact Form 7 Placeholder Text To Any Input Field | WP Learning Lab Contact Form 7 placeholder text makes your contact form much more user-friendly. You can use placeholder text to give the user more information or you can use it to replace field labels. By eliminating field labels you can substantially reduce the space your form takes up. So if you need to cons
Popular
Contact Form 7 DB - Save Submissions To Your WordPress Database | Contact Form 7 Tutorials Part 16

by Best Webhosting Added 4 years ago 110 Views / 0 Likes

Contact Form 7 DB - Save Submissions To Your WordPress Database | Contact Form 7 Tutorials Part 16 https://youtu.be/ubifAGzRE4Y Grab your free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL The Flamingo plugin for WordPress stores Contact Form 7 submissions to your database. So even if the email doesn't arrive for some reason, you can find the message in your WordPress dashboard. Subscribe to this awesome channel here: http://www.yout
Popular
Add Confirm Email Field To Contact Form 7 Forms | Contact Form 7 Tutorials Part 9

by Best Webhosting Added 4 years ago 133 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL There is nothing more frustrating than receiving an message from a promising lead through your contact form, but their email address has a typo. With some email addresses you can identify the typo easily, with others you can't. Adding an email confirmation field where the user has to type their email twice helps fight this problem. And luckily adding a contact form 7 confir
Popular
A Dropdown in Contact Form 7 Turned Into A Multi-Select Box | Contact Form 7 Tutorials Part 18

by Best Webhosting Added 4 years ago 111 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL A Dropdown in Contact Form 7 Can Be Turned Into A Multi-Select Box https://youtu.be/KZGqjKL6Spk Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist To create a dropdown in contact form 7 the first thing you need to do is install and configure the contact form 7 plugin. Here's a tutorial on how to do just that: https://
Popular
WordPress Booking Calendar Using Contact Form 7 & A Datepicker | Contact Form 7 Tutorials Part 7

by Best Webhosting Added 4 years ago 112 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL WordPress Booking Calendar Using Contact Form 7 & A Datepicker https://youtu.be/uKYEK1y0hNk Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist A WordPress booking calendar or WordPress appointment form is a must for any service company. They aren't hard to create and can be free to make. In this tutorial we're to use
Popular
Contact Form 7 Skins To Change Style - No CSS required | Contact Form 7 Tutorials Part 13

by Best Webhosting Added 4 years ago 106 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Contact Form 7 Skins To Change Style - No CSS required | WP Learning Lab Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/ Changing the appearance of your contact form 7 forms is easy with this Contact Form
Popular
Contact Form 7 Validation With Custom Error Messages | Contact Form 7 Tutorials Part 8

by Best Webhosting Added 4 years ago 102 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Contact Form 7 Validation With Custom Error Messages | WP Learning Lab You can use the Contact Form 7 validation plugin to add custom error messages to all of your Contact Form 7 fields. This will greatly improve user experience with your contact forms. Why do you need custom error messages? Because a default contact form 7 error message is just "this field is required". Wh
Contact Form 7 Email Validation Using DNS Verification | Contact Form 7 Tutorials Part 12

by Best Webhosting Added 4 years ago 75 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Contact Form 7 Email Validation Using DNS Verification | WP Learning Lab Contact Form 7 validates the syntax of email addresses, but it doesn't check to make sure the email address is associated with a real domain. The DNS verification plugin will do that. If you rece