HomeОбразованиеRelated VideosMore From: WordPress Tutorials - WPLearningLab

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

756 ratings | 120829 views
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/
Html code for embedding videos on your blog
Text Comments (331)
I've created a Contact Form 7 playlist with a bunch of videos explaining how to do almost anything with CF7: https://www.youtube.com/playlist?list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV If there is something missing that you want to learn just request it in the comments and I'll see what I can do. Until then, checkout the playlist: https://www.youtube.com/playlist?list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV
+Socializon Yep, it should work no problem if you put it into the correct place in the div. Which you can do by trial and error. If it doesn't look how you want it, just undo what you did. The Google Map include code should resize to the size of the column. If not you may have to resize it manually. Let me know how it goes! Good luck and thanks for watching!
Socializon (1 year ago)
Great video. I want to add Google maps on the left of the form. Would I be able to do this in the same way as displayed above? Thanks in advance.
monstermon23 (17 days ago)
Hi This tutorial is very helpful, but I have a problem on where to put the code in my theme, would you be able to help me? Here is my email ad so that I could send you the screenshot of my dashboard. [email protected] Thanks
Brian Harris (26 days ago)
Thanks it works really well. How can I make a 5 column form (Example: 1, 2, 3, 4 ,5)?
No problem :) Good luck!
Brian Harris (26 days ago)
+WordPress Tutorials - WPLearningLab Thanks for the info and quick reply!
Hi Brian, To make 5 columns you just rinse and repeat. You create the content for the 5 columns in the CF7 builder. Instead left and right, I would give the divs an id or class of one, two, three, four, and five. Then in the CSS float all of them to the left. Change the width to 18% or something less than 20% to fit all 5 in a row. That will make all columns the same width, you can also set the width to be different for every column with a separate CSS rule. Then in the media query section of the CSS you undo the floats. I hope that helps and thanks for watching!
Mehedi HS (1 month ago)
Thanks a lot
You're welcome Mehedi, thanks for watching!
Afiq Muhsin (1 month ago)
how can i edit the colour for the title?
Hi Afiq, Sorry for the delay. We just had our third baby and it's been a bit of a gong show around here 👶 You'll have to use CSS to edit the color of a title in Contact Form 7. You'll have to wrap the title in a span tag and add a class to the span tag, like this: <span class="cf7-title">My CF7 Title</span> Save the form. Then you can add CSS in Appearance > Customize > Additional CSS. This should change the headline text red: .cf7-title {color:red;} I hope that helps and thanks for watching!
Diane Jones (1 month ago)
This video was very helpful. You explain the steps extremely well.
Thanks Diane and thanks for watching!
Mustafa Noor (1 month ago)
You are amazing, immense thanks
Ihor Kit (1 month ago)
the only working solution for Twenty Seventeen and Elementor Free!
We love free. Thanks for the comment.
podho dolan (2 months ago)
Thanks dude! it works properly..... nice tutorial, you deserve to get 1 million subscribers.
Awesome, I'm glad I could help :) 1 million subs would be awesome!
Hung Nguyen (3 months ago)
Really really helpful. Thank u a lot for it
You're welcome Hung, thanks for watching!
ravish ranjan (4 months ago)
how to create appointment booking form . please describe about this immediatly
Hi Ravish, You can create a basic booking form with Contact Form 7 like this: https://www.youtube.com/watch?v=uKYEK1y0hNk&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV&index=13&t=0s I hope that helps and thanks for watching!
Vijeth Simha (5 months ago)
Hello sir, my content property is showing as invalid property rule in the console so the space is not coming so please help me out with this someone Thank you
Hayk Galstyan (5 months ago)
Thanks I just added magin-bottom: 20px; to the #right class and it worked properly! But after it two top input fields changed the mouse cursor's detection area you have to click just on the top pixels to get focused the cursor on them, what's the problem?
Léo Platt (5 months ago)
Thank youuu
You're welcome Léo, thanks for watching!
Moir Technology (6 months ago)
Your awesome! Thank you so much for this. I made my few customizations and now it's set. :)
Good work Zach, I'm glad I could help! Thanks for watching :)
Patrick Heijgen (6 months ago)
Again a great tut. Everything works except the alignment on a mobile,.. the placeholders aren't on the same position. Could you please explain this and do you have a solution for this? Thanks again,...
Hi Patrick, You can adjust the label postion using CSS. I have two tutorials about CF7 with sample code you copy/paste. That should help you get it done. Here's on of the tutorials: https://youtu.be/9e-JbYgYBSs Please let me know if that helps or not!
cory cheng (7 months ago)
{"code":"rest_no_route","message":"No route was found matching the URL and request method","data":{"status":404}} do you have any idea to fix this. I just installed this plugin
R. Davis (7 months ago)
How did you get the purple header at the top of the form?
SMASH (7 months ago)
Thank u very much!
You're very welcome, thanks for watching!
Iván Bermúdez (7 months ago)
As always thank you so much . awesome tutorials !! you are the best Im/
You're welcome Iván, thanks for watching!
Qauc QAUC (7 months ago)
Thank you , it is very helpfull and works properfly for me !! You save times.
Unovakus (7 months ago)
good tutorial! thanks from chile
You're welcome and thanks for watching!
David Whittworth (8 months ago)
I've just completed this for my website Bjorn, what a great help it was. Thank you.
kashif manzoor (8 months ago)
i need numeric up down in my form, can you please guide?
kashif manzoor (8 months ago)
Where we can increase or decrease digits like 123456489 there is + and - signs with it to increase or decrease the value
Hi Kashif, what is 'numeric up down'? I've never heard of it
Khalilah Wilson (8 months ago)
Hey thanks for the help! Great video. Can you tell me how to add 3 columns? ie for the First Middle Last name
Ice Techy (8 months ago)
please can someone explain to me why my Subject label and textfield is floating on the right rather than left (directly on top of textarea for message)
Ice Techy (8 months ago)
Hello Please my subject label and text field is floating on the right and my textfield on the right are not aligned with the left? please how can i fix this? this is 2018 and the HTML tags of CF7 has changed a lot. please i need your help asap.
Shahzad Portfolio (9 months ago)
This Video has one error about float TRY THIS CODE #left{width:48%; float:left; margin-right:4%;} #right{width:48%; float:right;}
Ice Techy (8 months ago)
thanks for the help bro, please i i have a problem, my subject label and textfield is floating right, how can i make it float left again please and want to expand the "your message" textarea. please i need your help asap!
Thanks for the Shahzad, I'll update the blog post!
Yeager Film (9 months ago)
Awesome tutorials sir!
Thanks and thanks for watching!
papisw (9 months ago)
I would like to like your video twice lol ! Thank you
lol, I guess you could like it, unlike it and then like it again? Thanks for watching!
Not To Be (9 months ago)
Great video! I was looking for a solution. Quick Q. What video editor or screen recorder are you using to do the zoom in effect and the highlight effects?
I think $20 is too much as well, I was just throwing it out there, lol. Thanks for the feedback. I may set something like that up in the near future.
Not To Be (9 months ago)
WordPress Tutorials - WPLearningLab maybe keep these type of videos on your free resources like YT, but offer and mention for “deep dive” for subscribers. Where you will look into more settings and how everything effects themes. As far as price, I’m not sure. You should do a quick pricing analysis based on your current data considering demand and competition. I personally wouldn’t pay $20/mo (at least not now) but would gladly pay $5-$8.
No problem. I don't have Patreon. Mostly because I don't know what to offer to Patreon's. Any ideas? What you like I'm exchange for$1, $5 or $20 per month?
Not To Be (9 months ago)
WordPress Tutorials - WPLearningLab WordPress Tutorials - WPLearningLab Awesome thanks. I’ll check out CamTasia. Thanks for the quick reply. I’m going through the rest of your videos and they are awesome. Keep up the good work. Do you have patreon?
I use Screenflow for Mac. CamTasia for windows can do similar things.
moin malik (9 months ago)
How can we add Bootstrap to the desired contact form ?
Andix JR Haitota (9 months ago)
Thank you very much. worked perfectly
pankaj deep sahota (10 months ago)
how to change the send button layout and shape ??
Hi Pankaj, Here's a tutorial on how to make a bunch of changes to a CF7 form using CSS: https://www.youtube.com/watch?v=bKarC0QO5og&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV&index=2 That will show you to find and apply CSS selectors for the submit button. You'll be able to find all sorts of CSS for button shapes and layout. Just combine those with what you learn in the above tutorial. Let me know how it goes!
Nishant Sharma (10 months ago)
HI i am getting an error that "Sender email address does not belong to the site domain"
Hi Nishant, I've never encountered that message. I just checked the CF7 help pages. It says that the problem is the "From" address in the Mail tab does not have the same as domain as the website. Here's the help page: https://contactform7.com/configuration-errors/email-not-in-site-domain/ I hope that helps and thanks for watching!
Porazhi (11 months ago)
For me its working good but the spacing between second and third rows is not equal when compared to the 1 & 2. How to fix them? any idea!?
Sounds good, good luck!
Porazhi (10 months ago)
Ok, Got it. I will try it myself and if that doesn't work, I will come up with the form :), Thank you.
All spacing issues can be fixed by playing around with the margin and padding values. Without seeing the form itself I can't give any specific advice.
Erika Knollenberg (1 year ago)
How can I add a divider between sections of the same form. The hr tag doesn't seem to work correctly.
Erika Knollenberg (1 year ago)
I did try the hr tag and it didn't work properly, so I wondered if the form element changed things. I do have experience with CSS. I will continue to experiment. Thank you!
hr if what I would have suggested if you hadn't tried it already. You can create a CSS border as the divider. Do you have any experience with CSS?
Vrata Venet (1 year ago)
I have been quite frustrated with the lack of design abilities for Contact Form 7. A year ago, I was tasked with creating multiple forms in cf7, with complex layout requirements. To solve this problem I set about creating a plugin that allows for responsive grid-layout designs as well as the ability to have a modular approach to form building, ie being able to reuse existing forms into larger form constructs. I just released the Smart Grid-layout design for CF7, give it a try and let me know what you think, (https://wordpress.org/plugins/cf7-grid-layout/)
Thriving Violets (1 year ago)
This tutorial was great and worked for me. I have tried everything to get the submit button on the same line as my 2 column fields. How would I get the submit button on the same line?
Good question. You would just need to wrap your submit button in a div, give that div an ID or class. Then use float:left on that div. Make sure that the 2 column fields aren't taking up 100% of the width otherwise there will be no space for the submit button to be beside them. Let me know if that works for you!
MR & MRS 2wheeler (1 year ago)
Hi, thanks for the video. Great job, very informative and easy to follow. I do have a question though. Will it display in the same format in the email it sends? If not, how can I get that done? Thanks, Mike
MR & MRS 2wheeler (1 year ago)
Thant is exactly the info I was looking for. Thank you so much. I appreciate you.
+MR & MRS 2wheeler Hi Mike, it won't display in the same layout in the email unless you duplicate the layout in the Mail tab of the form editor. Inside the Mail tab you can create the layout just as you would in a word processor. Meaning you have two input field variables in one line, then more on the next line, then have the text area input on its own line because that is usually more text. Let me know if that makes sense and if you need more guidance.
This is absolutely worked for me. I am looking around to set this issue for nearly 3-4 months now and this video helped me a lot and in perfect way to resolve my issues Many thanks for your great video and support
That's great Praveen. I'm glad I could help, thanks for watching!
Ayan Mukhopadhyay (1 year ago)
Great video..
+Ayan Mukhopadhyay Thanks Ayan and thanks for watching!
Stephane KOUAME (1 year ago)
Hi, I am following the instructions in creating the form fields but when I switch to Mail tab, the short codes do not appear... Is there a setting not mentioned that manages display of the shortcode ? Thx!
Hi Stephane, To get the shortcodes to appear all you have to do is save the form. Once saved, they will appear on the mail tab. I hope that helps and thanks for watching!
alfredo nextel (1 year ago)
thank you very much, I've never written any type of code, it took me like a while to make it right but at the end, it is working, awesome tutorial. :-)
+alfredo nextel Awesome work Alfredo! Glad you got it working and thanks for watching!
Andres españa (1 year ago)
thank you!
+Andres españa You're welcome Andres, thanks for watching!
Antonio Caos (1 year ago)
This form is not responsive at all. it just stays at a fixed width.
Hey Antonio, It shouldn't. Using % for the width allows the form to adjust to the width of the screen rather than stay at a fixed width. Assuming you use the code as outlined, you may have conflicting CSS in your theme causing it to stay fixed.
Michael Schlotthauer (1 year ago)
What a bout a 3-column code? The code below doesnt work <div class="clearfix"> <div id="left"> [text* text-680 placeholder "First Name"] </div> <div id="center"> [email* email-108 placeholder "Email"] </div> <div id="right"> [text* text-680 placeholder "Last Name"] </div>
Cavalli Lane (1 year ago)
Tnx, great tutorial! I have one question: I would like to insert a birth date fold out option (3 columns; month, day & year), how do I do this? Thanks in advance!
Cavalli Lane (1 year ago)
WordPress Tutorials - WPLearningLab Yes, thats what I mean
+Cavalli Lane Hi Cavalli, when you say 'fold out', do you mean a drop down where people can select the dates? 3 drop downs in your case
Levi Tompkins (1 year ago)
https://plus.google.com/u/0/110970573788673894903 My labels on the top row are showing up on top which is what I want, but the labels on the rows below it are all showing up to the left of each box & I have no idea how to fix this. Any ideas? I'm a bit of a newb to coding.
Jaymell (1 year ago)
works fine except on mobile the contact form is not aligned... the left padding is alright but the right side of the form (email/phone) touches the screen edges... :/ can you take a look ? turelayout.dx.am
Hi Jaymell, There are two things you can do. Adjust the padding and width until it works on both desktop and mobile. Or you can use media queries to detect the user's screen size and adjust the form CSS just for that screen size. Here's a great resource for media queries (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/). If you watch this video (https://www.youtube.com/watch?v=tP_kXBJWPhQ) and skip ahead to 7 minutes 23 seconds you'll be able to use the same tools to see at which screen width your form starts touching the screen edges. Then use that width in your media query. Let me know how it goes.
Linda Thom (1 year ago)
Your tutorial worked perfectly to create 2 columns. Thank you. Now need to create Contact 7 form with 3 columns. Are you able to assist?
Linda Thom (1 year ago)
Makes perfect sense. If I am using 2 columns and 3 columns, must the <div class="clearfix"> be different?
Hi Linda, You should be able to use the exact same principles. Just add another div called "middle" in between left and right. Apply the same "float" left rule to the "middle" div and adjust all the width percentages to make sure all the fields have enough space. Does that make sense?
isi88dro19 (1 year ago)
I've copied the code but I'm have the following problem, I'm unable to fill in the fields sorted in the 2 separate columns. What should I do to fix this?
+isi88dro19 That's impossible to know without working with the form directly. First, try in a different browser. If it still doesn't work it may be CSS conflict or a plugin conflict.
Brandon F (1 year ago)
After inputting the css in styles.css withiin the child theme the form stills shows up in a single column. Any reason this would be happening? Thanks for the help. Great tutorial. Just need to get this up and working. Appreciate the assistance. Would I need to edit the style.css in the parent theme?
Zulfadli Nasir (1 year ago)
YOU ARE THE BEST!!!!!
+Zulfadli Nasir Sounds good. I should have it online next week some time. Until then feel free to check out my contract form 7 playlist: https://m.youtube.com/playlist?list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV
+Zulfadli Nasir Hey Zulfadli, I'm happy that you get a lot out of these videos. That's why I make them! Thanks for watching!
Zulfadli Nasir (1 year ago)
Sir i already see the plugin, thank you. but i really dont understand how to use it. i looking forward and wait for your video soon. i really excited.
Zulfadli Nasir (1 year ago)
Oh My God, you are really great! thank you so much sir. To tell u the true, from your youtube channel i really learn a lot. i really thank you for your effort to bring an educational video to help all people like me to gain knowledge. I wish u all the best in what u do. Thank you again,thank you
+Zulfadli Nasir Hi Zulfadli, you sure can. I just recorded a tutorial on that today. It won't be published for at least a week though. Below is the plugin you use. https://en-ca.wordpress.org/plugins/cf7-conditional-fields/ Once activated go to the editor of any form and add a 'Conditional Group' (a new button added by the plugin). Inside the conditional group tags put questions you want to appear of previous questions are answered a certain way. You can create as many conditional groups as you want. Then head over to the Conditonal Fields tab to create the logic. And don't forget to add all the new fields to the email tab and don't make any of the questions inside the conditional groups required. I hope that helps and like I said there's a step-by-step tutorial on this coming soon.
Joe am (1 year ago)
Hello Thanks for your videos Can you help me please? I've made many tests in order to receive emails from my website but nothing happened! I'm sure that I made mistakes in the configuration from the contact 7 And I've contacted the plugin owner to resolve the problem, but he just provide this link (https://contactform7.com/configuration-errors/invalid-mailbox-syntax/), however, I can't get the solution This is the screenshot of the issue that I'm talking about: http://imgur.com/a/Ll7IG Best regards
Sandra Hill (1 year ago)
I have created a contact form 7 form with checklist. How do I get the checklist items in two columns across the form. At the moment they are showing one after another, no formatting.
henrik gantriis (1 year ago)
hey bjorn do you have or kan make a toturial on how to impliment a cross banner on a reaelestate site and impliment it in wordpress so fx evrythime a house is sold you kan mark it in wordpress backend and it will say sold on the front of the page look at this page and you will see vhat i mean www.2base.com
henrik gantriis (1 year ago)
sorry but this link you send mee is broken and please let mee know vhen you have made the tutorial
Hi Henrik, I don't have a tutorial for that, but I have an idea of how to make that happen. I saw in the homepage slider a listing noted as being sold, which I think is what you mean. You may be able to use Slider Revolution to dynamically pull in images/pages that are assigned to a specific category. Here's the plugin I mean. It is a premium plugin, but what you want to create is fairly uncommon: http://bit.ly/slider-revolution-wpll I'll look into make a tutorial for it as well. I hope that helps!
Dev S (1 year ago)
My form has got 6 fields (Subject is a dropdown selection) & I copied the CSS code given here: https://wplearninglab.com/contact-form-7-2-column-responsive-form/ at the end of my style.css but my form still shows 1 columns and the fields not aligned properly. Can you please tell me what i am doing wrong. Here is the code. <div class="clearfix"> <div id="left"> Your Name [text* your-name]<br/> Email [email* your-email]<br/> </div> <div id="right"> Your Phone [tel* your-phone]<br/> Your Suburb [text* your-suburb]<br/> </div> </div> Subject [select* your-structure include_blank "structure1" "structure2" "Other"]<br/> Your message [textarea your-message]<br/> [submit "Send"]
Hi Dev, I just tried your form code with the CSS on the blog post and it worked for me using the Toko theme (see here: http://wp-phd.com/dev-s-test/). You can inspect the elements to confirm the CSS. I then tried it using the Divi theme and it didn't work. So the Divi theme has some CSS being applied to the forms that is overruling the CSS that I input. The same may be happening with your theme. You can try adding !important at the end of the every CSS declaration like this: #left { width: 47% !important; float: left !important; margin-right:6% !important; } That may work. If it doesn't work you'll have to find the overruling CSS in the theme stylesheet and update it. I hope that helps!
Zou Ziru (1 year ago)
hello, thank you for the useful video, but i want to ask if this works for a different theme? Thanks!!
+Zou Ziru Hi Zou, this should work with any theme. Some themes may already have CF7 styles in the style sheet so you may have work against our change those. But it should work no problem. I hope that helps and thanks for watching!
Roland Smoker (1 year ago)
Is there any reason you can't put the CSS in the style.css file of the child theme?
Nope, that should work just fine. To save yourself some frustration you may want to create a cache busting stylesheet by adding the version number to the stylesheet URL. Check out the third code box on this page (https://codex.wordpress.org/Child_Themes%E2%80%8E) if that's something you want to look at. I hope that helps and thanks for watching!
what about if you want to add a 3 column form? Is it possible?
Ok I figured it out thanks to your help! Now do you know how to fix the spacing between the rows? I tried within contact form 7 but I don't see anything that would change the spacing. Nothing looks out of the ordinary, but maybe you can see something. Please refer to https://steppingstoneenglish.com to see the form spacing at the bottom. Thanks! <div class="clearfix"> <div id="col1"> Name[text* your-name] <br/> </div> <div id="col2"> Email [text* your-email] <br/> </div> <div id="col3"> Country [select* menu-112 include_blank "Anguilla" "Antigua and Barbuda" "Argentina" "Armenia" "Aruba" "Australia" "Austria" "Azerbaijan" "Bahamas" "Bahrain" "Bangladesh" "Barbados" "Belarus" "Belgium" "Belize" "Benin" "Bermuda" "Bhutan" "Bolivia" "Bosnia and Herzegovina" "Botswana" "Brazil" "Brunei" "Bulgaria" "Burkina Faso" "Burundi" "Cambodia" "Cameroon" "Canada" "Cape Verde" "Cayman Islands" "Central African Republic" "Chad" "Chile" "People's Republic of China" "Republic of China" "Christmas Island" "Cocos(Keeling) Islands" "Colombia" "Comoros" "Congo" "Cook Islands" "Costa Rica" "Cote d'Ivoire" "Croatia" "Cuba" "Cyprus" "Czech Republic" "Denmark" "Djibouti" "Dominica" "Dominican Republic" "Ecuador" "Egypt" "El Salvador" "Equatorial Guinea" "Eritrea" "Estonia" "Ethiopia" "Falkland Islands" "Faroe Islands" "Fiji" "Finland" "France" "French Polynesia" "Gabon" "The Gambia" "Georgia" "Germany" "Ghana" "Gibraltar" "Greece" "Greenland" "Grenada" "Guadeloupe" "Guam" "Guatemala" "Guernsey" "Guinea" "Guinea - Bissau" "Guyana" "Haiti" "Honduras" "Hong Kong" "Hungary" "Iceland" "India" "Indonesia" "Iran" "Iraq" "Ireland" "Israel" "Italy" "Jamaica" "Japan" "Jersey" "Jordan" "Kazakhstan" "Kenya" "Kiribati" "North Korea" "South Korea" "Kosovo" "Kuwait" "Kyrgyzstan" "Laos" "Latvia" "Lebanon" "Lesotho" "Liberia" "Libya" "Liechtenstein" "Lithuania" "Luxembourg" "Macau" "Macedonia" "Madagascar" "Malawi" "Malaysia" "Maldives" "Mali" "Malta" "Marshall Islands" "Martinique" "Mauritania" "Mauritius" "Mayotte" "Mexico" "Micronesia" "Moldova" "Monaco" "Mongolia" "Montenegro" "Montserrat" "Morocco" "Mozambique" "Myanmar" "Nagorno - Karabakh" "Namibia" "Nauru" "Nepal" "Netherlands" "Netherlands Antilles" "New Caledonia" "New Zealand" "Nicaragua" "Niger" "Nigeria" "Niue" "Norfolk Island" "Turkish Republic of Northern Cyprus" "Northern Mariana" "Norway" "Oman" "Pakistan" "Palau" "Palestine" "Panama" "Papua New Guinea" "Paraguay" "Peru" "Philippines" "Pitcairn Islands" "Poland" "Portugal" "Puerto Rico" "Qatar" "Romania" "Russia" "Rwanda" "Saint Barthelemy" "Saint Helena" "Saint Kitts and Nevis" "Saint Lucia" "Saint Martin" "Saint Pierre and Miquelon" "Saint Vincent and the Grenadines" "Samoa" "San Marino" "Sao Tome and Principe" "Saudi Arabia" "Senegal" "Serbia" "Seychelles" "Sierra Leone" "Singapore" "Slovakia" "Slovenia" "Solomon Islands" "Somalia" "Somaliland" "South Africa" "South Ossetia" "Spain" "Sri Lanka" "Sudan" "Suriname" "Svalbard" "Swaziland" "Sweden" "Switzerland" "Syria" "Taiwan" "Tajikistan" "Tanzania" "Thailand" "Timor - Leste" "Togo" "Tokelau" "Tonga" "Transnistria Pridnestrovie" "Trinidad and Tobago" "Tristan da Cunha" "Tunisia" "Turkey" "Turkmenistan" "Turks and Caicos Islands" "Tuvalu" "Uganda" "Ukraine" "United Arab Emirates" "United Kingdom" "United States" "Uruguay" "Uzbekistan" "Vanuatu" "Vatican City" "Venezuela" "Vietnam" "British Virgin Islands" "Isle of Man" "US Virgin Islands" "Wallis and Futuna" "Western Sahara" "Yemen" "Zambia" "Zimbabwe"] <br/> </div> </div> Availability [text your-availability]<br/> <div class="clearfix"> <div id="col4"> Skype Username [text your-skype-username]<br/> </div> <div id="col1"> Language You Want to Learn [select menu-546 include_blank "English" "Spanish"]<br/> Teacher Preference [select menu-167 include_blank "Male" "Female" "No preference"]<br/> </div> </div> What is Your Goal? [textarea what-is-your-goal]<br/> [recaptcha] [submit "Send"] </div>
Yes, that's no problem. All you have to do is name the columns col1, col2, and col3 instead of left and right. To col1 apply the same rules as "left" in the tutorial. To col2 and col3 apply the same rules as "right" in the tutorial. But change the percentage column widths to something like 30% each, then you'll have 10% left over spacing between columns. Did that explanation make sense?
MM Embalagens (1 year ago)
Thank you! This tutorial helped me a lot!
Cool, glad I could help. Thanks for watching!
up sreekara (1 year ago)
hi sir great video. I created contact form 7 and when i see on mobile view its shows horizontal scroll bar . can u say wy?
+up sreekara You're welcome, thanks for watching!
up sreekara (1 year ago)
thank you sir
It sounds like the form is not coded to be responsive and that is creating the horizontal scroll bar. You can use CSS to change with width of the input fields to a % rather than a pixel number. That should help with resizing the form on mobile devices. I hope that helps and thanks for watching!
Abdul Fareed (1 year ago)
Can you Share the Steps WordPress contact form phone number should only allow 123-123-1234.
+Mohammad Fareed Sure, bjorn(at)wplearninglab.com. Thanks Mohammad!
Abdul Fareed (1 year ago)
Sure, i will share with you. can share your email
+Mohammad Fareed Awesome work. If you're willing to send me the code you used I would love to make a video tutorial about it for the channel.
Abdul Fareed (1 year ago)
i Resolved it by changing the Regular Expression in CF7 formatting.php
Hi Mohammad, good question. There is no easy way in Contact Form 7 that I'm aware of for doing that. You'll probably need to add some jQuery code to your site to make that work. Gravity Forms (a premium plugin) has that functionality built right into it. So if you want a short cut, Gravity Forms will do it. You can see where I include that functionality at around 11 minutes 45 seconds in this tutorial: https://www.youtube.com/watch?v=kfSvzJ_Rvbg&list=PLlgSvQqMfii5TtuG2N4sJZPSqOo5K0l6d&t=706s&index=1
Thank you very much for this wonderful tutorial on making a 2 column contact us form. Everything worked. However, I don't have a nice submit button like you do. LOL No button on mine... Just "[Submit "Send"]" QUESTION: How do I get a button?
That's strange that no button appears for you. That is short code built right into the form builder. Can you try making "submit" in the shortcode lower case. So the short code for the button would be like this: [submit "Send"] It may be case-sensitive. Let me know if that works!
Alex Paulsen (1 year ago)
This tutorial is nothing short of awesome, and will likely save me from a ton of css-work, not to mention gray hair. Thank you so much for uploading this and linking me to it. :-) - So, to get this completely straight: Following the instructions of this video, I could also make a contact form with just two fields and a send-button, all in the same row. This would - to my understanding - call for 3 div's, fx left, middle and right, and styling these like in the video, with width and margin percentage values, that make up 100%, fx 40%-5%-40%-5%-10%. Make sense, or is there an easier way? I gather this setup will be bad for mobile screens. :-) - By the way, I knew that placeholder text doesn't require css, but thanks for making sure. :-)
Hi Alex, They way you outlined it should work. There are themes where going right to 100% doesn't work as it should. In that case you just reduce elements by 1% and see at which point it keeps them all in the same row. So you may end up having your row span 98% for it to work on a particular theme. Yes, that setup would not be ideal for mobile screens, but that's where media queries come in. You can change the CSS when the viewing device is between a specific size range. For example, if you use Google Chrome or Firefox you can right click on any part of your website and then click "Inspect" or "Inspector" in the menu that pops up. There will be a code tab that appears in your browser. Somewhere on that tab will be small icon that looks like a mobile phone, or a tablet, or both. Click on that and you can easily resize your website to see how it would appear on various devices. By doing that you can see at which sizes your form doesn't work right. Then using media queries you can change the css from float:left; to float:none; which will cause the input fields to stack instead of be in a row. Since you are using % widths, the fields should adjust well once they are not in a row. Whenever I'm dealing with media queries I head over to CSS-Tricks.com run by Chris Coyier (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/). That is a great resource but it's also a little overwhelming. When starting out stick to two break points (points at which the css styling changes): tablet size and smart phone size. I realize that there are lots of variation in the sizes, but if you have Google Analytics installed on your website you can see the most common device sizes that visit your website by going to Audience, then Technology, then Browser & OS, then clicking Screen Resolution in the horizontal menu between the chart and the data list. I probably went a little to far in this explanation, but I hope that helps!
Susan Young (1 year ago)
Brilliant, it worked first time... thanks so much!
+Susan Young You're welcome Susan, thanks for watching!
Law2708 (1 year ago)
I get this error "Sender email address does not belong to the site domain." in my "From" section
Redfox Design (1 year ago)
what about 4 -column responsive form
Andres Rivera (1 year ago)
hey why is there a number 1 displayed on my contact form. I am using a widget to display it on my front-page, but after the submit buttom there's a '1'
I checked out the form. The 1 is somewhere in the element that also contains your form, but it's not part of the form. In the page builder for that page you'll find the 1 in the element with the headline "Enter Your Information". It should be easy to find if you poke around in the page builder. It's very difficult to pin-point by looking at the source code, like I'm doing.
Andres Rivera (1 year ago)
http://arj-web-design.com/simplewebsite/
+Andres Rivera Is there a '1' on the page where embedding the firm?
Andres Rivera (1 year ago)
WPLearningLab - WordPress Tutorials I checked..can not find
+Andres Rivera Sounds like there may be a 1 in the CF7 editor after the submit button. Can you post a link so I can check it out?
James Mac (1 year ago)
@media only screen and (max-width : 900px) { .wpcf7-textarea, .wpcf7-text,#left,#right { max-width: 100%; padding: 10px 1px !important; float:none; } } @media only screen and (min-width : 900px) { .wpcf7-textarea, .wpcf7-text,#left { width: 30%; padding: 10px 0px !important; margin-right:20px; float:left; } #right{float:right;} }
Speaker Tim White (1 year ago)
Great teacher! Thumbs up and subscribed! A+
Thanks again Tim :)
Rose New Normal (1 year ago)
this is so good.  thanks
Thanks, I'm glad I could help! Thanks for watching
Jason McKoy (1 year ago)
Curious, when you insert the CSS Code into your theme, if you happen to use the same ID selector within another div tag somewhere else it will take on same properties, right? Example:CSS#right {    width: 47%;    float: left;} If i used the following div anywhere on the website for any pages, it will take on those properties, right?     <div id="right">    </div>If so, is there a way to apply it to just one specific page? Really curious..
+J South Hi J, good work learning all those languages. It is the way of the future to know how to code. I'm pretty sure Ive seen the page specific CSS in the Avada. I started out in Dreamweaver as well, it's great software! Good luck in your journey!
Jason McKoy (1 year ago)
Thank you for the fast response. I have to check my Wordpress theme, which is Avada. I think I have seen a location either in the container or element section when creating a new page and adjusting properties. I think on the bottom of those pages. I use the avada fusion builder. I think maybe that is what you are talking about with the code through the theme. This is my first website and just learning coding. I am learning a lot while building this site. Love taking the online classes through lynda.com and books, I am learning in dreamweaver which is a learning curve also. Right now learning HTML, then it will be CSS, then PHP and java. So not really sure on PHP and java yet. I have been introduced to all and know the fundaments and how they work. Hopefully the Avada theme can do it. Looks cool in the form with two columns. I just remembered learning to be careful when assigning ID names and such and then applying CSS. Thanks again. Cool video, FYI following the instructions on this video works great, and good idea on the skins, which i will be
+J South Hi J, you are right, if the same ID exists on other pages it will take the same properties. There are a number of ways to apply CSS to just one page or a set of pages. 1. Every page on your WordPress site has a unique ID or class that is added to a content wrapper div. View the source and you'll find it just before the page content starts. Add that ID or class before the #right selector and you'll have page specific CSS. 2. If that doesn't work in your situation then your theme may have the option to add CSS to specific pages. The Divi theme is an example of a theme that can do that. 3. If that doesn't work for you then you could go right into the header.php file and use some simple PHP to print the CSS code into the header only on a specific page or pages. 4. If you don't like PHP you could use Javascript to do something similar. 5. There are also a couple plugins that allow you to add various code, including CSS, to specific pages. There are probably a couple ways I'm missing, but that's a good start. I hope that helps and thanks for watching!
jeeten web (1 year ago)
awesome, worked perfectly, thanks a lot :)
+jeeten web No problem, thanks for watching!
Sébastian Stevens (1 year ago)
this seems outdated, I am having different options
+Sebastian Stevens Hi Sebastian, which options are you seeing ass different? It's important to note that if you and I have different CF7 add-ons installed the options will be different.
Hank Romero (1 year ago)
Thank you for this awesome video. It has been extremely helpful. I do have a few issues regarding the format as it currently appears. Trying to solve a few issues: 1) how to have the field name appear above and to the left of each field, like it is on yours. 2) The Phone Numer field is shorter than the other fields. 3) The "How did you find us?" and "Message" fields and scrunched in the center. I'm helping a good friend for free and trying to get a few issue solved. Any help would be appreciated. -Hank
Shawn Thomas (1 year ago)
Cool video, but your link to wplearninglab.com to get the CSS code is down. Unable to get the CSS code you are referencing in the video. Any solutions?
Hey Shawn, It must have been a temporary issue. My uptime pinger didn't detect any down time and the link for me when I tried it just now. Here it is again: https://wplearninglab.com/contact-form-7-2-column-responsive-form/ If it still doesn't work I could email you the CSS. I hope that helps and thanks for watching!
Oscar Gonzalez (1 year ago)
Hey great video, but I have a weird problem, whenever I paste the CSS, my header bar gets thicker. Can you help me with that please? also how do I make my Subject field fullwidth? Thank you
Hi Oscar, For the header being affected, try adding .wpcf7 before all of the CSS rules you're applying to the contact form. That should fix that problem. I took a look at the Subject field. Somewhere in your CSS you have "max-width:24.3em" defined. When I delete that rule, the subject input goes to full width. I hope that helps!
Oscar Gonzalez (1 year ago)
Thank you. Great tutorial btw, my site is in Spanish I´s OK http://sitiosrocket.com/contacto/
+Oscar Gonzalez Hi Oscar, can you paste a link into here so I can look into why your bar is getting thicker. I can check out the Subject width at the same time.
Jean Duclos (1 year ago)
Very good video!
+Jean Duclos Thanks and thanks for watching!
S1DEKICK223 (1 year ago)
Hey, great tut! i've a problem and i hope you can help me with that. I done all steps like you done but in my output the text_area is only on the left side.. i hope you'll answer soon ! :)
+S1DEKICK223 It's hard to say without seeing the form code. You may have to take it out of a div or put it into a div of its own. Then you can use CSS to make that div full width, if it doesn't default to full width for you. I hope that helps!
S1DEKICK223 (1 year ago)
Yes :) do i've to open a new div-?
+S1DEKICK223 How do you want the text_area to appear? Full width?
Fabrice Duclos (1 year ago)
Great tutorial! Thank you. I followed your video and everything is working perfectly, EXCEPT the length of my message's field... ??? I would like to have it as long as it shows in your video. If you could have a look here. http://constructionbabylon.ca/contactus/ it would be greatly appreciated. Thank you :)
Antonia Lüdeke (1 year ago)
THANK you so much! Your Videos are a great help for me. Please go on with this.
+Antonia Lüdeke Thanks for encouragement Antonia, I plan to go on for a long long time. Thanks for watching!
Australian Hat Box (1 year ago)
These videos that you present are really great. My question is to find out if you know why a warning comes up to let me know that inserting this "[your-email]" is invalid (under the mail tab)? And is it a message that it's okay to ignore, or should I do something to resolve this? Thanks again.
+Australian Hat Box I wouldn't ignore it. It sounds like the short code is not the same between the form design tab and the email tab. In the email tab, delete the [your-email] short code. Then look at the top of the email tab and you'll see a list of all the short codes available. Copy and paste the email one and set if that fixes it. I hope that helps and thanks for watching!
Claire Holmes (1 year ago)
Hi Bjorn, great video thanks! Just wondering if the 2 columns can readjust back to 1 column when viewing on a mobile phone? If so, would you be able to help with the css code for this? Cheers, Claire
Hi Claire, 2 columns can readjust back to 1 column on mobile phones. You'll need to use media queries to set break points. Break points are the width at which you apply different styles. I'm a big fan Chris Coyier's CSS-Tricks.com website. Here's a post he has about breakpoints: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Here's an example from his site: /* ----------- iPhone 6+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { } Between the curly brackets is where you're going to add the CSS to adjust the form back to one column. This code will apply to all devices that are at least 414px wide, but no more than 736 pixels wide. Those widths are the breakpoints you're going to have to determine, or just use Chris's examples. Deciding on break points is the hard part. Once that's done all you have to do is put in this CSS rule (assuming you used the CSS code from my site: https://wplearninglab.com/contact-form-7-2-column-responsive-form/): #left,#right {width:90%;float:none;} Feel free to adjust the width to suit your needs. By eliminating the float, you eliminate the two columns. I hope that helps and thanks for watching!
Yamastine Films (1 year ago)
Hi learning lad, thats for the great tuit. been battling with this 2 column form for sometime now. so you help alot. but i have a funy issue, all my text are kind of stuck in the center, its looks like its been centered aligned to the form.. you know what i mean? any solution... would be great
Yamastine Films (1 year ago)
hi, thanks for getting back to me, I found a way to fix it but the problem is the columns where not aligning properly to the left and right, so i changed it abit and said float right float left. but now they dont meet in the middle as i would hope this is the link http://hochzeitstag-sh.de/#enquiry and this is the the kind of form i want to replicate http://www.profi-hochzeit.de/kontakt/ and also is there a way to make fields abit thinner ? /*--- 2 Column Form Styles Start **---*/ #left { width: 30%; float: left; margin-right:%; } #right { width: 30%; float: right; } .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 **---*/
Hi Yamastine Films, can you send me a link to your form in the comments? That way I can take a look at it. It sounds like a it would be a simple fix with CSS.
Ben Kleinjan (1 year ago)
Hello, is this still usedfull? Thank you.
Miguel mejia (10 months ago)
How can I edit the length of the form boxes?
+Ben Kleinjan No problemo!
Ben Kleinjan (1 year ago)
Thank you
+Ben Kleinjan I think so. The code and the concept both still work if you want a two column contact form.
Emma (1 year ago)
Hi! This was very helpful for me but I wonder if you can change the tab order? Now, for me, the order is top to bottom but I would like it to be left to right for those columns who are next to each other. Do you know how to do that?
+Emma Hi Emma, the fields and columns can be reordered without much effort, but I can visualise exactly what you're looking for. Do you have an example you could link to?
Harry Heijligers (1 year ago)
Hi, I have two questions: 1) why isn't it working for me? I copied literally what you did, but I do not get two columns. Everything is into 1 column. 2) How did you make this nice "Send" button? Thanks!
Joe Sapienza (1 year ago)
Thank you for this tutorial. I was excited to try it as I have been trying to make 2 columns by trying to manually space individual fields (and of course there'd be no responsiveness, but that was going to be the "breaks"> Anyway, I "believe" I have followed your instructions and copied information from your web site link - I don't get two columns? When I went to the APPEARANCE tab, I don't have an option as you mentioned, but I do have an "EDITOR" option. I went there, and it seemed there was some CSS code already there. I simply pasted your info at the bottom of what was shown. Could this be it? Thank you for any help, if possible.
+Joe Sapienza Hi Joe, I can't tell if the Editor you are using is the right one, but since you saw CSS code there it could be similar. I recommend you test to see if the CSS is being applied by using the inspector on the live form to find a CSS selector and try applying a background colour to it like this {background-color: red !important;} Using !important will force the CSS to apply. Then you'll know if the CSS in the editor is being applied, that's step one. If the CSS is applied then we can figure out why the two columns aren't being created. Let me know what happens.
Sylver Yagi (1 year ago)
Thanks a lot. Awesome tutorial
+Sylver Yagi You're welcome Sylver, thanks for watching
Matthew Smaldone (1 year ago)
Hi, thanks for this great tut. Can you advise how to make this a three column layout? Thanks!
Nishant Sharma (10 months ago)
HI i am getting an error that "Sender email address does not belong to the site domain" Can you help please
+Matthew Smaldone Excellent, good work!
Matthew Smaldone (1 year ago)
I figured it out from your two column CSS. Thanks!
+Matthew Smaldone Hi Matthew, I'll have to work out the CSS exactly when I get a chance, but it's the same process as in this video. You would just add another div to wrap your third column content and float it took the left for larger screens and undo the float on smaller screens. Give it a shot and key me know how it goes. If you share the link to the form your working on I can give you more specific advise.
uxrockabilly (1 year ago)
Hello. Can I ask which tool you use for doing the screencast? I really like the zoom effects etc in the video.
+uxrockabilly I use screenflow for Mac. Camtasia for Windows has the same effects if you have Windows.
Raja Sajjad (1 year ago)
Hello, If I have two Required fields (Email and Phone). I want it to work if customer fills one of them either Email or Phone. Do you know how can i do this. I shall be thankful.
+Raja Sajjad Hi Raja, that's a good question. I haven't had a need to work this out, so I'll don't know exactly how to do it. But I can see two options. 1. Don't set the fields to required in the contact form 7 editor. Then write custom JavaScript validation to require one or the other. 2. There are contact form 7 plugins that allow conditional fields that may do what you're looking for. I hope that helps, let me know how it goes!
Simran Sandhu (1 year ago)
Thank you very much. It helped a lot. Please do a video on how to customize contact forms. :)
Alice Fox (1 year ago)
How to make a booking contact form? In which check out date should not be lesser than check in date.
Anna Hunt (2 years ago)
I've used your code, thank you. I notice you've set it up to have smaller fields on smaller screens. Do you also have responsible CSS code to show 1 per row, rather than 2 small fields, when screen size is equal or smaller than say 320px? Lastly, any thoughts on how to hide the form on submission and just show success message? Pages I look at seem to have fixes that might not be future proofed.
Lidija N (2 years ago)
Hi there, love your tutorial, however my font is acting weird now (font size is different for every box)..
You sure can. Every contact form 7 form has a container with the class wpcf7. You can use that class to change the background color, add padding, add a border around the form, etc. You can also add your own divs with custom classes and ID's in the contact form 7 editor. It just depends on how complex you want to make it. There is also a plugin called Contact Form 7 Skins that has styling templates you can easily apply to any of your forms. I made a video about it here: https://www.youtube.com/watch?v=8uJku6xMzTg I hope that helps!
Lidija N (2 years ago)
Hi! Thank you for replying so soon! I was able to fix it :D I have another question, can we add another comand to css to place form into the box and color its background? :)
+Lidija N Hi Lidija, that's strange. The font sizes are set either in your custom CSS or the CSS of the theme. Do you have a like to the form so I can take a look?
Bojan Ivanović (2 years ago)
I've copied your code and pasted it to my wp (html and css in the editor) and it does not work like yours...fields are not alligned properly...
+Curtis Williams Hi Curtis, your theme may have styles for Contact Form 7 that are causing the problem. You can adjust the width and margins in the code I have you until it is aligned how you want it. I hope that helps and thanks for watching!
Curtis Williams (1 year ago)
Same, My form fields aren't aligned
Brandon F (1 year ago)
What're these two links in reference to? I am having the same issues as mentioned in the comment above still aligned in a single column.
Jean Duclos (1 year ago)
https://www.w3schools.com/css/css_align.asp
Jean Duclos (1 year ago)
https://www.w3schools.com/cssref/css3_pr_align-content.asp
Tushar Jewel (2 years ago)
When I submit "There was an error trying to send your message. Please try again later." is showing in my contact form. And why ? Thanks

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.