I've created a Contact Form 7 playlist with a bunch of videos explaining how to do almost anything with CF7: ruclips.net/p/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: ruclips.net/p/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!
Is it possible to create a form within a form? By this I mean if you select a certain option in the drop-down menu the form has different fields to fill-in? Thanks, Sean
This is old but gold! No one over RUclips has explained CF7 like you did, not to mention all the great short well explained tutorials. Thank you so much! Btw I admire your peaceful calm teaching. Best wishes for you!
I have watched litterally hundreds of "how-to" videos. This might be the best I have ever seen. Basic enough that a raw newbie can follow it, complete enough to get the task accomplished, yet technical enough that there are no 'holes' in understanding what is going on. Well done sir!
Ok, I do have a stupid question - the items that are in 2 columns are in a different font than those in the default single column format. Is there a quick & dirty way to make it keep the font setting?
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
Excellent tutorial, not just for the forms but for some basic things especially the custom css which has always been miles over my head but your explaining what each entry/element does has made it all much clearer to me what css is and what it does.
I’m happy I could help! Thanks for sharing your feelings towards css. I tend to shy away from it on this channel because most people aren’t fans of it, but it’s not that difficult to learn and read.
this is priceless... just look like you are a contact form 7 guru.. Thanks alot sir, i got a great mastery in contact form 7 just by watching your tutorial and implementing it in my forms.
I know you did this video ~6 years ago, but it's still one of the best out there (I especially like the fact that you aren't trying to sell a plugin for $xx / year). In one of your other CF7 "how to" CSS videos, you said "if you want to see how to do something else with CSS in Contact Form 7, just ask - I don't care if I have to do 50 of these videos". Ok, so I'm asking. LOL 2 questions actually (kind of unrelated, so this might need 2 videos). 1) take this video further - I have a "membership application form" that has firstname, lastname, business name (3 columns) phone1, phone2, email, businessURL (4 columns) streetaddress, city, zip (state is assumed, so 3 columns) I'm aware that having a form with 3 columns on the 1st row, then 4 columns on 2nd row, then 3 columns on 3rd row might look funky, but I think the exercise in how to do this with CSS would be a great learning tool. 2) How would you align a checkbox that has 256 options in it? On my application form, I ask "what counties (in Texas) do you operate?", and give them a check box with all 256 possible answers. It would be nice (and easier to navigate) if the checkboxes were lined up in a table type format.
+Gurjeet Bansal to add, I was wondering if you have a tutorial on how to duplicate text field sets which show only when users click the "+" or "add". an example is for multiple product info entries. Thanks.
Amazing! I began with WPForms which are Ok, but for more features we have to pay. Contact Form 7 is very flexible since we can do almost everything with code. Thanks for the tips, great video. Cheers!
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. :-)
Its a really awesome playlist tutorial i have ever seen. But it it will be more well if it will describe with responsive option. Here, i am a newbie in the world of wordpress customization. So, we, all newbie, are more greatful to you for this valueble tutorial. hope you will give us a responsive solution soon. With heartily thanks.....
Amazing video, thank you. It works just fine. I also added some responsiveness to it so that the fields do not get too small on a mobile. My form is now beautiful.
That's great! That was the idea behind the code, I'm happy it worked that way for your setup! Thanks for watching and being part of the WPLL community!
Hi can you help I followed your video create a 2 column responsive form with contact form 7. I copied and pasted all the html and css and added it correctly but changed the "how did you find us" section to a dropdown menu. This all displays on my website the dropdown menu with all the options appears but you cant select one nothing appears its just a blank, how can I rectify this. Thanks Oliver
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!
Hello your tutorial has been wonderful. So clear and easy to follow. Well Done! I have multiple contact forms, can you please provide the additional css code to identify the specific contact form? Thank you in advance
The easy way to do it is to wrap each form in a div with a unique class or ID. Using a class for example: [form field 1] [form field 2] [etc] [form field 1] [form field 2] [etc] Then you can use .form1 and .form2 as your CSS selector and apply styles to each form individually. I hope that helps :) Let me know if you have any further questions. Thanks for watching!
Thank you I understand the first point, however the second point would you be able to explain further - Then you can use .form1 and .form2 as your CSS selector and apply styles to each form individually.
Nice pace and voice. clear and concise. However, it did not work for me. My messages are in two columns but they are not 47% each with a margin of 6% and when viewed on a smaller screen they overlap each other. Before using the CSS, only the 'text area would spread all the way across the page, the 'text' boxes only go about a third and 'tel' box even less. Maybe that has something to do with it all. Any ideas?
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?
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?
Hi and thank you for this video. It has helped me understand contact form much better. I followed your instructions and I am getting an error message under the FROM "This email address does not belong to the same domain as the site." I entered [first-name] [last-name] saved and the error message popped up... I sent test email and they seem to work fine. But would you know what the issue i am having is?
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: ruclips.net/video/9e-JbYgYBSs/видео.html Please let me know if that helps or not!
+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!
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 (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!
Hello Good tutorial man Ireally learned a lot from you with this video. I have one question. How to avoid the message not to go on the spam folder? Thats the case on my edn after I followed your tuts. Thanks in advance
+Nelson Doverte Hi Nelson, avoiding the spam folder is easier said than done. If messages sent from Contact Form 7 go into the spam folder it doesn't have anything to do with the plugin. Instead it has to do with your domain's or your IP's reputation among the spam tracking companies. There many reasons why this would happen. Check out this great list of 10 tips to help you keep email out of your spam folder: sendgrid.com/blog/10-tips-to-keep-email-out-of-the-spam-folder/
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
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.
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 hochzeitstag-sh.de/#enquiry and this is the the kind of form i want to replicate 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 **---*/
I want to reduce the space between each field, so that e.g. the space between " Name" field and the "email" field is too much in my form. Hoping for your reply thanks in advance
Nice tutorial. Looks great on a full screen browser, but when I resize or view on mobile the form content displays over the content higher up the page. Any idea?
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!
+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?
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? :)
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: ruclips.net/video/8uJku6xMzTg/видео.html I hope that helps!
This was the best tutorial. I just have one minor issue. I removed the breaks because I didn't want that much space between the lines. However, the line height is even less between the 2 columns and the single column so it's not matching the other lines. How do I fix that?
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: 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!
Very good, nice way of creating a responsive form. However, how can I make sure that when I press tab it goes to the right text box and not downwards. As most forms state, first name (on the left) then surname (on the right). Thanks
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!
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.
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: 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: 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!
Hi, I asked if there is a plugin for CAPTCHA that we can use with Contact Form 7 instead of registering sites with Google to use their plugin. It is okay if you do not want to answer. I like your videos anyway.
+Syed Zafar Iqbal Hi Syed, I've been a little swamped recently, sorry for the delay in replying. There is an add-on for Contact Form 7 that incorporates reCAPTCHA (wordpress.org/plugins/contact-form-7-recaptcha-extension/). I haven't used it before, so I'm not sure who well it works. Is that the plugin you've already tried?
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?
+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!
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.
I've created a Contact Form 7 playlist with a bunch of videos explaining how to do almost anything with CF7: ruclips.net/p/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: ruclips.net/p/PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV
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.
+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!
thank you so much I just tried it and it worked
Awesome Omar, thanks for watching!
Is it possible to create a form within a form? By this I mean if you select a certain option in the drop-down menu the form has different fields to fill-in? Thanks, Sean
This is old but gold! No one over RUclips has explained CF7 like you did, not to mention all the great short well explained tutorials. Thank you so much! Btw I admire your peaceful calm teaching. Best wishes for you!
Thanks for your kind words Jasmine and thanks for watching!
I have watched litterally hundreds of "how-to" videos. This might be the best I have ever seen. Basic enough that a raw newbie can follow it, complete enough to get the task accomplished, yet technical enough that there are no 'holes' in understanding what is going on.
Well done sir!
Ok, I do have a stupid question - the items that are in 2 columns are in a different font than those in the default single column format. Is there a quick & dirty way to make it keep the font setting?
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!
Worked like a charm. Took me about 3 minutes to get this done. Thx.
I’m happy I could help, thanks for watching!
omfg you are the best. that was so clear you just saved my entire schooling. thank you i love you
Excellent tutorial, not just for the forms but for some basic things especially the custom css which has always been miles over my head but your explaining what each entry/element does has made it all much clearer to me what css is and what it does.
I’m happy I could help! Thanks for sharing your feelings towards css. I tend to shy away from it on this channel because most people aren’t fans of it, but it’s not that difficult to learn and read.
Bjorn, thank you so much! Your tutorials are super informative and very well explained!
Thanks Jamshed and thanks for watching!
this is priceless... just look like you are a contact form 7 guru.. Thanks alot sir, i got a great mastery in contact form 7 just by watching your tutorial and implementing it in my forms.
You're welcome Ali, thanks for watching! Let me know if you have any questions :)
I know you did this video ~6 years ago, but it's still one of the best out there (I especially like the fact that you aren't trying to sell a plugin for $xx / year).
In one of your other CF7 "how to" CSS videos, you said "if you want to see how to do something else with CSS in Contact Form 7, just ask - I don't care if I have to do 50 of these videos".
Ok, so I'm asking. LOL 2 questions actually (kind of unrelated, so this might need 2 videos).
1) take this video further - I have a "membership application form" that has
firstname, lastname, business name (3 columns)
phone1, phone2, email, businessURL (4 columns)
streetaddress, city, zip (state is assumed, so 3 columns)
I'm aware that having a form with 3 columns on the 1st row, then 4 columns on 2nd row, then 3 columns on 3rd row might look funky, but I think the exercise in how to do this with CSS would be a great learning tool.
2) How would you align a checkbox that has 256 options in it?
On my application form, I ask "what counties (in Texas) do you operate?", and give them a check box with all 256 possible answers. It would be nice (and easier to navigate) if the checkboxes were lined up in a table type format.
Very Informative and Accurative Information. Loved it.
One of the best tutorial about...! Thanks!!
So great to bump into your tutorial! Very easy to follow. Will put it into practise soon. Thanks!
+Gurjeet Bansal to add, I was wondering if you have a tutorial on how to duplicate text field sets which show only when users click the "+" or "add". an example is for multiple product info entries. Thanks.
+Gurjeet Bansal Hi Gurjeet, I don't have a tutorial for that at the moment. Do you have a link to an example of what you mean so I can take a look?
Amazing! I began with WPForms which are Ok, but for more features we have to pay. Contact Form 7 is very flexible since we can do almost everything with code. Thanks for the tips, great video. Cheers!
This video is brilliant I have been trying to find this solution for a long time, thank you Biorn
Very helpful thanks for posting....saved me a lot of time screwing around by myself and not getting the desired results.
+David Glowasky Awesome. Glad I could help. Thanks for watching David!
Best video on the subject. Thank you and keep up the good work.
+Kaike Alves Awesome! Thanks for the great feedback!
+Kaike Alves Awesome! Thanks for the great feedback!
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!
I've just completed this for my website Bjorn, what a great help it was. Thank you.
It was very helpful! Thank you! You saved me hours of googling :)
Awesome! I'm happy I could help Jakub!
Its a really awesome playlist tutorial i have ever seen. But it it will be more well if it will describe with responsive option. Here, i am a newbie in the world of wordpress customization. So, we, all newbie, are more greatful to you for this valueble tutorial. hope you will give us a responsive solution soon.
With heartily thanks.....
Brilliant, it worked first time... thanks so much!
+Susan Young You're welcome Susan, thanks for watching!
wow, even me, who already study CSS learned a lot, thanks a lot!
Simple, accurate, easy to follow instructions that worked perfectly. Thank you!
This video was very helpful. You explain the steps extremely well.
Thanks Diane and thanks for watching!
This video really helps. Thanks man!
You’re welcome Michael, I’m happy I could help :) Thanks for watching!
Amazing video, thank you. It works just fine. I also added some responsiveness to it so that the fields do not get too small on a mobile. My form is now beautiful.
Beautiful forms make the world a happier place 😀 I'm happy I could help, thanks for watching!
Thanks - simple to implement and quick / easy to explain! :)
I'm happy I could help Oliver, thanks for watching!
Your tutorials helped me a lot. Please tell me how to create a new contact 7 form with separate Css
Absolutely fantastic ! You make things soooooooo easy to understand ! I just copy/pasted your css and I was good to go !
Thank you !
That's great! That was the idea behind the code, I'm happy it worked that way for your setup! Thanks for watching and being part of the WPLL community!
Very useful. So clear and therefor a great tuorial. Thanks a lot!
+Walter Winter Hi Walter, glad you found it useful. Thanks for watching!
Very well presented, I have watched a lot of WP tutorials and this was clear and informative. Thanks!
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!
Hi can you help I followed your video create a 2 column responsive form with contact form 7. I copied and pasted all the html and css and added it correctly but changed the "how did you find us" section to a dropdown menu. This all displays on my website the dropdown menu with all the options appears but you cant select one nothing appears its just a blank, how can I rectify this.
Thanks
Oliver
Massive thank you! explained very clearly and everything works!
You’re welcome Dylano, thanks for watching!
Thank you very much. It helped a lot. Please do a video on how to customize contact forms. :)
Great teacher! Thumbs up and subscribed! A+
Thanks again Tim :)
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!
thank you very Much !!! your tutorials are very helpful
Thanks
+Nontu Dutta Your welcome Nontu. Thanks for the encouragement and for watching!
Very good and clear video, thank you so much for sharing it!
Thank you! Great video
Thank you , it is very helpfull and works properfly for me !! You save times.
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!
Hello your tutorial has been wonderful. So clear and easy to follow. Well Done! I have multiple contact forms, can you please provide the additional css code to identify the specific contact form? Thank you in advance
The easy way to do it is to wrap each form in a div with a unique class or ID.
Using a class for example:
[form field 1]
[form field 2]
[etc]
[form field 1]
[form field 2]
[etc]
Then you can use .form1 and .form2 as your CSS selector and apply styles to each form individually.
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
Thank you I understand the first point, however the second point would you be able to explain further - Then you can use .form1 and .form2 as your CSS selector and apply styles to each form individually.
Hello I still need your help please
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.
Thanks mate! Works perfectly!
You're welcome Robin, thanks for watching!
Hello, I shown your video which is very nice and effective. Thanks
Nice pace and voice. clear and concise. However, it did not work for me. My messages are in two columns but they are not 47% each with a margin of 6% and when viewed on a smaller screen they overlap each other.
Before using the CSS, only the 'text area would spread all the way across the page, the 'text' boxes only go about a third and 'tel' box even less. Maybe that has something to do with it all.
Any ideas?
Hi WP Learning Lab. I've got the same issue as Alistair Dymock. Can you give us the possible reason?
Same here. Working on it.
Its probably because of your custom CSS in your theme I suppose, I ve got the same issue and opened a ticket.
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?
Thank you very much for your tutorial.
Thanks a lot for the video.
You’re welcome Harshal, thanks for watching!
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?
awesome, worked perfectly, thanks a lot :)
+jeeten web No problem, thanks for watching!
Great works simple thank you
You’re welcome Mustafa, thanks for watching!
Hi and thank you for this video. It has helped me understand contact form much better. I followed your instructions and I am getting an error message under the FROM "This email address does not belong to the same domain as the site." I entered [first-name] [last-name] saved and the error message popped up...
I sent test email and they seem to work fine. But would you know what the issue i am having is?
Have you created an updated video regarding multiple columns in cf7? Like perhaps using Bootstrap?
Hi Antonio, I haven't yet but it's on my list. Using bootstrap seems like overkill since you can do it with a few CSS rules.
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 :)
hi and thanks! i got a question: why at 20:10 did you use the \0020 unicode instead of just a space character?
Thanks a lot for solving my problem.
You’re welcome Akash, thanks for watching!
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: ruclips.net/video/9e-JbYgYBSs/видео.html
Please let me know if that helps or not!
As always thank you so much . awesome tutorials !! you are the best
Im/
You're welcome Iván, thanks for watching!
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!
Thanks, just what I was looking for.. : )
+Thomas Arnoldi Awesome! Glad I could help. Thanks for watching!
Thank you. It helped a lot.
+aryanon Great! Thanks for watching!
the only working solution for Twenty Seventeen and Elementor Free!
We love free. Thanks for the comment.
Thanks! it helped a lot.... but can you help me out with the code I would need to move the button to the right as well?
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 (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!
This was very helpful, thank you very much for the input to make this tutorial! :)
Hello Good tutorial man Ireally learned a lot from you with this video. I have one question. How to avoid the message not to go on the spam folder? Thats the case on my edn after I followed your tuts. Thanks in advance
+Nelson Doverte Hi Nelson, avoiding the spam folder is easier said than done. If messages sent from Contact Form 7 go into the spam folder it doesn't have anything to do with the plugin. Instead it has to do with your domain's or your IP's reputation among the spam tracking companies. There many reasons why this would happen.
Check out this great list of 10 tips to help you keep email out of your spam folder: sendgrid.com/blog/10-tips-to-keep-email-out-of-the-spam-folder/
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
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.
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
hochzeitstag-sh.de/#enquiry
and this is the the kind of form i want to replicate 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 **---*/
Hey thanks for the help! Great video. Can you tell me how to add 3 columns? ie for the First Middle Last name
I want to reduce the space between each field, so that e.g. the space between " Name" field and the "email" field is too much in my form. Hoping for your reply thanks in advance
Nice tutorial. Looks great on a full screen browser, but when I resize or view on mobile the form content displays over the content higher up the page. Any idea?
Sounds like a CSS float issue. Can you share the URL so I can take a look at the page?
+Gorilla Gear
/*--- 2 Column Form Styles Start ---*/
#left {
width: 47%;
float: left;
margin-right:3%;
}
#right {
width: 47%;
float: left;
margin-left:3%;
}
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}
.clearfix {
display:block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 75%;
}
@media (max-width: 500px) {
#left {
float: none;
width: 100%;
}
#right {
float: right;
width: 100%;
}
}
/*---** 2 Column Form Styles End **---*/
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!
Super useful tutorial. Thank you for taking the time to make this for us.
I also subscribed to your channel! :-)
Hi there, love your tutorial, however my font is acting weird now (font size is different for every box)..
+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?
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? :)
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: ruclips.net/video/8uJku6xMzTg/видео.html
I hope that helps!
Thank you for this cool tutorial. God bless you. :)
+Vanthony G Hey Vanthony, no problemo. Thanks for watching!
This was the best tutorial. I just have one minor issue. I removed the breaks because I didn't want that much space between the lines. However, the line height is even less between the 2 columns and the single column so it's not matching the other lines. How do I fix that?
Hey man, thank you so much. You solved my problem. 👍👍👍👍
You're welcome Ali, I'm glad I could help! Thanks for watching and let me know if you have any questions :)
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: 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!
Very good, nice way of creating a responsive form. However, how can I make sure that when I press tab it goes to the right text box and not downwards. As most forms state, first name (on the left) then surname (on the right). Thanks
How did you get the purple header at the top of the form?
Thanks. Great video tutorial.
You are amazing, immense thanks
Thanks a lot. Awesome tutorial
+Sylver Yagi You're welcome Sylver, thanks for watching
Very good video!
+Jean Duclos Thanks and thanks for watching!
Thanks it works really well. How can I make a 5 column form (Example: 1, 2, 3, 4 ,5)?
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!
@@wplearninglab Thanks for the info and quick reply!
No problem :) Good luck!
Really really helpful. Thank u a lot for it
You're welcome Hung, thanks for watching!
good tutorial! thanks from chile
You're welcome and thanks for watching!
Hey! Is it possible to make this only make it like this on desktop, and have it like default on mobile? Thank you!
Awesome tutorials sir!
Thanks and thanks for watching!
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.
Brilliant thanks!
You’re welcome Lisa-Marie, thanks for watching!
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: 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: 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!
Hi, I asked if there is a plugin for CAPTCHA that we can use with Contact Form 7 instead of registering sites with Google to use their plugin. It is okay if you do not want to answer. I like your videos anyway.
+Syed Zafar Iqbal Hi Syed, I've been a little swamped recently, sorry for the delay in replying. There is an add-on for Contact Form 7 that incorporates reCAPTCHA (wordpress.org/plugins/contact-form-7-recaptcha-extension/). I haven't used it before, so I'm not sure who well it works. Is that the plugin you've already tried?
+WP Learning Lab
Hi, thanks for the feedback. I will check these alternatives and revert back. Cheers.
+Zafar Iqbal Let me know if those ideas work or not. I'm sure there's a way to do what you're looking for.
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?
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...
www.w3schools.com/cssref/css3_pr_align-content.asp
www.w3schools.com/css/css_align.asp
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.
Same, My form fields aren't aligned
+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!
Thank you very much. worked perfectly
Is it possible to do 3 columns?
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.