I've created a Contact Form 7 playlist with a bunch of videos explaining how to do almost anything with CF7: kzread.info/head/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: kzread.info/head/PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV

@md.tariqulislammanon7823

6 жыл бұрын

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

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!

@wplearninglab

5 жыл бұрын

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 :)

The best video on how to style the CF7!

@wplearninglab

6 жыл бұрын

+Salvatore Escalante Thanks Salvatore!

Thank's so much for the CSS. Be blessed.

@wplearninglab

7 жыл бұрын

+Salducci Kheira You're welcome, I'm glad it helped you. Thanks for watching!

Super helpful, easy-to-follow and well-explained. Thank you so much.

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!

@wplearninglab

6 жыл бұрын

+Toyinsola Lydia Oduyale Great work Toyinsola! Knowing a little bit of basic CSS always comes in handy with almost any website.

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!

@wplearninglab

5 жыл бұрын

You're welcome, I'm happy to help! Thanks for watching!

Thank you for all....

Useful video! Make the difficult CSS easy for me!!! THX!

@wplearninglab

6 жыл бұрын

Great! I'm glad I could help. Thanks for watching!

thank you for always being helpful :)

Thank's for the css this was helpful

@wplearninglab

6 жыл бұрын

You're welcome Bob, I'm working on version two of this video right now with even more CSS

Realy very good and helpful🤗

Extremely Helpful!! Thanks!

@wplearninglab

6 жыл бұрын

You're welcome Ben, glad I could help!

thanks from Brazil.

@wplearninglab

6 жыл бұрын

You're welcome from Canada Silas, thanks for watching!

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 :-)

@wplearninglab

5 жыл бұрын

Great tip, thanks Mike!

Awesome! Thanks for the help.

@wplearninglab

5 жыл бұрын

You're welcome, I'm happy to help. Thanks for watching! Let me know if you have any questions 😄

Thank you very much. Amazing video.

@wplearninglab

6 жыл бұрын

You're welcome, thanks for watching!

Very good. Thank you very much !!!!

@wplearninglab

2 жыл бұрын

You’re welcome Alexandre, thanks for watching!

thank you i love you

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,

@wplearninglab

4 жыл бұрын

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!

best teacher !! 😀

@wplearninglab

2 жыл бұрын

Thanks and thanks for watching!

Thank you very much!!!

@wplearninglab

5 жыл бұрын

You're welcome, thanks for watching! Let me know if you have any questions :)

Your are the #1 !

@wplearninglab

5 жыл бұрын

Thanks, I appreciate it :). Thanks for watching!

Thanks , excellent explanation but i have question how can i make more than one drop downs on the same line?

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?

Thank you so much...

@wplearninglab

6 жыл бұрын

You're welcome, thanks for watching!

Great videos! How do you reduce the spacing between the field boxes so I can squeeze in more field boxes?

@wplearninglab

6 жыл бұрын

+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: kzread.info/dash/bejne/poSTzbp7erq2mLQ.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 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.

@wplearninglab

5 жыл бұрын

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!

you're the bset!

@wplearninglab

6 жыл бұрын

Thanks and you're the best too! :)

Hi, Do you know, how to add "Post" automatically into subject? Thank you

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

Thanks for the video... Anyone knows how can i always display arrows in number field?

Great video, how to color background field "Your message",plz? Thx

How to I adjustment the font, size, and color of the "placeholders" in CF7. I'm not using the labels for the fields

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..

Thanks for the great videos. Unfortunately, none of it is working on my site. Not sure why...

Danke

@wplearninglab

4 жыл бұрын

Bitte 🙂

Great tutorial! How do I make the title of each field appear inside of a field?

@wplearninglab

6 жыл бұрын

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 - 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, 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.

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?

@wplearninglab

6 жыл бұрын

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!

@ZamirGomeh

6 жыл бұрын

Hi Bjorn thank you so much

@wplearninglab

6 жыл бұрын

Any time :)

Hi, Can you make a video on how to add a scrollbar to the form? Thanks!

@wplearninglab

4 жыл бұрын

So instead of the scrolling down the page, you want visitors to scroll down the form?

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?

@wplearninglab

Жыл бұрын

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

@roccomarsico

Жыл бұрын

Thanks very much for the tips, I appreciate it very much. Once again, thanks very much for your videos, very well made and helpful.

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 ?

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.

@wplearninglab

7 жыл бұрын

+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!

@bankoledada

7 жыл бұрын

www.wpthemedetector.com/ free wp theme detector will show you what theme was used and plugins used and more

@wplearninglab

7 жыл бұрын

+bankole dada Good tip! Thanks for sharing!

Hi there. How to have a handclick icon on send button? Thanks

Any way to get the submit button to the buttom/left of the popup, not aligned to the inputfields?

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!

@wplearninglab

5 жыл бұрын

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!

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

@wplearninglab

6 жыл бұрын

Hi Alana, Sorry for the delay. Check out this tutorial for using media queries to change the size on mobile: kzread.info/dash/bejne/paJ8mLuwc6urn6g.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.

HI, great tutorials, I have a question: How to style Upload file button and put custom placeholder like "Upload ypur file"?

@wplearninglab

6 жыл бұрын

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"?

@alenmatovina8489

6 жыл бұрын

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?

And also, if you want the text to be Bold / Strong, just write the following: yourtext

@wplearninglab

5 жыл бұрын

Another great tip, thanks Mike!

@MikeRansby

5 жыл бұрын

@@wplearninglab No, thank YOU. A big fan of your videos. Keep up the good work! :-)

@wplearninglab

5 жыл бұрын

Thanks man! I plan to keep making them for a long time 😀

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?

@wplearninglab

7 жыл бұрын

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: kzread.info/dash/bejne/nniOxbpuoNW3c5M.html For putting two input fields on the same line, I think this tutorial (kzread.info/dash/bejne/paJ8mLuwc6urn6g.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: kzread.info/dron/5vKV-35odZlYXVQ_G0sSsg.html. 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!

@AlexPaulsen1

7 жыл бұрын

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. :-)

@wplearninglab

7 жыл бұрын

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.

Helo good video, i have a question how can i change the width of the subit buton in contact form 7am using cf7 plugin

@wplearninglab

7 жыл бұрын

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: kzread.info/dash/bejne/fmRqsNRvfMSqeZM.html Let me know if that helps or not!

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!

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?

@wplearninglab

6 жыл бұрын

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: kzread.info/dash/bejne/dZmbzdyNm8a3oZM.html I hope that helps and thanks for watching!

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. :-)

@wplearninglab

7 жыл бұрын

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!

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

@wplearninglab

5 жыл бұрын

Hi Praveen, I use Screenflow for Mac. Camtasia is equivalent software for Windows.

Hi, could you tell me how to change the color of first_as_label for the dropdown box

@wplearninglab

4 жыл бұрын

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?

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.

@wplearninglab

6 жыл бұрын

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?

@diegomarr

6 жыл бұрын

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.

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.

@wplearninglab

7 жыл бұрын

+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!

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.

@wplearninglab

6 жыл бұрын

Hi Laercia, Sorry for the delay! Are you creating your fields inside an HTML table? To use span cols and rows you table code.

can you please tell how to resize the drop down menu ?

@wplearninglab

6 жыл бұрын

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!

I have watched both of your videos for this and neither cover styling the file upload button, how can this be done?

@wplearninglab

5 жыл бұрын

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.

@federicomazza9130

4 жыл бұрын

@@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 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

@wplearninglab

7 жыл бұрын

Hi Ashan, He probably did it like in this tutorial: kzread.info/dash/bejne/mGqHl61mYcnLm5c.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: kzread.info/dash/bejne/dYuDspl7e6jdZ9Y.html Wordfence is a great plugin, but it can use a lot of server resources. I hope that helps!

Great (Y)

@wplearninglab

6 жыл бұрын

Thanks Farhad and thanks for watching!

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

@wplearninglab

6 жыл бұрын

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?

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

@wplearninglab

5 жыл бұрын

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: kzread.info/dash/bejne/dZmbzdyNm8a3oZM.html I hope that helps and thanks for watching!

@SallyLeeDuffyTSI

5 жыл бұрын

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

@wplearninglab

5 жыл бұрын

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.

@SallyLeeDuffyTSI

5 жыл бұрын

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!

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!

@wplearninglab

6 жыл бұрын

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!

@premiumpetportraits8390

6 жыл бұрын

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; }

@wplearninglab

6 жыл бұрын

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!

@premiumpetportraits8390

6 жыл бұрын

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.

@premiumpetportraits8390

6 жыл бұрын

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); }

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

How can we separate CSS styling if we want to make 2 forms?

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

I always watch your stuff. I changed the submit button colour and size but the rest is not saving. why?, please explain?

@wplearninglab

5 жыл бұрын

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.

@revelation333

5 жыл бұрын

@@wplearninglab Ye, restarted the macbook and now it worked.

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.

@wplearninglab

4 жыл бұрын

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!

@justaskdad

4 жыл бұрын

Your the man. Thanks for the quick response, I'll try this out. Happy Holidays!

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.

@wplearninglab

6 жыл бұрын

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.

@abr2926

6 жыл бұрын

Thanks for your help. Sorry but how does one find selectors? Obviously I'm a newb.

Can users edit their own forms in the front end of CF7?

@wplearninglab

6 жыл бұрын

Hi Uriel, I've never tried to create that sort of functionality. Would open-ended questions work as a solution?

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.

@jasonmckoy243

7 жыл бұрын

Also looks like in your code you are using something datetime* looks like a function from plugin.

@wplearninglab

7 жыл бұрын

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: kzread.info/dash/bejne/p3-Np61qqZPOfs4.html I hope that helps!

Great tutorial! But how can I change the font being used?

@wplearninglab

7 жыл бұрын

+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: kzread.info/dash/bejne/m6psz6WqfpXNpps.html If you want a crash course on the CSS fonts check out this tutorial from my new channel: kzread.info/dash/bejne/gmuBzbCCc5vPfbw.html Fast forward to 4 minutes and 10 seconds. I hope that helps and thanks for watching!

@ottossonarvid

7 жыл бұрын

WordPress Tutorials - WPLearningLab thanks alot!

@wplearninglab

7 жыл бұрын

+Arvid Ottosson You're welcome, let me know if you need more help and thanks for watching!

@ottossonarvid

7 жыл бұрын

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

@wplearninglab

7 жыл бұрын

+Arvid Ottosson Hi Arvid, Can you send me a link to the form? The CSS would have different selectors for every website.

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 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

@wplearninglab

6 жыл бұрын

Hi Pilot, I've made a tutorial just for this issue. Check it out here and let me know if it helps: kzread.info/dash/bejne/qICHt7mNabC0nKQ.html

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?

@wplearninglab

6 жыл бұрын

+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!

6 жыл бұрын

Thank you for your quick answer. Unfortunately it still don't work. I'll contact the swiftideas support. I'll let you know.

6 жыл бұрын

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!

@wplearninglab

6 жыл бұрын

+Roberto Balò Awesome, good work Roberto. I'm glad it finally worked!

Hi!! My contact form uses the whole width of my page. How can change it to make it smaller? Thanks in advance

@wplearninglab

7 жыл бұрын

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!

@jeannetteguajardo2551

7 жыл бұрын

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

@wplearninglab

7 жыл бұрын

+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!

@jeannetteguajardo2551

7 жыл бұрын

OK Thanks!!

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?

@wplearninglab

5 жыл бұрын

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!

@picuss17

5 жыл бұрын

@@wplearninglab Many thanks for respoderme, if I can do it, then I tell you how I did it Regards!!

How can I add space between the different fields?

@wplearninglab

6 жыл бұрын

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!

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.

styles are nice. but how do you make it responsive?

@wplearninglab

6 жыл бұрын

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!

@miguelmejia4656

6 жыл бұрын

thank you oh kind sir

@miguelmejia4656

6 жыл бұрын

Would I have to input all the style differentiations for every device? Also, this page seems a bit outdated. Would these examples still work?

What about the upload file button,Can you make a vid about it?

@wplearninglab

7 жыл бұрын

Hi Raol, do you mean a tutorial showing how to style the file upload button or how to use it?

@wplearninglab

7 жыл бұрын

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!

how to make contact form 7 responsive?

I can't find the custom CSS box in my theme ! I am using the Hueman theme

@wplearninglab

7 жыл бұрын

+Rash N Hi Rash, there may be some other places to add CSS. Check out this CSS tutorial: kzread.info/dash/bejne/qICHt7mNabC0nKQ.html I hope that helps and thanks for watching!

@rashn2065

7 жыл бұрын

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!

@wplearninglab

7 жыл бұрын

Hi Rash, when you say change the font do you mean change the font family or the font color?

@rashn2065

7 жыл бұрын

I can't change anything about the font- neither the color nor make it Bold

@wplearninglab

7 жыл бұрын

+Rash N Can you paste a link into the comments and tell me which word/words you're trying to change?

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 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.

@wplearninglab

6 жыл бұрын

If you're referring to me, KZread 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

@wplearninglab

7 жыл бұрын

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?

@lovelysandy2098

7 жыл бұрын

yes, it is. Thanks

@wplearninglab

7 жыл бұрын

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.

@lovelysandy2098

7 жыл бұрын

WordPress Tutorials - WPLearningLab Thanks for the insight. you are a very patient and good teacher. Thanks soo much

@wplearninglab

7 жыл бұрын

Thanks, I do what I can :)

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

@wplearninglab

6 жыл бұрын

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!

@honeybadger8478

6 жыл бұрын

Well, that was easier than I thought :D. Thanks a lot!

@wplearninglab

6 жыл бұрын

+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!

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?

@wplearninglab

7 жыл бұрын

+Martin Gregson Hi Martin, good question. And you're in luck, here's a tutorial showing you 4 different places to add CSS: kzread.info/dash/bejne/qICHt7mNabC0nKQ.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!

Contact Form 7 CSS to Style CF7 Submit Button, Inputs, Fields and Dropdown kzread.info/dash/bejne/lH-V1KVpgbKbn8o.html

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

@tamasszabo3679

7 жыл бұрын

???

@wplearninglab

7 жыл бұрын

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?

@tamasszabo3679

7 жыл бұрын

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 :(