Ah man. You have NO IDEA how much this has helped me. I was so afraid of the coding part. But thanks to you breaking the ice this, I dove so deep into the html and CSS of this form you have no idea... Thanks a lot!
Finally an explanation that works, Thanks ever so much, been searching for ages to get it right! Thanks from a very greatful (old) female computernerd from the Netherlands.
Without a doubt the best video I have seen on this so far, thank you. Can I ask how you change the colour of the text that the person would be typing on the form. It is set to black but on my site would like to change it's colour. Thanks in advance.
Liked and subscribed man! Thank you for putting it so easely to understand, also now I know where to add CSS in Wordpress for other purposes too. Thank you so much bro!
Nice quick explaination. Been trying to avoid forms for the longest time but now had a ton of tickets which involve them 😅😅. They just seem annoying to deal with especially when dealing with someone else’s code. So I’m thankful for this quick condensed video of yours to get my gears spinning with forms.
Great tutorial! Quick, informative and straight to the point, just like a tutorial should be. I subscribed and liked. Thanks very much. You should have an option on TH-cam to allow people to contribute some funds to you "buy me a coffee" that sort of thing. I, like many, will always be happy to donate when videos like this have saved money and time.
Love this. Got any CSS magic on how to line up a longer form into 3 or 4 columns? I know it has something to do with "float", but I'm not getting that...
How do I create an effect in the Contact Form 7, so that the completed field had, for example, a green border or a changed background color or had a check mark, to indicate the completion of the action.
How do you change the size of the text placeholder names and input text. When I look at my web from a mobile the placeholder name and when typing text in the boxes, visually, is very small! I'd be grateful for any suggestions please.
Hi man! Really need your help out here. I need to change the color of the font in the messages that you get upon submitting the form. My background is dark and the font is in black, thus my customers will miss the error- or required field messages, which could cause me on missing out on clients. Now i've been searching everywhere but no one seems to go over this topic. The only thing i need , is to change the color of the 'messages'' font, to white.
Hi. I followed your tutorial. I cannot get the css to work. I’ve watched video quite a few times. I wanted to change the send button on contact form 7. Do you have any suggestion.
Hi. The placeholders worked perfectly however on my mobile phone they stayed as labels above the text box instead of being placeholder? Any work around? Also can you use placeholders in dropdown menus? if so where would you add the placeholder code ?
Hello, I accidentaly deleted my old form but the problem is that every post and portfolio page of my website contained the id of this old form, and when I create a new form I simply cannot find a way to change the id, so that means either I´ll have to edit every single portfolio page of my site or I manage to find a way to alter the id somehow (and of course I´ll need to use the old id), how can I achieve the latter/? Any ideas? Thx!
Hi, I have a question. When someone fills the form and clicks the submit button, they get a message "Thank you for contacting us". The color of this message is by default black. How do i change the color of this message that appears after submitting. (My form's background color is dark, so the message is not visible at all).
Thank you so much for putting all this information together, I just upgrade my website having problems with Contact Form 7 and your video definitely help me solve the problem. Kudos
Good video mate, quick question about form 7, imagine i have a multiple choice or dropdown field , and let say one of the option is "No", is there any way yo form 7 to disable the summit button and maybe show a little message as to the reason for this
Our support team might be able to assist you with that. Head out to www.elegantthemes.com/members-area/help/ to open a chat and share the link to your website so they can take a closer look 😊
Great! Now, how do I add a "Send me a copy' check box so that the SENDER has a copy of what they wrote? This is something I really wish more of these forms on the internet had and would like to offer.
Thanks, but on my form the parts where you input answers go the same colour as background. I followed exactly what you wrote. any advice on that would be awesome thanks
Thank you for the great video! How do you change the predefined light gray font color that comes with the Contact 7 Form. When you type text in the field - the text is almost invisible. How do we write code just for that. I have clients how constantly complain about it. That would be a great help! Thank you so much for your time to show me the code!
Hi Eva, Add this code to your custom CSS in Appearance -> Customize -> Extras -> Custom CSS .contact-us input[type=text], .contact-us textarea { color: #000; } That should stop the complaints! :)
You're always welcome! Since you can assign a custom CSS ID to a custom field, you can use CSS font properties to adjust the font, size and color. If you need further assistance, open a chat with our Support Team and they will be happy to take a closer look. www.elegantthemes.com/members-area/help/ 😄
I have an Interesting Question regarding Contact Form 7, in the Mail tab of creating the form mail are there any tools or tutorials regarding a custom email template?
You can use the CSS code below to change the font in your Contact Form 7: .wpcf7-form p {font-family: ‘Abel’,;} If you need further help, open a chat with our Support Team and they will be happy to take a closer look. www.elegantthemes.com/members-area/help/
*Thank you for taking your time to explain this! Very helpful guide =)*
Ah man. You have NO IDEA how much this has helped me. I was so afraid of the coding part. But thanks to you breaking the ice this, I dove so deep into the html and CSS of this form you have no idea... Thanks a lot!
Helpful, thank you! Is there a way to change the button size and color?
My boss thinks I'm a total coding badass because of you. THANK YOU!!!!!!!!!!!!!!!!!!!!!!
Wow that's cool! You're always welcome! 😄
Finally an explanation that works, Thanks ever so much, been searching for ages to get it right! Thanks from a very greatful (old) female computernerd from the Netherlands.
yet in Sep 2023, this content is precious.
Best teacher online.
Without a doubt the best video I have seen on this so far, thank you. Can I ask how you change the colour of the text that the person would be typing on the form. It is set to black but on my site would like to change it's colour. Thanks in advance.
Hello, thanks for the tutorial, just a quick question: How do you change the button style?
You deserve big thumbs up for helping me save hours of research !!! 👉👍👍👍
Holy cow, came to learn how to custom use contact form 7, learned how to target elements and change them in css. Thank you!!
Liked and subscribed man! Thank you for putting it so easely to understand, also now I know where to add CSS in Wordpress for other purposes too. Thank you so much bro!
Nice quick explaination. Been trying to avoid forms for the longest time but now had a ton of tickets which involve them 😅😅. They just seem annoying to deal with especially when dealing with someone else’s code. So I’m thankful for this quick condensed video of yours to get my gears spinning with forms.
Thank you for sharing this information 👍🏻
Wow, you nailed it bro. I've been searching on how to do the placeholder in my wp7 form and thank you for the bonus you gave.
been great help!
Thanks bro. I was trying to figure out the best way to apply a fancy style on contact form 7. Your video was absolutely useful.🚀
Where do you find alll the classes ???? it takes me so much time to find the right classes in the dev tools ! nice Video !!!
Wow - excellent tutorial.
Subscribed!
Brilliant tutorial - so helpful and straight to the point that it leaves you wanting more. I subscribed:)
Thank you so much for your help. You helped me make my footer CF7 look amazing!
Great informative video. Contact From 7 has been a favourite plugin for sometime.
short and clean explanation! two thumbs up
Great video, thanks. How can I change the color of my "send' button through this CSS panel?
Great tutorial! Quick, informative and straight to the point, just like a tutorial should be. I subscribed and liked. Thanks very much. You should have an option on TH-cam to allow people to contribute some funds to you "buy me a coffee" that sort of thing. I, like many, will always be happy to donate when videos like this have saved money and time.
Dang... now wondering where the heck I was on April 13, 2018 to not have seen this sooner!!! :) Thank you!
Love this. Got any CSS magic on how to line up a longer form into 3 or 4 columns? I know it has something to do with "float", but I'm not getting that...
hey. Thanks a lot! Do u have a video showing how I can put the fields two beside each other and change their width?
Thank you, this is very helpful. Can you please help me with formatting "First Name" and "Last Name" so they are displayed side-by-side? THANK YOU!
Finally i understood how to modify CSS on CF/, Great! Thanks from Sicily!
brief, clean and helpful bro thank u so much!
Hy Buddy, those tipps are worth a fortune. Thanks a bunch.
You're welcome! 😄
Appreciate this tutorial. Thanks
How do I create an effect in the Contact Form 7, so that the completed field had, for example, a green border or a changed background color or had a check mark, to indicate the completion of the action.
thanks for this very helpful tutorial bro. Hats off.
That Helped a lot. Thanks
How do you change the size of the text placeholder names and input text. When I look at my web from a mobile the placeholder name and when typing text in the boxes, visually, is very small! I'd be grateful for any suggestions please.
i *was* looking to style the label text color, but the placeholder bit covered it - thanks!
You're welcome!
do you have a css code for the dropdown option?
Excellent tutorial. Straight to the point and very easy to follow. Thank you!
You're welcome!
I have been looking for this for a long time - thanks
th-cam.com/video/CPb5HdcoTww/w-d-xo.html
Oddly enough, only .wpcf7-textarea doesn't change the width. Can it be that WP versions differ here?
thats one goooooood video! thanks!
You're welcome!
Hi man! Really need your help out here. I need to change the color of the font in the messages that you get upon submitting the form. My background is dark and the font is in black, thus my customers will miss the error- or required field messages, which could cause me on missing out on clients. Now i've been searching everywhere but no one seems to go over this topic. The only thing i need , is to change the color of the 'messages'' font, to white.
really helpful for us your video
Great content. Thanks a lot
Thank you so much for this!
How do you change the color of the text to white from black? My CSS doesn't change in the customizer in WordPress.
Very useful. Thanks a lot!!!!
very helpful video, Thanks bro
varey nice bro !!!
love from pakistan
Hi. I followed your tutorial. I cannot get the css to work. I’ve watched video quite a few times. I wanted to change the send button on contact form 7. Do you have any suggestion.
Hi. The placeholders worked perfectly however on my mobile phone they stayed as labels above the text box instead of being placeholder? Any work around? Also can you use placeholders in dropdown menus? if so where would you add the placeholder code ?
Very nicely done, much appreciated!
Cool! Thanks! 😍
At the first attempt on searching TH-cam, I got what I wanted. Many thanks for creating such an informative tutorial. Keep up the good work.
th-cam.com/video/CPb5HdcoTww/w-d-xo.html
Hello, I accidentaly deleted my old form but the problem is that every post and portfolio page of my website contained the id of this old form, and when I create a new form I simply cannot find a way to change the id, so that means either I´ll have to edit every single portfolio page of my site or I manage to find a way to alter the id somehow (and of course I´ll need to use the old id), how can I achieve the latter/? Any ideas? Thx!
Many thanks! Really helpfull
Perfect! Been searching and searching and your video gave me exactly the solution I'd been struggling to find! Thanks a mil!
th-cam.com/video/CPb5HdcoTww/w-d-xo.html
this is great, but I want to know how to do this on Elementor :( sorry i'm completely a newbie....
Hi, I have a question. When someone fills the form and clicks the submit button, they get a message "Thank you for contacting us". The color of this message is by default black. How do i change the color of this message that appears after submitting. (My form's background color is dark, so the message is not visible at all).
how do I apply this css for a specific form in my website.
Great video and helpful tip. Like how you kept it fairly simple .
Thank you so much for putting all this information together, I just upgrade my website having problems with Contact Form 7 and your video definitely help me solve the problem. Kudos
So simple and helpful! A great tutorial, thank you!
Duuuude! Thank you for this! I'll have to rewatch it a couple of times and try to implement some of that.
Good video mate, quick question about form 7, imagine i have a multiple choice or dropdown field , and let say one of the option is "No", is there any way yo form 7 to disable the summit button and maybe show a little message as to the reason for this
th-cam.com/video/CPb5HdcoTww/w-d-xo.html
great tutorial.. is there a way for the website URL box to not be required without just removing it when submitting a form?
Our support team might be able to assist you with that. Head out to www.elegantthemes.com/members-area/help/ to open a chat and share the link to your website so they can take a closer look 😊
Now this, this is a useful bit of customizing, thanks Matt.
th-cam.com/video/CPb5HdcoTww/w-d-xo.html
Great! Now, how do I add a "Send me a copy' check box so that the SENDER has a copy of what they wrote? This is something I really wish more of these forms on the internet had and would like to offer.
Awesome... just what I was looking for!! Thanks!!
Thanks, but on my form the parts where you input answers go the same colour as background. I followed exactly what you wrote. any advice on that would be awesome thanks
lifesaver! Thanks for haring!
How to change the input text colour?
I know this isn't a Q&A forum but I've added the gray background and the text fields are gray as well. Any idea where that's controlled?
Hey Derek! You can add color: #ffffff; to the .wpcf7 input class selector.
You can check this article for more info: ow.ly/YeBx30o5Rrn 😄
Yeah bang on good clear and to the point
How do I change the margin on form title?
This was sooooo helpful! Thanks so much!!!
just my 1 cents i have recently downloaded this plugin called "Innozilla Skins for Contact Form 7" and it really styled my form without css skills.
Thanks!
Thank you very much for this excellent tutorial.
You're always welcome Zorba! 😄
Nice tutorial, bro!
Thank you! Glad you liked it! 😊
Very helpfull thanks ! I just wanted to ask how can I change the color of the "send" text ? Thanks
th-cam.com/video/CPb5HdcoTww/w-d-xo.html
Can you just change the text colour?
In the mail tab how do I change the font to be bigger and also make some parts of my receiving email bold?
Thank you for the great video! How do you change the predefined light gray font color that comes with the Contact 7 Form. When you type text in the field - the text is almost invisible. How do we write code just for that. I have clients how constantly complain about it. That would be a great help! Thank you so much for your time to show me the code!
Hi Eva,
Add this code to your custom CSS in Appearance -> Customize -> Extras -> Custom CSS
.contact-us input[type=text],
.contact-us textarea {
color: #000;
}
That should stop the complaints! :)
hey please help how to change the color of message sent or error messages
Very helpful
great video, thanks!
How to make in column wise?
I tried the exact same text as you for Textarea width, but nothing works.... What would be the problem ?
You can try Divi Supreme plugin to style your contact form 7 on the Divi builder
How to change place holder align
To right..
for language like Arabic and Hebrew
Thank you so much for this! I am trying to change the quiz label font, size, and color and am stuck. Do you have ay suggestions?
You're always welcome! Since you can assign a custom CSS ID to a custom field, you can use CSS font properties to adjust the font, size and color.
If you need further assistance, open a chat with our Support Team and they will be happy to take a closer look. www.elegantthemes.com/members-area/help/ 😄
I have an Interesting Question regarding Contact Form 7, in the Mail tab of creating the form mail are there any tools or tutorials regarding a custom email template?
thank you so much, bro. a big help for me.
EXCELLENT
Thanks! 😄
Congratulations!!! You've helped me a lot! Thanks a bunch!
I have made one new contact form... What should be it's address code for css
How do you change the font used in the form? -- both on desktop and mobile.
:)
You can use the CSS code below to change the font in your Contact Form 7: .wpcf7-form p {font-family: ‘Abel’,;} If you need further help, open a chat with our Support Team and they will be happy to take a closer look. www.elegantthemes.com/members-area/help/
Thank you for this tutorial. Weren't the forms already pre-styled like a year ago? Anyway, the video was a great help.
Thanks my guy!
this was actually a super helpful video. thanks
I need to get to the code of my form and edit/clone the style, for an infusionsoft integration, how can I get to the html/css?