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
Hello Sir I'm your big fan !i really need a help please ! How can i make a form like this uniregistry.com/market/domain/nashvillespa.com Please suggest or show me how to do this! Thank you
My contact 7 submit button was actually hidden under the Recaptcha. So I took your advice of adding style to my theme option by increasing the "margin-top" of the Submit button. Thank you!
Thank you, thank you for mentioning Happy Forms!!!!! It is amazing, so much easier to customise than Contact Form 7 and it works too. Love your tutorials, thank you again!
Hi Sally, Happy Forms is a great plugin. The good news is that the CF7 CSS so works on Happy Forms, you just have to changed the selectors a little bit :) I love that you watch my tutorials :)
Also, if anyone just need to insert some blank spaces/rows, just add: For instance, if I want to make some room between my first row and my second row, I could for instant type this: Very simple :-)
Thanks for your wonderful tuitorials. I need help on how to change the text on a file upload button from "choose file" to something like "Upload File". How do I do it?
Thanks for the video! One question: I am putting the styles directly into the Contact Form 7 Module page, right at the top, between .. and tags, and the things seem to be working fine. Is it also a correct way of inserting the CSS code, or is it preferable to put it into the specific CSS Wordpress style sheet?
Hi Rocco, The best way is always a specific style sheet for your CSS, or adding it to the main style sheet via a function in the functions.php file of your theme. This will help with keeping things centralized and organized, and it'll help with load speed. But for a handful of rules I would put it inline like you have
First let me say that your videos etc have been so helpful for me in building my first WP site. I'm 65 yrs old and did not grow up with all of this stuff like you younger folks. So THANKS! I have been watching the cf7 videos and need to build a form on my site. I am using a Boldgrid theme. Could you tell me if it is possible to add the custom css to a particular page in Boldgrid which I would really like to do; because, I would only be dealing with that particular page and not messing up the rest of the site. If so, please tell me how. If not, am I left with adding it to Customize>Advanced>Custom Css>Custom Theme Css. If I do go to the latter and paste in the script that you have provided on your video and blog, will it only apply to that Contact form verses adding it to that particular page. Now, I've totally confused myself. :-) Thanks again for any and all help!
Hi Patricia, First, thanks for joining the FB group. I approved your request earlier today :) Second, congrats on building your first site! I'm happy I can be part of that journey :) You can add CSS to just the page where the CF7 form lives, but that requires a bit of coding in the functions.php file. I can share a tutorial with you if you want to go that route. By far the easiest is putting the CSS in the customize area, like you suggested. It shouldn't mess up your site because the CSS selector of .wpcf7 only applies the CSS to the form elements. So, even though the CSS will go on every page, it will only be applied to CF7 forms. Important note: The CSS styles will be applied to all CF7 forms on your site. There's a way to apply different styles to different forms if you need to do that. I hope that helps and thanks for watching!
+Nathan K Smith Hi Nathan, try to find out what is causing the space between the field using the Chrome Inspector or the Firefox inspector. Here's a tutorial for the chrome inspector if you need it: ruclips.net/video/tP_kXBJWPhQ/видео.html Once you know what's causing the spacing you'll be able change it with CSS. It is more than likely margin or padding, or both. I hope that helps and thanks for watching!
Hey Bjorn, love the new opener to your video! I'm wondering if there's a way to tell if a website has been created in WP or not. Thanks for making such great videos.
+Steven M. Pumphrey Hi Steven, thanks for the feedback! I try to get a little better every time. I need to smile more during the intro though, lol. I'm working on it :) The way I usually check is by adding /wp-admin or /wp-login.php after the domain name. If a login page appears I know it's WP. If there's no login page but I want to be diligent I'll look at the source code on the homepage for paths contain 'wp-content'. I hope that helps and thanks for being a loyal WPLearner Steven!
Hey man, first thank you for the free tutorials! really helps everyone out. I was wondering if you knew how to make the contact form 7 smaller, especially the additional information box. And if it is possible to just edit one of the contact forms so not all of them get changed to a smaller box.
Hi Luccas, in the blog post linked to in the description of this video, I explain how to make the CSS apply to only one form. On that blog post there's also a selector and some CSS for styling text areas, which are the big boxes. You can define and width and height for them using that selector. I hope that helps and thanks for watching!
Another great video sir. I am in the middle of building my form, so this is awesome. I do have a question. What software do you use to make your videos? On my site I am creating a couple of how too videos on how to use some services. I have Camtasia and sometimes edit videos through adobe premier. I like a feature in particular that you use, zooming in. That is really cool when you zoom in and also you can see you typing. How is this done? Thanks again.
+J South Hi J, I use Screenflow, which is Mac screen capture program for recording and editing. Zooming in is just a function in Screenflow. Another great feature is you can blur out areas you don't want people to see, which is required sometimes. Since I create lots of videos I have to keep my process streamlined. Doing everything in one program helps A LOT with that. I think Premier is overkill for making simple screen capture videos, but if you're comfortable with it then it's a good one to use. The newest camtasia should have all the same features as the Screenflow I'm using. I hope that helps!
Hey Bjorn Thanks for the excellent tutorial Is it possible to implement css settings for each cf7 form separately assuming that I have multiple cf7 forms on the site that each has a different design?
Hi Zamir, Good question and yes, that's possible. The easiest way to do it is inside the form builder wrap your entire form in a div and give it a unique ID or class name. For example, [Form here] Then another form could be [Form here] Then in your stylesheet you can put #form1 in front of all the selectors and styles for that form. And #form2 in front of all the selectors and styles for that form. The CSS can then be completely different for each. I hope that helps and thanks for watching!
Great tutes thanks heaps. I created a customised contact form for my Wp site and found that my message box textarea in my project info fieldset was too big for my mobile. It was responsive but the width of the form was not responsive enough for phone sizes. Is this posible to fix? So i just used the basic contact form for mobile- can I add more rows to the message box textarea (at the moment it is just one line)? Cheers
Hi Alana, Sorry for the delay. Check out this tutorial for using media queries to change the size on mobile: ruclips.net/video/snH6YwCHEoE/видео.html&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV&index=6 You can use css height to make the message box taller. Let me know if you need more clarification on this.
YOure rather awesome, I thank you for putting time into this, it really helps us noobs who are tearing our hair out - though even following you I must admit Im screwing things up a lot and some things I still cant make work no matter what I do - I guess there are some conflicts elsewhere in the custom CSS that are blocking me...but thats part of the learning huh - anyway quick question...do you have a tutorial on how to apply different CSS for different pages. I have a contact form on one page for general contact, and on another page I have a specific contact form. I want to apply CSS to the 2nd one but whenever I apply the custom CSS it effects the first page and not the 2nd - is there a way to point CSS to a particular page?
Hi Daryl, There's definitely a learning curve, you just have to force your way through it. The easiest thing to do is wrap your second contact form in a div tag. In the form editor you can add before the form code and after the form code. Here's an example: [form builder shortcodes] Then save the form. Now you have a new selector for the second form. So the first form's main selector would be .wpcf7 {} For the second form it would be .form2 .wpcf7 {} You then put .form2 before all the styles to be applied to the second form. Does that make sense? There are often CSS conflicts that can cause problems. If you want to force your CSS to be applied you can try using !important. For example, .wpcf7 {background-color:green !important;} That will force the background to be green even if other CSS rules are saying something different for the background color. I've lost a lot of hair with CSS caching issues preventing my changes from taking effect. There are some other tricks you can try to force your CSS changes to be applied: 1. If you're using Google chrome check your site in a different browser like FireFox to see if the changes are applied. 2. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear its' cache and deactivate it while you're making CSS edits. 3. Try installing a Cache Killer add-on to Chrome to see if that helps, here's a tutorial for that one: ruclips.net/video/CegkzTkcQq0/видео.html I hope that helps and thanks for watching!
Very nice video, with useful examples and styles. :-) I have 2 questions, I hope you or someone will reply to: 1) I am new to CF7 and not a big fan of CSS yet, so I am spending wayyy too much time styling these forms. This usually includes having placeholder text in the fields, which is dueable. What I am constantly struggling with, though, is having two input fields beside each other on the same line, and controlling the space between them. Say fx a name-email-message-form. Name and e-mail fields on line 1, line 2 is a three-lined messagefield with same width as name and e-mail together, plus only about 5 px of space between all the fields. Please help me understand how this can be style with CSS? :-) 2) As I see it, putting custom css code directly into the theme only works, assuming you want all your contactforms to have the same look. Where do I place the css, if I want to style them individually?
Hi Alex, First of all, thanks for the purchases over at the WPLearningLab site! Let me know if you have any questions or problems regarding that. Question 1: I'm not sure if you know this, but you don't have use CSS to get placeholder text in CF7 fields, you just need to add the placeholder text like I show in this tutorial: ruclips.net/video/lDZcX5prQC0/видео.html For putting two input fields on the same line, I think this tutorial (ruclips.net/video/snH6YwCHEoE/видео.html) shows you exactly what you need, plus a little more. Please take a look at it when you have a chance and let me know if it helps or if you need more specifics. I can take a look at your form as well and help with your code if you're stuck. CSS can be frustrating at first, but once you understand it it's great. Something else that may help you is a channel I started a couple weeks ago over here: ruclips.net/channel/UC5vKV-35odZlYXVQ_G0sSsg. It's focused on CSS, HTML and Javascript. I'm publishing basic tutorials right now with more advanced ones to come. Question 2: The main CSS for the theme is always the best place to add CSS for all your forms. You can style all forms individually by wrapping each form in div and giving that div a unique ID or class. Then in the CSS you can select that unique ID or class to apply styles to. Here's an example for inside the Contact Form 7 form builder, [ENTIRE FORM] refers to all the form code, no matter how big: [ENTIRE FORM 1] In that case, you would use #form1 as part of your CSS select to select that form uniquely. Then if you have another form you can use an id of form2. [ENTIRE FORM 2] I hope that makes sense. Let me know!
Thanks for your reply. The link to the second video above here, has definitely led me in the right direction, and given me som basic styling code to get started with. It will save me a lot of time, thanks. I will also be keeping an eye on your css channel. :-)
Hi Alex, I'm glad that video helped you along. I'm always happy to make custom tutorials as long as they are also something most subscribers would benefit from. So let me know if there is a specific topic or problem you've having trouble with.
Hey, do you think that you can make a video on how you made that long form in this video? That what I want is ONE video teaching how to make one nice long form like the one you have in this video. Thanks!
Hi, Can you tell me what Screen Casting Software you use to record the video... Please let me know .. As it could help me in my requirements.. Thanks in Advance
What about if we want to style multiple contact forms differently, We cant use cpf7 to target them all differently that will make their style same, i want to style them differently and what about input field background color and placeholder color ?
Hi Alen, I've received that request a couple times, but I haven't had the time to write CSS for that yet. Do you mean change the text for the button to "Upload your file"?
Hi, well that can also be a solution. So button has label "Upload your file" and after selecting file "name.jpg". Is it posibble without using any jQuery or Java?
In your video, it was real quick, i noticed you had a date field with a calendar that pops up for folks to selectt a date and time. I have tried to use the date option and it does not work. Is there a plugin i need for this to work? If not, how do i add it? It doesnt let me input data in the min and max fields.
Hi J, there is a CF7 add-on called Contact Form 7 Datepicker that adds the date picking functionality. I made a video for here: ruclips.net/video/uKYEK1y0hNk/видео.html I hope that helps!
Hi, I have been following your tutorials, which have been a lifesaver and have encountered a small issue, not sure if I should put it on this one or the 2 column video as I think the problem is linked. I have used your CSS for the 2 column contact form which has worked great and done exactly as your tutorial. When I have gone to format the "labels" with the above CSS which I have added colour too, it doesn't apply it at all. It also has the labels of the 2 columns in normal and the labels for the full width 1 column which are below in bold. No CSS for labels seems to change it. Also the 2 right hand boxes which are in the right column, the boxes are slightly taller and not sitting in the same place as the left hand column 2 boxes. It is very slight but noticeable. Any help would be great, Thanks Sally
Hi Sally, All of your problems can be solved with CSS, so they are linked. The colour change not taking effect could be one of three things: 1. Incorrect selector. You can "Inspect" the element with Google Chrome or Firefox and see the selector for the element. 2. A conflict with another CSS rule. You can try adding !important to the end of your CSS to override any other rules that may be causing a conflict. Here's how it would look: .right {color:blue !important;} 3. It could be a caching issue (see the end of this message for the caching solutions. For the input box heights, you can add separate classes or ID's to each field and define a height for each individually. It can be a pain, but sometimes "no pain, no gain". Here are some other tricks you can try to force your CSS changes to be applied in case it's a caching issue: 1. Try a hard refresh: Ctrl + Shift + R on your keyword for Windows or CMD + Shift + R on a Mac 2. If you're using Google chrome check your site in a different browser like FireFox to see if the changes are applied. 3. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear its' cache and deactivate it while you're making CSS edits. 4. Try installing a Cache Killer add-on to Chrome to see if that helps, here's a tutorial for that one: ruclips.net/video/CegkzTkcQq0/видео.html I hope that helps and thanks for watching!
Hi, Thanks for your quick response. I have tried all of the above and still not working. I have had a look at the inspect but it seems nothing in concrete but there is a lot of "Inherit" stuff in there, with lines through it. If I go to the "label" it looks ok. What I think that I will do is start again and hope that it works better 2nd time round as I have got a feeling that there is too much clashing CSS in there :-)! With the separate height classes or ID"s I assume that this is the same the width ones? Just I need to make sure that I apply it to all boxes, so separate ones for each one? I have applied the Cache Killer as I am also having problems with one of the pages not showing it's footer in Chrome, it is there but not on view, which is very frustrating, so hopefully this will solve it! Many thanks again for your help, Sally
Hi, sorry decided to move away from the contact form for a while and do the rest of the site. Then when I came back, saw your mention about Happy Forms and problem solved, it is brilliant, thank you!
Hi, i´ve got a problem with the textarea. I can´t manipulate the textbox via css using your code. Was there any changes since the time you made this video? Greetz
There shouldn't have been. Have you double checked to make sure you have the correct selectors? If so, and it's still not working, can you send me a link to the form you're working on?
how to change color of validation errors. when we click on submit button message appears that "your message has been sent" than how we style and change color of that mesage
Hi Souhila, Good work getting it working! The reason you had to add !important is because you have other CSS that's overwriting the CSS you added. You could spend some time finding the conflicting CSS rules, but !important is much easier. Thanks for watching!
Hi - just wondering if you can show how to change/remove the font awesome loading icon in CF7 after pressing the submit button? I'm trying to change it for a different loading gif found online which I've added to my media in the backend, Thanks in advance. :)
Hey thanks for the tutorials really helpful! I wanted to ask you if there was anyway to add custom styling to radio buttons e.g. change the blue colour that shows up when an option is selected to a colour of your choice, and change the gap size between the radio button and the label (at the moment for my form they show up right next to each other with no gap and looks terrible). Thanks!
You sure can with CSS. Check out this CodePen (codepen.io/AngelaVelasquez/pen/Eypnq) where you can edit the HTML and CSS live and see the changes. Once you have created the look you like you should be able to copy the CSS into your site, update the selectors and it should work. Let me know if that helps and thanks for watching!
Thanks heaps, that page leads to a 404 for me, maybe you need an account to access? I am using X theme on WP which allows you to add and see custom CSS so can probably just do it on site ( have for the rest of the form), just can't seem to target the radio buttons, does this look correct to you? /*radio styles*/ .wpcf7 input[type="radio"], .wpcf7 .wpcf7-select { colour:green; margin:0.8em 0.5em; }
That's strange, I don't have account with CodePen and the page opens for me... This one should work better (code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/). The visuals are different but the result is same; CSS applied to radio buttons and their labels. /*radio styles*/ .wpcf7 input[type="radio"], .wpcf7 .wpcf7-select { colour:green; margin:0.8em } Looks correct, but the selectors are always the trickiest because you may need more selectors before .wpcf7 depending on the page template. .wpcf7 input[type="radio"] should be selecting your radio buttons, but not the labels. To get the label you have to try something like /*radio styles*/ .wpcf7 input[type="radio"] label, .wpcf7 .wpcf7-select label { colour:green; margin:0.8em } You can also try this: /*radio styles*/ .wpcf7 input[type="radio"] label, .wpcf7 .wpcf7-select label { colour:green !important; margin:0.8em !important; } Adding !important forces your styles to applied even if other styles should be taking precedent. I hope that helps!
Issue with links must of been a Chrome thing, I got another 404 but tried in firefox and worked fine :) Thanks for sending this through I really appreciate it, managed to fix spacing issue by using !important so thats great, weirdly I still can't change colour but i'll have a play with the CSS outlined on stephenmorley.org and see what I can do, probably has something to do with having to select a special checked class or something.
Got there in the end! thanks again for your help and your videos. Below is the code I ended up using if anyone else has the same issue: *radio styles*/ .wpcf7-form-control-wrap input[type="radio"] { position: absolute !important; left: -9999px !important; } span.wpcf7-list-item-label { position: relative; padding-left: 20px; } span.wpcf7-list-item-label:before { content: ''; background: #cecece; width: 15px; height:15px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%; border: 4px solid #cecece; } .wpcf7 input[type=radio]:not(old):checked + span:before { background: rgb(71, 69, 81); }
Do you have a video that has a list of codes to edit fields? I need to adjust height, width of fields, etc. I also want validation to be faster vs showing an error after you hit the submit button.
Hi Gerald, I don't have a list of different CSS commands for input fields. But if you Google "CSS input height", for example, you'll find the code you need. To have validation after someone clicks out of a field you'll have to custom code it. You can use jQuery to detect "onBlur" of a field. Then jQuery can compare what's in the field with what should be in the field and then display (or not) an error message almost instantly. The error message would always be on the page, but it would be hidden using the CSS command display:none Then if an error is detected jQuery would change it to the display:block or display:inline to show the error message. Does that make sense?
Thanks for your help and your response. I will try to Google "CSS input height" and hopefully I am able to find what I need. It sort of makes sense but I will have to look into jQuery and see if I can figure it out. Thanks again for your help.
Hi Arismendy, I think this button generator video will help you customize the width of your submit button as well as many other things to improve the button: ruclips.net/video/L06Nr6LaDI0/видео.html Let me know if that helps or not!
This sounds like a caching issue. There are some other tricks you can try to force your CSS changes to be applied: 1. Try a hard refresh: Ctrl + Shift + R on your keyword for Windows or CMD + Shift + R on a Mac 2. If you're using Google chrome check your site in a different browser like FireFox to see if the changes are applied. 3. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear its' cache and deactivate it while you're making CSS edits. Let me know if any of those options fix it.
Hi I was speaking to a IT consultant the other day. he works for a firm and they where being hacked. he changed the htaccess file in wordpress, to stop all the traffic coming through one port. I don't exactly know what he did to it. could you make a tutorial in showing us how to prevent hacks to wordpress site. or when large amount of traffic is coming in from one source. if you have and article could you direct me to the right direction please. thank you in advance. ps love your vids! they r the best on youtube
Hi Ashan, He probably did it like in this tutorial: ruclips.net/video/f6S5K-1fek4/видео.html That will show you how block IPs via .htaccess. This Wordfence tutorial will show you how to find the IPs that are repeating trying to access your site. You could also find this information using server logs: ruclips.net/video/CWOP7BKEw7s/видео.html Wordfence is a great plugin, but it can use a lot of server resources. I hope that helps!
hi my name is Pilot, and I new with wordpress and themes so i tried following your video concerning creating 2 columsn in contact form 7 it was going on well up to the point where i had to locate the custom css option from my theme option which i could not find so i got stuck please can you help me.? I am using Thim Press / Eduma theme
Hi Edwin, Good question. The easiest way is to add a div around the form in the form editor and give that div a class. Then use that class in your CSS selector. For example: [All the form code] Then for the CSS selector use .form1 .wpcf7 I hope that helps, let me know if you have any further questions. Thanks for watching!
+Arvid Ottosson Hi Arvid, inside any of those CSS rule blocks you can add the font-family property to change the font. You can apply the Google font library using this plugin and tutorial: ruclips.net/video/iv8mCqN2gv8/видео.html If you want a crash course on the CSS fonts check out this tutorial from my new channel: ruclips.net/video/P7MkNIC8iMY/видео.html Fast forward to 4 minutes and 10 seconds. I hope that helps and thanks for watching!
Hi again, I tried changing font family by watching the tutorials but I'm just too much of a newbie. Could you please tell me what to write in the customs CSS so I can paste it in: Font family: Amatica SC Size 35: (and the button text size 45). That would be greatly appreciated. Thansk again for great tutorials! Best regards Arvid
I have another problem, you may have the solution to. I'm trying to establish a redirect to a thank-you page (for tracking), when the user submits the form. However, getting this to work has turned out to be a real pain. The on_sent_ok method is only working on some forms (and only as long as Google allows it, apparently), and the Succes Page Redirect plugin, which should make this a slam-dunk, is not working either. Any ideas? A tutorial on this topic would be awesome. :-)
Hi Alex, I think I know how to fix it and I can make a tutorial on that, but it will be a 'hack' job. I'll have to do some testing first to see if my idea works!
just my 2 cents i have recently created this plugin called "Innozilla Skins for Contact Form 7" and it will really help you style your "contact form 7" Form..
the css im adding here is not mobile responsive. my form is not responding to a mobile device where is the code to make this responsive or is this a theme issue?
good evening how are you? How can I change the traditional send button by the WhatsApp sending icon and how can I move the button and upload it to the middle of the message block in a corner?
Hi Carlos, I'm very well, thanks for asking. You can add the WhatsApp icontl to the send button using font awesome. You can move the send button to anywhere on the page using CSS. I don't have a tutorial specific to either of those situations, but I know it can be done. Sorry I can't be of more help and thanks for watching!
Hey, I am looking for a booking plugin which allows me to block dates freely, as in if someone books 05/05/2017 the form will display that date as unavailable or don't show it at all.
Thank you for your tutorials. Unfortunately your CSS doesn't work on my site: I use a child theme (WP Dante theme, Swiftideas), I paste and save the CSS but nothing happens. I've tried CSS also in the main theme editor but it's the same. Any idea to solve the problem?
+Roberto Balò Hi Roberto, a couple things to try in this case are: 1. If you have a caching plugin installed deactivate it and clear it's cache, then clear the browser cache and see if the CSS is applied. 2. If you're using Google Chrome, try viewing the page with a different browser because Chrome has a pretty bad caching bug that keeps old CSS for a very long time. A combination of those two should fix the issue. Let me know how it works!
7 лет назад
Thank you for your quick answer. Unfortunately it still don't work. I'll contact the swiftideas support. I'll let you know.
7 лет назад+1
Hi! I solved the issue with the field confirm_email with this code: .wpcf7-form input[type="confirm_email"] { background:#f7f7f7; width:95%; border:1px solid #e4e4e4; padding:6px 7px; margin-bottom:10px; } Thank you again!
Hi Miguel, Changing all the input fields to a % width should make it responsive. You wouldn't need to use media queries for a simple form, but if your form is complex check out this post by Chris Coyier: css-tricks.com/snippets/css/media-queries-for-standard-devices/ I hope that helps and thanks for watching!
Hi Jeannette, If your theme has an easy way to create columns on the page then you can make 3 columns and put the form in the center column to reduce it's size. The Visual Composer plugin found in many themes can do this. The other way is by changing the width of the input fields to be smaller. You can use the same CSS selectors as in this video but add: width:200px; to the CSS rules for any field. Then see if that is the width you want. Then keep changing that width until you've found the one you want and then apply that width to all the fields. I hope that helps and thanks for watching!
+Jeannette Guajardo Hi Jeannette, if your browser is Chrome or Firefox you can right click on the background and choose Inspect or Inspector from the menu. That will show you the page code and highlight the background element. From there you should be able to figure out a CSS selector you can use to update the background. I hope that helps!
Hi Mehak, I've updated the blog post with CSS for this: wplearninglab.com/contact-form-7-css-style-almost-anything/ It's the very last code box on the page. You can change the value for the width to whatever you want, but you have to make sure to follow it with a unit: %, px, em or rem. I hope that helps and thanks for watching!
Hi, I know this tut is months old, but hope you can help me. I followed along and everything worked except when entering text into the email field, the text is red. If I then click into a different field area the email text turns to #fff which is what I want. So that is weird and I would like it to always be white. I'm using OceanWP theme if that helps any.
It sounds like your theme may have some CSS rules in place that are making the text red. Try something like .wpcf7 input[type=email]:focus {color:#fff;} or .wpcf7 input[type=email]:focus {color:#fff !important;} Those may not be the right selectors for your site, so make sure you have the right selectors. Also make sure you have the :focus pseudo-selector in place. Let me know if that works.
Hi Jacqueline, Is first_as_label is class or the ID of the item you want to change color of? Are you trying to change the color of just the first item in the dropdown?
Hi I have been trying to change icon color on click (output as focus). I have managed to change contact form field border as focus but couldn't make changes to icons. I have applied following css code: .wpcf7 .wpcf7-text, .wpcf7 .wpcf7-select, .wpcf7 .wpcf7-textarea{ text-indent: 30px; font-family: Roboto; width: 100%; height: 42px; border: 1px solid #0d5509 !important; border-radius: 4px; color: #959595; } .wpcf7 p{ position: relative; } .wpcf7 p .fa{ position: absolute; color: #0d5509; z-index: 1; font-size: 15px; top: 30%; left: 1.5%; } .wpcf7 p .fa-pencil{ top: 5%; left: 1.5% } .wpcf7-text:focus, .wpcf7-select:focus, .wpcf7-textarea:focus{ border:2px solid #ff0000 !important; border-radius: 4px; } my contact page link: eoe.gipcl.org.uk/contact and I wish to make it like this: it.gipcl.org.uk/contact I would really appreciate if you help me in this. Thank you in advance
+Rash N Hi Rash, there may be some other places to add CSS. Check out this CSS tutorial: ruclips.net/video/vLSUWT9MNlA/видео.html I hope that helps and thanks for watching!
Many thanks to you!!!!! do you also have a tutorial on how to format the header text on a website? the theme I have does not allow many font functionalities unfortunately and I already tried CSS Siteorigin, it did help change the background color of the ribbon, but not with the text!
Hi Alessandro, You should be able to add space between fields using margin. Check out this help page on CSS margins (www.w3schools.com/css/css_margin.asp). As long as you have your selectors right this will work. I hope that helps and thanks for watching!
Hi Roal, I whipped up some quick CSS to make the file upload button/area look much nicer. I've added the code to the blog post: wplearninglab.com/contact-form-7-css-style-almost-anything/ Let me know what think or if you'd like to know how to style other components!
I asked him on twitter but no luck there, (busy man i'm guessing lol) hopefully someone can help. I have a contact form on my front page that is massive. I want it significantly smaller, how can I achieve this? Thanks in advance.
If you're referring to me, RUclips comments and the FB private group (Facebook.com/groups/wplearninglab) are the best places to get my attention. Why is your form massive? Lots of input fields or big input fields? Do you have a link you can share?
hi, can you make a video of how to monetise a website. I blog 4-6 hours a day, I have good quantity of readers yet I make nothing. google ads has always got one problem or other with me and the keep disabling ads. sick of them. need another way to make money on my blog
Hi, I definitely can make a video on monetisation. The most lucrative ways to monentise a blog is by offering affiliate products (other people's products from which you get a commission when you sell them) or your own products. Is that a possibility for your blog?
The fast thing will be to promote affiliate products. You may be able to find some by Googling: "Your Topic" and affiliate program You may also be able to find some in the Clickbank marketing place (all digital products) or Commission Junction or Share-a-Sale (mostly physical products). The benefit of promoting affiliate products first is that you can start making sales and you can see what your audiences like the best. Then you can create or source similar products and sell them as your own to increase your margins.
I think you have missed a really big step!!!! Like how the hell do you get the CSS code into WordPress? Yes, I know copy paste, but what buttons do I press to magically make WordPress open the right window to open the right window to paste the magic code into?
+Martin Gregson Hi Martin, good question. And you're in luck, here's a tutorial showing you 4 different places to add CSS: ruclips.net/video/vLSUWT9MNlA/видео.html Depending on your theme and plugins you may only have one of these options or you may have all 4. I hope that helps and thanks for watching!
Hi, great video! I'm wondering how to change the input box. Instead of the box I'd like to have a line (here an example: urbaninfluence.com/contact/ ). Thanks in advance! Cedrik
Great question Cedrik. I've updated the CSS on the blog post to include the code you need (wplearninglab.com/contact-form-7-css-style-almost-anything/). This code will make the form input look just like the example form you sent. On the blog post look for the code box with this CSS comment, "Turn an input box into an input line". I hope that helps and thanks for watching!
Hello Bjorn, graet tutorial and ive done so much from this video but how the hell can i change that section(I marked it on picture) WHAT is the css code???please help me out if you can I just added to my browser but id like to add it to CSS too so all can see :D ibb.co/ihvDaa many thanks
Hey Tamas, Sorry for the delay. Thanks for the picture. Using the selector .tb-column-inner doesn't work? You could also try .module_column_5-9-2 or have you tried those to in your CSS already?
i solved it in a diferent way the problem is im not a coder but im really not far to understand how this thing works lol :D now im having another challange and managed to change the drop down menu but I want to specify a specific drop down it has a name=hour so far my code is like this .wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required { width: 45px; } but its changes all drop down menu on my page and i want to change only 1 "called hour" any help? :D here is the picture ibb.co/e8iFqa i have a feeling only the name missing so it will tell which drop down to modify... but i have no idea about the form :(
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
Hello Sir I'm your big fan !i really need a help please !
How can i make a form like this uniregistry.com/market/domain/nashvillespa.com
Please suggest or show me how to do this!
Thank you
My contact 7 submit button was actually hidden under the Recaptcha. So I took your advice of adding style to my theme option by increasing the "margin-top" of the Submit button. Thank you!
+Toyinsola Lydia Oduyale Great work Toyinsola! Knowing a little bit of basic CSS always comes in handy with almost any website.
Thank you, thank you for mentioning Happy Forms!!!!! It is amazing, so much easier to customise than Contact Form 7 and it works too.
Love your tutorials, thank you again!
Hi Sally,
Happy Forms is a great plugin. The good news is that the CF7 CSS so works on Happy Forms, you just have to changed the selectors a little bit :)
I love that you watch my tutorials :)
Super helpful, easy-to-follow and well-explained. Thank you so much.
The best video on how to style the CF7!
+Salvatore Escalante Thanks Salvatore!
Also, if anyone just need to insert some blank spaces/rows, just add:
For instance, if I want to make some room between my first row and my second row, I could for instant type this:
Very simple :-)
Great tip, thanks Mike!
Thanks for your wonderful tuitorials. I need help on how to change the text on a file upload button from "choose file" to something like "Upload File". How do I do it?
Thanks for the video! One question: I am putting the styles directly into the Contact Form 7 Module page, right at the top, between .. and tags, and the things seem to be working fine. Is it also a correct way of inserting the CSS code, or is it preferable to put it into the specific CSS Wordpress style sheet?
Hi Rocco,
The best way is always a specific style sheet for your CSS, or adding it to the main style sheet via a function in the functions.php file of your theme. This will help with keeping things centralized and organized, and it'll help with load speed.
But for a handful of rules I would put it inline like you have
Thanks very much for the tips, I appreciate it very much. Once again, thanks very much for your videos, very well made and helpful.
First let me say that your videos etc have been so helpful for me in building my first WP site. I'm 65 yrs old and did not grow up with all of this stuff like you younger folks. So THANKS! I have been watching the cf7 videos and need to build a form on my site. I am using a Boldgrid theme. Could you tell me if it is possible to add the custom css to a particular page in Boldgrid which I would really like to do; because, I would only be dealing with that particular page and not messing up the rest of the site. If so, please tell me how. If not, am I left with adding it to Customize>Advanced>Custom Css>Custom Theme Css. If I do go to the latter and paste in the script that you have provided on your video and blog, will it only apply to that Contact form verses adding it to that particular page. Now, I've totally confused myself. :-) Thanks again for any and all help!
Hi Patricia,
First, thanks for joining the FB group. I approved your request earlier today :)
Second, congrats on building your first site! I'm happy I can be part of that journey :)
You can add CSS to just the page where the CF7 form lives, but that requires a bit of coding in the functions.php file. I can share a tutorial with you if you want to go that route.
By far the easiest is putting the CSS in the customize area, like you suggested.
It shouldn't mess up your site because the CSS selector of .wpcf7 only applies the CSS to the form elements. So, even though the CSS will go on every page, it will only be applied to CF7 forms.
Important note: The CSS styles will be applied to all CF7 forms on your site. There's a way to apply different styles to different forms if you need to do that.
I hope that helps and thanks for watching!
Thanks for the great videos. Unfortunately, none of it is working on my site. Not sure why...
Useful video! Make the difficult CSS easy for me!!! THX!
Great! I'm glad I could help. Thanks for watching!
Great videos! How do you reduce the spacing between the field boxes so I can squeeze in more field boxes?
+Nathan K Smith Hi Nathan, try to find out what is causing the space between the field using the Chrome Inspector or the Firefox inspector. Here's a tutorial for the chrome inspector if you need it: ruclips.net/video/tP_kXBJWPhQ/видео.html
Once you know what's causing the spacing you'll be able change it with CSS. It is more than likely margin or padding, or both.
I hope that helps and thanks for watching!
Thanks , excellent explanation
but i have question
how can i make more than one drop downs on the same line?
Hey Bjorn, love the new opener to your video! I'm wondering if there's a way to tell if a website has been created in WP or not. Thanks for making such great videos.
+Steven M. Pumphrey Hi Steven, thanks for the feedback! I try to get a little better every time. I need to smile more during the intro though, lol. I'm working on it :)
The way I usually check is by adding /wp-admin or /wp-login.php after the domain name. If a login page appears I know it's WP. If there's no login page but I want to be diligent I'll look at the source code on the homepage for paths contain 'wp-content'.
I hope that helps and thanks for being a loyal WPLearner Steven!
www.wpthemedetector.com/ free wp theme detector
will show you what theme was used and plugins used and more
+bankole dada Good tip! Thanks for sharing!
this is an awesome tutorial. it's what I need. been looking for this guide. thanks much. been learning a lot from you.
thank you very much!
You're welcome, I'm happy to help! Thanks for watching!
Hey man, first thank you for the free tutorials! really helps everyone out.
I was wondering if you knew how to make the contact form 7 smaller, especially the additional information box. And if it is possible to just edit one of the contact forms so not all of them get changed to a smaller box.
Hi Luccas, in the blog post linked to in the description of this video, I explain how to make the CSS apply to only one form.
On that blog post there's also a selector and some CSS for styling text areas, which are the big boxes. You can define and width and height for them using that selector.
I hope that helps and thanks for watching!
Thanks for the video... Anyone knows how can i always display arrows in number field?
Very good. Thank you very much !!!!
You’re welcome Alexandre, thanks for watching!
Another great video sir. I am in the middle of building my form, so this is awesome.
I do have a question. What software do you use to make your videos? On my site I am creating a couple of how too videos on how to use some services. I have Camtasia and sometimes edit videos through adobe premier.
I like a feature in particular that you use, zooming in. That is really cool when you zoom in and also you can see you typing. How is this done?
Thanks again.
+J South Hi J, I use Screenflow, which is Mac screen capture program for recording and editing.
Zooming in is just a function in Screenflow. Another great feature is you can blur out areas you don't want people to see, which is required sometimes. Since I create lots of videos I have to keep my process streamlined. Doing everything in one program helps A LOT with that.
I think Premier is overkill for making simple screen capture videos, but if you're comfortable with it then it's a good one to use.
The newest camtasia should have all the same features as the Screenflow I'm using.
I hope that helps!
Hey Bjorn
Thanks for the excellent tutorial
Is it possible to implement css settings for each cf7 form separately assuming that I have multiple cf7 forms on the site that each has a different design?
Hi Zamir,
Good question and yes, that's possible. The easiest way to do it is inside the form builder wrap your entire form in a div and give it a unique ID or class name.
For example,
[Form here]
Then another form could be
[Form here]
Then in your stylesheet you can put #form1 in front of all the selectors and styles for that form. And #form2 in front of all the selectors and styles for that form.
The CSS can then be completely different for each.
I hope that helps and thanks for watching!
Hi Bjorn
thank you so much
Any time :)
Great tutes thanks heaps. I created a customised contact form for my Wp site and found that my message box textarea in my project info fieldset was too big for my mobile. It was responsive but the width of the form was not responsive enough for phone sizes. Is this posible to fix?
So i just used the basic contact form for mobile- can I add more rows to the message box textarea (at the moment it is just one line)?
Cheers
Hi Alana,
Sorry for the delay. Check out this tutorial for using media queries to change the size on mobile: ruclips.net/video/snH6YwCHEoE/видео.html&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV&index=6
You can use css height to make the message box taller.
Let me know if you need more clarification on this.
best teacher !!
😀
Thanks and thanks for watching!
YOure rather awesome, I thank you for putting time into this, it really helps us noobs who are tearing our hair out - though even following you I must admit Im screwing things up a lot and some things I still cant make work no matter what I do - I guess there are some conflicts elsewhere in the custom CSS that are blocking me...but thats part of the learning huh - anyway quick question...do you have a tutorial on how to apply different CSS for different pages. I have a contact form on one page for general contact, and on another page I have a specific contact form. I want to apply CSS to the 2nd one but whenever I apply the custom CSS it effects the first page and not the 2nd - is there a way to point CSS to a particular page?
Hi Daryl,
There's definitely a learning curve, you just have to force your way through it.
The easiest thing to do is wrap your second contact form in a div tag.
In the form editor you can add before the form code and after the form code. Here's an example:
[form builder shortcodes]
Then save the form. Now you have a new selector for the second form.
So the first form's main selector would be
.wpcf7 {}
For the second form it would be
.form2 .wpcf7 {}
You then put .form2 before all the styles to be applied to the second form.
Does that make sense?
There are often CSS conflicts that can cause problems. If you want to force your CSS to be applied you can try using !important. For example,
.wpcf7 {background-color:green !important;}
That will force the background to be green even if other CSS rules are saying something different for the background color.
I've lost a lot of hair with CSS caching issues preventing my changes from taking effect.
There are some other tricks you can try to force your CSS changes to be applied:
1. If you're using Google chrome check your site in a different browser like FireFox to see if the changes are applied.
2. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear its' cache and deactivate it while you're making CSS edits.
3. Try installing a Cache Killer add-on to Chrome to see if that helps, here's a tutorial for that one: ruclips.net/video/CegkzTkcQq0/видео.html
I hope that helps and thanks for watching!
Very nice video, with useful examples and styles. :-) I have 2 questions, I hope you or someone will reply to:
1) I am new to CF7 and not a big fan of CSS yet, so I am spending wayyy too much time styling these forms. This usually includes having placeholder text in the fields, which is dueable. What I am constantly struggling with, though, is having two input fields beside each other on the same line, and controlling the space between them. Say fx a name-email-message-form. Name and e-mail fields on line 1, line 2 is a three-lined messagefield with same width as name and e-mail together, plus only about 5 px of space between all the fields. Please help me understand how this can be style with CSS? :-)
2) As I see it, putting custom css code directly into the theme only works, assuming you want all your contactforms to have the same look. Where do I place the css, if I want to style them individually?
Hi Alex,
First of all, thanks for the purchases over at the WPLearningLab site! Let me know if you have any questions or problems regarding that.
Question 1:
I'm not sure if you know this, but you don't have use CSS to get placeholder text in CF7 fields, you just need to add the placeholder text like I show in this tutorial: ruclips.net/video/lDZcX5prQC0/видео.html
For putting two input fields on the same line, I think this tutorial (ruclips.net/video/snH6YwCHEoE/видео.html) shows you exactly what you need, plus a little more. Please take a look at it when you have a chance and let me know if it helps or if you need more specifics. I can take a look at your form as well and help with your code if you're stuck.
CSS can be frustrating at first, but once you understand it it's great. Something else that may help you is a channel I started a couple weeks ago over here: ruclips.net/channel/UC5vKV-35odZlYXVQ_G0sSsg. It's focused on CSS, HTML and Javascript. I'm publishing basic tutorials right now with more advanced ones to come.
Question 2:
The main CSS for the theme is always the best place to add CSS for all your forms. You can style all forms individually by wrapping each form in div and giving that div a unique ID or class. Then in the CSS you can select that unique ID or class to apply styles to. Here's an example for inside the Contact Form 7 form builder, [ENTIRE FORM] refers to all the form code, no matter how big:
[ENTIRE FORM 1]
In that case, you would use #form1 as part of your CSS select to select that form uniquely. Then if you have another form you can use an id of form2.
[ENTIRE FORM 2]
I hope that makes sense. Let me know!
Thanks for your reply. The link to the second video above here, has definitely led me in the right direction, and given me som basic styling code to get started with. It will save me a lot of time, thanks. I will also be keeping an eye on your css channel. :-)
Hi Alex,
I'm glad that video helped you along. I'm always happy to make custom tutorials as long as they are also something most subscribers would benefit from. So let me know if there is a specific topic or problem you've having trouble with.
Hi,
Can you make a video on how to add a scrollbar to the form?
Thanks!
So instead of the scrolling down the page, you want visitors to scroll down the form?
Thank's so much for the CSS. Be blessed.
+Salducci Kheira You're welcome, I'm glad it helped you. Thanks for watching!
Realy very good and helpful🤗
Hey, do you think that you can make a video on how you made that long form in this video? That what I want is ONE video teaching how to make one nice long form like the one you have in this video. Thanks!
Great video, how to color background field "Your message",plz? Thx
Great tutorial! How do I make the title of each field appear inside of a field?
Hi Eli,
Good question. I'm working on version 2 of this post and video. I'll develop that CSS and have it in version 2 coming soon!
Hi, Can you tell me what Screen Casting Software you use to record the video... Please let me know .. As it could help me in my requirements.. Thanks in Advance
Hi Praveen, I use Screenflow for Mac. Camtasia is equivalent software for Windows.
What about if we want to style multiple contact forms differently, We cant use cpf7 to target them all differently that will make their style same, i want to style them differently and what about input field background color and placeholder color ?
HI, great tutorials, I have a question: How to style Upload file button and put custom placeholder like "Upload ypur file"?
Hi Alen,
I've received that request a couple times, but I haven't had the time to write CSS for that yet. Do you mean change the text for the button to "Upload your file"?
Hi, well that can also be a solution. So button has label "Upload your file" and after selecting file "name.jpg". Is it posibble without using any jQuery or Java?
Extremely Helpful!! Thanks!
You're welcome Ben, glad I could help!
In your video, it was real quick, i noticed you had a date field with a calendar that pops up for folks to selectt a date and time. I have tried to use the date option and it does not work. Is there a plugin i need for this to work? If not, how do i add it? It doesnt let me input data in the min and max fields.
Also looks like in your code you are using something datetime* looks like a function from plugin.
Hi J, there is a CF7 add-on called Contact Form 7 Datepicker that adds the date picking functionality. I made a video for here: ruclips.net/video/uKYEK1y0hNk/видео.html
I hope that helps!
Hi,
I have been following your tutorials, which have been a lifesaver and have encountered a small issue, not sure if I should put it on this one or the 2 column video as I think the problem is linked.
I have used your CSS for the 2 column contact form which has worked great and done exactly as your tutorial.
When I have gone to format the "labels" with the above CSS which I have added colour too, it doesn't apply it at all. It also has the labels of the 2 columns in normal and the labels for the full width 1 column which are below in bold. No CSS for labels seems to change it. Also the 2 right hand boxes which are in the right column, the boxes are slightly taller and not sitting in the same place as the left hand column 2 boxes. It is very slight but noticeable.
Any help would be great,
Thanks
Sally
Hi Sally,
All of your problems can be solved with CSS, so they are linked. The colour change not taking effect could be one of three things:
1. Incorrect selector. You can "Inspect" the element with Google Chrome or Firefox and see the selector for the element.
2. A conflict with another CSS rule. You can try adding !important to the end of your CSS to override any other rules that may be causing a conflict.
Here's how it would look: .right {color:blue !important;}
3. It could be a caching issue (see the end of this message for the caching solutions.
For the input box heights, you can add separate classes or ID's to each field and define a height for each individually. It can be a pain, but sometimes "no pain, no gain".
Here are some other tricks you can try to force your CSS changes to be applied in case it's a caching issue:
1. Try a hard refresh: Ctrl + Shift + R on your keyword for Windows or CMD + Shift + R on a Mac
2. If you're using Google chrome check your site in a different browser like FireFox to see if the changes are applied.
3. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear its' cache and deactivate it while you're making CSS edits.
4. Try installing a Cache Killer add-on to Chrome to see if that helps, here's a tutorial for that one: ruclips.net/video/CegkzTkcQq0/видео.html
I hope that helps and thanks for watching!
Hi,
Thanks for your quick response. I have tried all of the above and still not working. I have had a look at the inspect but it seems nothing in concrete but there is a lot of "Inherit" stuff in there, with lines through it. If I go to the "label" it looks ok. What I think that I will do is start again and hope that it works better 2nd time round as I have got a feeling that there is too much clashing CSS in there :-)!
With the separate height classes or ID"s I assume that this is the same the width ones? Just I need to make sure that I apply it to all boxes, so separate ones for each one?
I have applied the Cache Killer as I am also having problems with one of the pages not showing it's footer in Chrome, it is there but not on view, which is very frustrating, so hopefully this will solve it!
Many thanks again for your help,
Sally
Hey Sally,
Any progress on fixing these issues? If you share a link to a problem page I may be able to give better advice.
Hi, sorry decided to move away from the contact form for a while and do the rest of the site. Then when I came back, saw your mention about Happy Forms and problem solved, it is brilliant, thank you!
Hi,
i´ve got a problem with the textarea. I can´t manipulate the textbox via css using your code. Was there any changes since the time you made this video?
Greetz
There shouldn't have been. Have you double checked to make sure you have the correct selectors? If so, and it's still not working, can you send me a link to the form you're working on?
Thank's for the css this was helpful
You're welcome Bob, I'm working on version two of this video right now with even more CSS
how to change color of validation errors.
when we click on submit button message appears that
"your message has been sent"
than how we style and change color of that mesage
Hello, Thank you so much, you save me everytime, for me at first it didn't work until I added !important; after every code line,
Hi Souhila,
Good work getting it working! The reason you had to add !important is because you have other CSS that's overwriting the CSS you added. You could spend some time finding the conflicting CSS rules, but !important is much easier. Thanks for watching!
I have watched both of your videos for this and neither cover styling the file upload button, how can this be done?
Hi Elliot,
I haven't created CSS for the upload button yet. I'm going to be adding more to this video set and blog post soon.
@@wplearninglab Hi there. thank you very much for your tutorial, but is it possible to customize via CSS the Upload button that is terrible :D ?
Hi - just wondering if you can show how to change/remove the font awesome loading icon in CF7 after pressing the submit button? I'm trying to change it for a different loading gif found online which I've added to my media in the backend, Thanks in advance. :)
Thank you very much. Amazing video.
You're welcome, thanks for watching!
Hey thanks for the tutorials really helpful! I wanted to ask you if there was anyway to add custom styling to radio buttons e.g. change the blue colour that shows up when an option is selected to a colour of your choice, and change the gap size between the radio button and the label (at the moment for my form they show up right next to each other with no gap and looks terrible). Thanks!
You sure can with CSS. Check out this CodePen (codepen.io/AngelaVelasquez/pen/Eypnq) where you can edit the HTML and CSS live and see the changes. Once you have created the look you like you should be able to copy the CSS into your site, update the selectors and it should work.
Let me know if that helps and thanks for watching!
Thanks heaps, that page leads to a 404 for me, maybe you need an account to access? I am using X theme on WP which allows you to add and see custom CSS so can probably just do it on site ( have for the rest of the form), just can't seem to target the radio buttons, does this look correct to you?
/*radio styles*/
.wpcf7 input[type="radio"], .wpcf7 .wpcf7-select {
colour:green;
margin:0.8em 0.5em;
}
That's strange, I don't have account with CodePen and the page opens for me...
This one should work better (code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/). The visuals are different but the result is same; CSS applied to radio buttons and their labels.
/*radio styles*/
.wpcf7 input[type="radio"], .wpcf7 .wpcf7-select {
colour:green;
margin:0.8em
}
Looks correct, but the selectors are always the trickiest because you may need more selectors before .wpcf7 depending on the page template.
.wpcf7 input[type="radio"] should be selecting your radio buttons, but not the labels. To get the label you have to try something like
/*radio styles*/
.wpcf7 input[type="radio"] label, .wpcf7 .wpcf7-select label {
colour:green;
margin:0.8em
}
You can also try this:
/*radio styles*/
.wpcf7 input[type="radio"] label, .wpcf7 .wpcf7-select label {
colour:green !important;
margin:0.8em !important;
}
Adding !important forces your styles to applied even if other styles should be taking precedent.
I hope that helps!
Issue with links must of been a Chrome thing, I got another 404 but tried in firefox and worked fine :) Thanks for sending this through I really appreciate it, managed to fix spacing issue by using !important so thats great, weirdly I still can't change colour but i'll have a play with the CSS outlined on stephenmorley.org and see what I can do, probably has something to do with having to select a special checked class or something.
Got there in the end! thanks again for your help and your videos. Below is the code I ended up using if anyone else has the same issue:
*radio styles*/
.wpcf7-form-control-wrap input[type="radio"] {
position: absolute !important;
left: -9999px !important;
}
span.wpcf7-list-item-label {
position: relative;
padding-left: 20px;
}
span.wpcf7-list-item-label:before {
content: '';
background: #cecece;
width: 15px;
height:15px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
border: 4px solid #cecece;
}
.wpcf7 input[type=radio]:not(old):checked + span:before {
background: rgb(71, 69, 81);
}
Any way to get the submit button to the buttom/left of the popup, not aligned to the inputfields?
Do you have a video that has a list of codes to edit fields? I need to adjust height, width of fields, etc. I also want validation to be faster vs showing an error after you hit the submit button.
Hi Gerald,
I don't have a list of different CSS commands for input fields. But if you Google "CSS input height", for example, you'll find the code you need.
To have validation after someone clicks out of a field you'll have to custom code it. You can use jQuery to detect "onBlur" of a field. Then jQuery can compare what's in the field with what should be in the field and then display (or not) an error message almost instantly.
The error message would always be on the page, but it would be hidden using the CSS command display:none
Then if an error is detected jQuery would change it to the display:block or display:inline to show the error message.
Does that make sense?
Thanks for your help and your response. I will try to Google "CSS input height" and hopefully I am able to find what I need.
It sort of makes sense but I will have to look into jQuery and see if I can figure it out.
Thanks again for your help.
Please, how to span cols and rows, in order to fields set up like name, email and phone in the same row and message in the below row only? Tks.
Hi Laercia,
Sorry for the delay! Are you creating your fields inside an HTML table? To use span cols and rows you table code.
Helo good video, i have a question how can i change the width of the subit buton in contact form 7am using cf7 plugin
Hi Arismendy, I think this button generator video will help you customize the width of your submit button as well as many other things to improve the button: ruclips.net/video/L06Nr6LaDI0/видео.html
Let me know if that helps or not!
I always watch your stuff. I changed the submit button colour and size but the rest is not saving. why?, please explain?
This sounds like a caching issue. There are some other tricks you can try to force your CSS changes to be applied:
1. Try a hard refresh: Ctrl + Shift + R on your keyword for Windows or CMD + Shift + R on a Mac
2. If you're using Google chrome check your site in a different browser like FireFox to see if the changes are applied.
3. If you have a caching plugin like W3 Total Cache or WP Super Cache installed, clear its' cache and deactivate it while you're making CSS edits.
Let me know if any of those options fix it.
@@wplearninglab
Ye, restarted the macbook and now it worked.
Hi I was speaking to a IT consultant the other day. he works for a firm and they where being hacked.
he changed the htaccess file in wordpress, to stop all the traffic coming through one port. I don't exactly know what he did to it. could you make a tutorial in showing us how to prevent hacks to wordpress site. or when large amount of traffic is coming in from one source. if you have and article could you direct me to the right direction please.
thank you in advance.
ps love your vids! they r the best on youtube
Hi Ashan,
He probably did it like in this tutorial: ruclips.net/video/f6S5K-1fek4/видео.html
That will show you how block IPs via .htaccess. This Wordfence tutorial will show you how to find the IPs that are repeating trying to access your site. You could also find this information using server logs: ruclips.net/video/CWOP7BKEw7s/видео.html
Wordfence is a great plugin, but it can use a lot of server resources. I hope that helps!
Thank you for all....
Awesome! Thanks for the help.
You're welcome, I'm happy to help. Thanks for watching! Let me know if you have any questions 😄
Hi there. How to have a handclick icon on send button? Thanks
hi my name is Pilot, and I new with wordpress and themes so i tried following your video concerning creating 2 columsn in contact form 7 it was going on well up to the point where i had to locate the custom css option from my theme option which i could not find so i got stuck please can you help me.? I am using Thim Press / Eduma theme
Hi Pilot,
I've made a tutorial just for this issue. Check it out here and let me know if it helps: ruclips.net/video/vLSUWT9MNlA/видео.html
thanks from Brazil.
You're welcome from Canada Silas, thanks for watching!
I am using 2 different contact forms on my website. How can I add the CSS and have it only style one not both? Thank you.
Hi Edwin,
Good question. The easiest way is to add a div around the form in the form editor and give that div a class. Then use that class in your CSS selector.
For example:
[All the form code]
Then for the CSS selector use .form1 .wpcf7
I hope that helps, let me know if you have any further questions. Thanks for watching!
Your the man. Thanks for the quick response, I'll try this out. Happy Holidays!
Great tutorial!
But how can I change the font being used?
+Arvid Ottosson Hi Arvid, inside any of those CSS rule blocks you can add the font-family property to change the font.
You can apply the Google font library using this plugin and tutorial: ruclips.net/video/iv8mCqN2gv8/видео.html
If you want a crash course on the CSS fonts check out this tutorial from my new channel: ruclips.net/video/P7MkNIC8iMY/видео.html Fast forward to 4 minutes and 10 seconds.
I hope that helps and thanks for watching!
WordPress Tutorials - WPLearningLab
thanks alot!
+Arvid Ottosson You're welcome, let me know if you need more help and thanks for watching!
Hi again, I tried changing font family by watching the tutorials but I'm just too much of a newbie.
Could you please tell me what to write in the customs CSS so I can paste it in:
Font family: Amatica SC
Size 35: (and the button text size 45).
That would be greatly appreciated.
Thansk again for great tutorials! Best regards Arvid
+Arvid Ottosson Hi Arvid,
Can you send me a link to the form? The CSS would have different selectors for every website.
thank you for always being helpful :)
I have another problem, you may have the solution to. I'm trying to establish a redirect to a thank-you page (for tracking), when the user submits the form. However, getting this to work has turned out to be a real pain. The on_sent_ok method is only working on some forms (and only as long as Google allows it, apparently), and the Succes Page Redirect plugin, which should make this a slam-dunk, is not working either. Any ideas? A tutorial on this topic would be awesome. :-)
Hi Alex,
I think I know how to fix it and I can make a tutorial on that, but it will be a 'hack' job. I'll have to do some testing first to see if my idea works!
just my 2 cents i have recently created this plugin called "Innozilla Skins for Contact Form 7" and it will really help you style your "contact form 7" Form..
the css im adding here is not mobile responsive. my form is not responding to a mobile device where is the code to make this responsive or is this a theme issue?
Hi,
Do you know, how to add "Post" automatically into subject?
Thank you
How to I adjustment the font, size, and color of the "placeholders" in CF7. I'm not using the labels for the fields
And also, if you want the text to be Bold / Strong, just write the following:
yourtext
Another great tip, thanks Mike!
@@wplearninglab No, thank YOU. A big fan of your videos. Keep up the good work! :-)
Thanks man! I plan to keep making them for a long time 😀
How can we separate CSS styling if we want to make 2 forms?
good evening how are you? How can I change the traditional send button by the WhatsApp sending icon and how can I move the button and upload it to the middle of the message block in a corner?
Hi Carlos, I'm very well, thanks for asking.
You can add the WhatsApp icontl to the send button using font awesome.
You can move the send button to anywhere on the page using CSS.
I don't have a tutorial specific to either of those situations, but I know it can be done.
Sorry I can't be of more help and thanks for watching!
@@wplearninglab Many thanks for respoderme, if I can do it, then I tell you how I did it
Regards!!
Hey, I am looking for a booking plugin which allows me to block dates freely, as in if someone books 05/05/2017 the form will display that date as unavailable or don't show it at all.
thank you i love you
Thank you for your tutorials. Unfortunately your CSS doesn't work on my site: I use a child theme (WP Dante theme, Swiftideas), I paste and save the CSS but nothing happens. I've tried CSS also in the main theme editor but it's the same. Any idea to solve the problem?
+Roberto Balò Hi Roberto, a couple things to try in this case are:
1. If you have a caching plugin installed deactivate it and clear it's cache, then clear the browser cache and see if the CSS is applied.
2. If you're using Google Chrome, try viewing the page with a different browser because Chrome has a pretty bad caching bug that keeps old CSS for a very long time.
A combination of those two should fix the issue. Let me know how it works!
Thank you for your quick answer. Unfortunately it still don't work. I'll contact the swiftideas support. I'll let you know.
Hi! I solved the issue with the field confirm_email with this code:
.wpcf7-form input[type="confirm_email"] {
background:#f7f7f7;
width:95%;
border:1px solid #e4e4e4;
padding:6px 7px;
margin-bottom:10px;
}
Thank you again!
+Roberto Balò Awesome, good work Roberto. I'm glad it finally worked!
Thank you very much!!!
You're welcome, thanks for watching! Let me know if you have any questions :)
styles are nice. but how do you make it responsive?
Hi Miguel,
Changing all the input fields to a % width should make it responsive. You wouldn't need to use media queries for a simple form, but if your form is complex check out this post by Chris Coyier: css-tricks.com/snippets/css/media-queries-for-standard-devices/
I hope that helps and thanks for watching!
thank you oh kind sir
Would I have to input all the style differentiations for every device? Also, this page seems a bit outdated. Would these examples still work?
hi how can i make it that the thank you your message has been sent does not appear diasable the confirmation message when user click submit
For some reason, no matter what I do the submit button will not change at all, however, anything I do for .wpcf7 will change the rest of the form.
Your are the #1 !
Thanks, I appreciate it :). Thanks for watching!
Hi!!
My contact form uses the whole width of my page. How can change it to make it smaller? Thanks in advance
Hi Jeannette,
If your theme has an easy way to create columns on the page then you can make 3 columns and put the form in the center column to reduce it's size. The Visual Composer plugin found in many themes can do this.
The other way is by changing the width of the input fields to be smaller. You can use the same CSS selectors as in this video but add:
width:200px;
to the CSS rules for any field. Then see if that is the width you want. Then keep changing that width until you've found the one you want and then apply that width to all the fields.
I hope that helps and thanks for watching!
Many thanks !! It works a litte because it reduced input fields but background is using whole area but it looks better than before. Thank you
+Jeannette Guajardo Hi Jeannette, if your browser is Chrome or Firefox you can right click on the background and choose Inspect or Inspector from the menu. That will show you the page code and highlight the background element. From there you should be able to figure out a CSS selector you can use to update the background.
I hope that helps!
OK Thanks!!
Contact Form 7 CSS to Style CF7 Submit Button, Inputs, Fields and Dropdown ruclips.net/video/bKarC0QO5og/видео.html
can you please tell how to resize the drop down menu ?
Hi Mehak,
I've updated the blog post with CSS for this: wplearninglab.com/contact-form-7-css-style-almost-anything/
It's the very last code box on the page. You can change the value for the width to whatever you want, but you have to make sure to follow it with a unit: %, px, em or rem.
I hope that helps and thanks for watching!
When I insert the shortcode into my Elementor Theme, the max width is barely 25% of the box. I have no idea why it is doing this
Can users edit their own forms in the front end of CF7?
Hi Uriel,
I've never tried to create that sort of functionality. Would open-ended questions work as a solution?
Hi, I know this tut is months old, but hope you can help me.
I followed along and everything worked except when entering text into the email field, the text is red. If I then click into a different field area the email text turns to #fff which is what I want. So that is weird and I would like it to always be white. I'm using OceanWP theme if that helps any.
It sounds like your theme may have some CSS rules in place that are making the text red.
Try something like
.wpcf7 input[type=email]:focus {color:#fff;}
or
.wpcf7 input[type=email]:focus {color:#fff !important;}
Those may not be the right selectors for your site, so make sure you have the right selectors. Also make sure you have the :focus pseudo-selector in place.
Let me know if that works.
Thanks for your help. Sorry but how does one find selectors? Obviously I'm a newb.
Hi, could you tell me how to change the color of first_as_label for the dropdown box
Hi Jacqueline,
Is first_as_label is class or the ID of the item you want to change color of? Are you trying to change the color of just the first item in the dropdown?
Thank you so much...
You're welcome, thanks for watching!
you're the bset!
Thanks and you're the best too! :)
Hi I have been trying to change icon color on click (output as focus). I have managed to change contact form field border as focus but couldn't make changes to icons. I have applied following css code:
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-select,
.wpcf7 .wpcf7-textarea{
text-indent: 30px;
font-family: Roboto;
width: 100%;
height: 42px;
border: 1px solid #0d5509 !important;
border-radius: 4px;
color: #959595;
}
.wpcf7 p{
position: relative;
}
.wpcf7 p .fa{
position: absolute;
color: #0d5509;
z-index: 1;
font-size: 15px;
top: 30%;
left: 1.5%;
}
.wpcf7 p .fa-pencil{
top: 5%; left: 1.5%
}
.wpcf7-text:focus, .wpcf7-select:focus, .wpcf7-textarea:focus{
border:2px solid #ff0000 !important;
border-radius: 4px;
}
my contact page link: eoe.gipcl.org.uk/contact
and I wish to make it like this: it.gipcl.org.uk/contact
I would really appreciate if you help me in this.
Thank you in advance
I can't find the custom CSS box in my theme ! I am using the Hueman theme
+Rash N Hi Rash, there may be some other places to add CSS. Check out this CSS tutorial: ruclips.net/video/vLSUWT9MNlA/видео.html
I hope that helps and thanks for watching!
Many thanks to you!!!!! do you also have a tutorial on how to format the header text on a website? the theme I have does not allow many font functionalities unfortunately and I already tried CSS Siteorigin, it did help change the background color of the ribbon, but not with the text!
Hi Rash, when you say change the font do you mean change the font family or the font color?
I can't change anything about the font- neither the color nor make it Bold
+Rash N Can you paste a link into the comments and tell me which word/words you're trying to change?
How can I add space between the different fields?
Hi Alessandro,
You should be able to add space between fields using margin. Check out this help page on CSS margins (www.w3schools.com/css/css_margin.asp). As long as you have your selectors right this will work.
I hope that helps and thanks for watching!
What about the upload file button,Can you make a vid about it?
Hi Raol, do you mean a tutorial showing how to style the file upload button or how to use it?
Hi Roal,
I whipped up some quick CSS to make the file upload button/area look much nicer. I've added the code to the blog post: wplearninglab.com/contact-form-7-css-style-almost-anything/
Let me know what think or if you'd like to know how to style other components!
Danke
Bitte 🙂
how to make contact form 7 responsive?
I asked him on twitter but no luck there, (busy man i'm guessing lol) hopefully someone can help. I have a contact form on my front page that is massive. I want it significantly smaller, how can I achieve this? Thanks in advance.
If you're referring to me, RUclips comments and the FB private group (Facebook.com/groups/wplearninglab) are the best places to get my attention.
Why is your form massive? Lots of input fields or big input fields? Do you have a link you can share?
Great (Y)
Thanks Farhad and thanks for watching!
hi, can you make a video of how to monetise a website. I blog 4-6 hours a day, I have good quantity of readers yet I make nothing.
google ads has always got one problem or other with me and the keep disabling ads. sick of them. need another way to make money on my blog
Hi, I definitely can make a video on monetisation. The most lucrative ways to monentise a blog is by offering affiliate products (other people's products from which you get a commission when you sell them) or your own products. Is that a possibility for your blog?
yes, it is. Thanks
The fast thing will be to promote affiliate products. You may be able to find some by Googling:
"Your Topic" and affiliate program
You may also be able to find some in the Clickbank marketing place (all digital products) or Commission Junction or Share-a-Sale (mostly physical products).
The benefit of promoting affiliate products first is that you can start making sales and you can see what your audiences like the best. Then you can create or source similar products and sell them as your own to increase your margins.
WordPress Tutorials - WPLearningLab
Thanks for the insight. you are a very patient and good teacher. Thanks soo much
Thanks, I do what I can :)
The selectors are important, Why aren't you teaching how to make selectors out of Contact Form7 input fields.
I think you have missed a really big step!!!!
Like how the hell do you get the CSS code into WordPress?
Yes, I know copy paste, but what buttons do I press to magically make WordPress open the right window to open the right window to paste the magic code into?
+Martin Gregson Hi Martin, good question. And you're in luck, here's a tutorial showing you 4 different places to add CSS: ruclips.net/video/vLSUWT9MNlA/видео.html
Depending on your theme and plugins you may only have one of these options or you may have all 4.
I hope that helps and thanks for watching!
Hi, great video! I'm wondering how to change the input box. Instead of the box I'd like to have a line (here an example: urbaninfluence.com/contact/ ).
Thanks in advance!
Cedrik
Great question Cedrik. I've updated the CSS on the blog post to include the code you need (wplearninglab.com/contact-form-7-css-style-almost-anything/). This code will make the form input look just like the example form you sent. On the blog post look for the code box with this CSS comment, "Turn an input box into an input line".
I hope that helps and thanks for watching!
Well, that was easier than I thought :D. Thanks a lot!
+Honey Badger Things are often easier that we think. You're welcome. I've been meaning to add more code to that post, so thanks for the inspiration!
Hello Bjorn,
graet tutorial and ive done so much from this video but how the hell can i change that section(I marked it on picture)
WHAT is the css code???please help me out if you can
I just added to my browser but id like to add it to CSS too so all can see :D
ibb.co/ihvDaa
many thanks
???
Hey Tamas,
Sorry for the delay. Thanks for the picture.
Using the selector .tb-column-inner doesn't work? You could also try .module_column_5-9-2 or have you tried those to in your CSS already?
i solved it in a diferent way the problem is im not a coder but im really not far to understand how this thing works lol :D
now im having another challange and managed to change the drop down menu but I want to specify a specific drop down it has a name=hour
so far my code is like this
.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
width: 45px;
}
but its changes all drop down menu on my page and i want to change only 1 "called hour"
any help? :D here is the picture
ibb.co/e8iFqa
i have a feeling only the name missing so it will tell which drop down to modify... but i have no idea about the form :(