Contact Form 7 Tutorial - Create a 2-Column Responsive Form With Contact Form 7 | PHPDocs

Hello Everyone, In This Tech Video, I am going to teach you how to create a Multi-Column Contact Form in WordPress using the Contact Form 7 Plugin. With over 5 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/Multi Column Responsive form using Contact Form 7. The key to creating a contact form using Contact Form 7 with two columns is the use of Bootstrap Class. A regular WordPress contact form is nice, but the two columns really add 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 on 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 take 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, the editor pastes 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 bootstrap. Learn WordPress & WooCommerce Step by Step ►WordPress PlayList: https://bit.ly/34xTZ4T ►Woo-Commerce Playlist: https://bit.ly/34ybLF3 Freelancing Related Tips & Tricks ► Design Fiverr Gig Banner: https://youtu.be/m_lt0DQYV6o ► Low Competition Fiverr Gigs: https://bit.ly/3lmIiEU Tips & Tricks Series ► OBS Tips & Tricks: https://bit.ly/33AQs6A ► Tech Tips & Tricks: https://bit.ly/2I6k17R ► Google Docs Complete Guide: https://bit.ly/3nABXrA Learn Web Development Step by Step ►PHP Playlist: https://bit.ly/2F79qs3 ►BootStrap Crash Course: https://youtu.be/XDYn3ML3beA ►Editors for Web Developers: https://bit.ly/3nABXrA Learn Hardware & IoT ►Arduino PlayList: https://bit.ly/2GprHBO ►Raspberry-Pi Playlist: https://bit.ly/3iEPg6C Follow us: — Instagram: http://instagram.com/phpdocs — Youtube: https://youtube.com/phpdocs — Facebook: https://www.fb.com/phpdocs — Facebook Group: https://www.fb.com/groups/phpdocs — Website: https://www.phpdocs.com — Github: https://www.github.com/phpdocs