How to Style Contact Form 7 With No Coding

[@Mandulina]

Oh man, you don't know how often you had helped me with my website these last few days! Thank you!!!

[@raygringo]

Man, haven't had to use CF7 on a project in at least a couple of years....until today. This video saved me so much time styling this site's CF7 forms. Can't thank you enough for making this video! By the way GR63 & Merc!!! Woo hoo!

[@valeriibezrukov1226]

Thanks, just what i needed, had problems with mobile responsivness, selector detector helped

[@jpoland00]

this video provided the perfect answer to my mobile form field styling question!!!

[@s.hammad]

That was extremely helpful. A huge thanks from a UI/Ux designer who is new in oxygen as I don't know how to code :) This helped a lot. Can you create more similar content, something like "No Coding Series" where you do your magic but just visually. I strongly believe that this will help a lot of users.

[@sagar-prasai]

Dear Johnathan, It is a very helpful video. Just one point though, the black border you referred is the one that is normally added to focusable elements by some browsers esp. Chrome for accessibility. It really helps people with vision problems to know where their current keyboard focus is. Thus, if all the developers use {outline:none} then,web would super inaccessible to persons with disabilities. So please don't encourage your users to do that. Infact, if you have some time, why don't you do a tutorial on how to make accessible website for all users using oxygen :). On that note, thank you again for all the effort. I am your regular viewer from Nepal.

[@Permaslug]

Thanks for the heads up, I show later on how to add your own focus border for the sake of flexibility. I appreciate you watching!

[@letress]

Thanks for very helpful video. Only thing you forgot is styling a labels (which i figured out), but also styling invalid/required alert. Any tips to do that?

[@alterovstudio]

Great tutorial, for changing coursor into pointer select button and add CSS without brackets: cursor: pointer;

[@ZiarMedical]

any idea why nothing happens when i style the form? I have the same issue as Matias Aburto

[@thebibleproof]

As always, great content!

[@Permaslug]

Thanks so much!

[@ManolManolov]

Very helpful - thank you so much for this tutorial!

[@Permaslug]

Glad it was helpful!

[@lazydude1104]

how do I change the color of message sent succesfuly or the error messages

[@kotkotan]

Thanks for tthi tutorial! What to do if I need 2 different styles contact forms on one site? How ti separate styles in Oxy?

[@Miloholistic]

For some reason when I tick the enable selector detector and press "save", the tick automatically removes itself. Not sure whats going on. Since I couldn't tick it, I have not continued to watch the video since I guess it's pretty important that it stays ticked! Any ideas anyone as to why that might be?

[@mcAmendi]

The selectors are strange . Sometimes I can give selectors a "Friendly Name" and move them to a folder. Others, on the other hand, cannot be moved and cannot be renamed. The class simply remains as a name. I would like a little more order so that I can keep an overview.

[@yofredgs]

Excelente bro! Me ayudó!

[@Rajjjj19929]

Just did this yesterday on my own! Great video though, thumbs up :) P. S. I tried different tweaks but I have not been able to create a two column form contact, do you have any suggestions in that matter?

[@Permaslug]

That would require changing/adding divs, which I don't think you'll be able to do without modifying the plugins php files. Perhaps there's a plugin that enables layout options, but I'm not a CF7 expert by any means

[@matiasaburto64]

Why i cant style my forms? i mean, some styles are working, but most of them doesnt seem to do anything, for example, when i change bg color it works, but padding, margin, width, height and a lot of other attributes doesnt work at all

[@ZiarMedical]

Same for me

[@Testfortest142]

Where is that css line code? You didn't post it in the comments. Otherwise, very helpful though! was just trying to style my contact form and then you uploaded this video haha.

[@Permaslug]

Sorry about that, added in the description. Thanks!

wow