I've created a Contact Form 7 playlist with a bunch of videos explaining how to do almost anything with CF7: ua-cam.com/play/PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV.html 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: ua-cam.com/play/PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV.html
+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 UA-cam 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!
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
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?
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.
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. :-)
+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.
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!
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?
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.
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
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?
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
+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!
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!
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 **---*/
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 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.
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: ua-cam.com/video/9e-JbYgYBSs/v-deo.html Please let me know if that helps or not!
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 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?
+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.
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?
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?
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?
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?
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.
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.
Hey, nice tut and I took everything over, looking good. The one challenge Ive got is, while you are filling it the form and pressing the TAB, it jumps over to the wrong position and I dont know how to fix this :/ unfortunately. It jumps down to the filed instead of from left to right :/ Any ideas?
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!
What I did is, I added classes to the p tags instead of ids to the divs, to have them appear left and right. This way I keep the tab order and am able to tab through my contact form. I hope this makes sense though! :-D
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!
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!
I've created a Contact Form 7 playlist with a bunch of videos explaining how to do almost anything with CF7: ua-cam.com/play/PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV.html
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: ua-cam.com/play/PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV.html
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 UA-cam 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!
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!
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?
Worked like a charm. Took me about 3 minutes to get this done. Thx.
I’m happy I could help, thanks for watching!
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.
omfg you are the best. that was so clear you just saved my entire schooling. thank you i love you
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 :)
Bjorn, thank you so much! Your tutorials are super informative and very well explained!
Thanks Jamshed and thanks for watching!
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.
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 Informative and Accurative Information. Loved it.
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!
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!
It was very helpful! Thank you! You saved me hours of googling :)
Awesome! I'm happy I could help Jakub!
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?
I've just completed this for my website Bjorn, what a great help it was. Thank you.
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.
Beautiful forms make the world a happier place 😀 I'm happy I could help, thanks for watching!
One of the best tutorial about...! Thanks!!
Very well presented, I have watched a lot of WP tutorials and this was clear and informative. Thanks!
Simple, accurate, easy to follow instructions that worked perfectly. Thank you!
This video really helps. Thanks man!
You’re welcome Michael, I’m happy I could help :) Thanks for watching!
Brilliant, it worked first time... thanks so much!
+Susan Young You're welcome Susan, thanks for watching!
Your tutorials helped me a lot. Please tell me how to create a new contact 7 form with separate Css
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 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!
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!
Thanks - simple to implement and quick / easy to explain! :)
I'm happy I could help Oliver, thanks for watching!
wow, even me, who already study CSS learned a lot, thanks a lot!
Very useful. So clear and therefor a great tuorial. Thanks a lot!
+Walter Winter Hi Walter, glad you found it useful. Thanks for watching!
This video was very helpful. You explain the steps extremely well.
Thanks Diane and 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?
Thank you , it is very helpfull and works properfly for me !! You save times.
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 !!! your tutorials are very helpful
Thanks
+Nontu Dutta Your welcome Nontu. Thanks for the encouragement and for watching!
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!
Hey thanks for the help! Great video. Can you tell me how to add 3 columns? ie for the First Middle Last name
Massive thank you! explained very clearly and everything works!
You’re welcome Dylano, thanks for watching!
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
Very good and clear video, thank you so much for sharing it!
Great works simple thank you
You’re welcome Mustafa, 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
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?
Thanks a lot for the video.
You’re welcome Harshal, thanks for watching!
awesome, worked perfectly, thanks a lot :)
+jeeten web No problem, thanks for watching!
Great teacher! Thumbs up and subscribed! A+
Thanks again Tim :)
Thank you very much. It helped a lot. Please do a video on how to customize contact forms. :)
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?
Thanks mate! Works perfectly!
You're welcome Robin, thanks for watching!
Hello, I shown your video which is very nice and effective. Thanks
Thanks a lot for solving my problem.
You’re welcome Akash, thanks for watching!
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 :)
Super useful tutorial. Thank you for taking the time to make this for us.
I also subscribed to your channel! :-)
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
Thank you! Great video
Thanks, just what I was looking for.. : )
+Thomas Arnoldi Awesome! Glad I could help. 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!
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 :)
Thank you. It helped a lot.
+aryanon Great! Thanks for watching!
As always thank you so much . awesome tutorials !! you are the best
Im/
You're welcome Iván, 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!
Brilliant thanks!
You’re welcome Lisa-Marie, thanks for watching!
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 **---*/
Thank you very much for your tutorial.
Thanks a lot. Awesome tutorial
+Sylver Yagi You're welcome Sylver, thanks for watching
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.
This was very helpful, thank you very much for the input to make this tutorial! :)
Thank you very much. worked perfectly
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.
Really really helpful. Thank u a lot for it
You're welcome Hung, thanks for watching!
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 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.
Thant is exactly the info I was looking for. Thank you so much. I appreciate you.
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: ua-cam.com/video/9e-JbYgYBSs/v-deo.html
Please let me know if that helps or not!
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/
You are amazing, immense thanks
good tutorial! thanks from chile
You're welcome and thanks for watching!
Thanks. Great video tutorial.
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?
Very good video!
+Jean Duclos Thanks and thanks for watching!
Hi, thanks for this great tut. Can you advise how to make this a three column layout? 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.
I figured it out from your two column CSS. Thanks!
+Matthew Smaldone Excellent, good work!
HI i am getting an error that "Sender email address does not belong to the site domain" Can you help please
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 for this cool tutorial. God bless you. :)
+Vanthony G Hey Vanthony, no problemo. Thanks for watching!
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?
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.
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?
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 **---*/
very helpful thank you .
+Napat Thongchut You're welcome. 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.
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.
Hey, nice tut and I took everything over, looking good. The one challenge Ive got is, while you are filling it the form and pressing the TAB, it jumps over to the wrong position and I dont know how to fix this :/ unfortunately. It jumps down to the filed instead of from left to right :/ Any ideas?
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!
Hey! Is it possible to make this only make it like this on desktop, and have it like default on mobile? Thank you!
thanks! very useful video... salute!
Thank you so much for sharing this! It helped me a lot! Thanks thanks thanks and thumbs up man! :-)
What I did is, I added classes to the p tags instead of ids to the divs, to have them appear left and right. This way I keep the tab order and am able to tab through my contact form.
I hope this makes sense though! :-D
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!
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 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
WordPress Tutorials - WPLearningLab Yes, thats what I mean
this is so good. thanks
Thanks, I'm glad I could help! Thanks for watching
worked! thank you
You're welcome Crystal, thanks for watching!
Thank you.!! very Working!
You're welcome, thanks for watching!