HomeХобби и стильRelated VideosMore From: Elegant Themes

How To Customize The Style Of Contact Form 7 To Match Your Website

825 ratings | 73478 views
Learn how to customize the style of Contact Form 7 to match your website. Blog post: https://www.elegantthemes.com/blog/tips-tricks/how-to-customize-the-style-of-contact-form-7-to-match-your-website Like us on Facebook: https://www.facebook.com/elegantthemes/ With over a million active installs, Contact Form 7 is by far one of the most popular WordPress plugins ever. It's simple yet. Contact Form 7 is so simple that it seems literally anyone can use it effectively. Styling too, is intended to be simple. But perhaps too simple for some.
Html code for embedding videos on your blog
Text Comments (71)
Pro Image (3 days ago)
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?
Elegant Themes (2 days ago)
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. https://www.elegantthemes.com/members-area/help/ 😄
Erwin Reyes Ruminot (8 days ago)
Nice tutorial, bro!
Elegant Themes (7 days ago)
Thank you! Glad you liked it! 😊
an8er (11 days ago)
How do you change the font used in the form? -- both on desktop and mobile. :)
Elegant Themes (10 days ago)
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. https://www.elegantthemes.com/members-area/help/
Armin Verwest (26 days ago)
Please help me I have a problem in contact form 7. When I type in the section of "your message". The text is in white color. And is not showing because the background is white also. So I want to change it to the black color. Please help
Elegant Themes (23 days ago)
Hey Armin! We have an article that covers how to style specific fields. Check it out here: https://www.elegantthemes.com/blog/tips-tricks/how-to-customize-the-style-of-contact-form-7-to-match-your-website
DerekCollinsTrio (1 month ago)
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?
Elegant Themes (1 month ago)
Hey Derek! You can add color: #ffffff; to the .wpcf7 input class selector. You can check this article for more info: http://ow.ly/YeBx30o5Rrn 😄
ROHIT BAGH (1 month ago)
thank it helped
Stuart Lamacraft (1 month ago)
great video, thanks!
Roman Grunis (1 month ago)
great tutorial.. is there a way for the website URL box to not be required without just removing it when submitting a form?
Elegant Themes (1 month ago)
Our support team might be able to assist you with that. Head out to https://www.elegantthemes.com/members-area/help/ to open a chat and share the link to your website so they can take a closer look 😊
shivam verma (1 month ago)
real goooooooooooooooooooooooooooooooooogggggggggggggggggggggddddddddddddddddd
LlamasAreBest (1 month ago)
Or just get Elementor.
Eva Marko (1 month ago)
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!
Sleque Creative (1 month ago)
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! :)
usama adeel (2 months ago)
I was looking to customize send button
Ig V. (2 months ago)
We have a contact form plugin able to customize just click in a button?
Luis Fernando Manzano (2 months ago)
Look! Swashin can be serius too!
LemaR Center (2 months ago)
What about button men?!
Alberto (3 months ago)
How do I get first name and email next to each other? For a simple sign up form?
Garth N (3 months ago)
Doesn't work. The form is styled but the field sizes are still full width
Pee Que (3 months ago)
In the mail tab how do I change the font to be bigger and also make some parts of my receiving email bold?
Wezc0re (3 months ago)
Please help! the outcome of my contact form 7 calculated field is on the far right..... Everything is on the left only the actual calculated number on the right..how do i change this? I use the Cost Calculator – Price Calculation plugin
Mike Ransby (3 months ago)
Also, if you want to change some of the text to be bold, you can do so, even without using the CSS section (since that is for pro users only...). For free you can just type in: <strong> yourtext </strong> Now 'yourtext' will be bold. Easy :-)
nayandas 456425 (3 months ago)
Great .....!
CapnBlackSparra (4 months ago)
Does anyone within the comment section or the publisher of the video know how to change the font color of the contact form
Tony Design31 (4 months ago)
Great tut, thanks, Can you change the font easily?
Ruchi Acharya (4 months ago)
Christine Walker (5 months ago)
Many thanks, Lots of tips and my form looking good!
SanDiego FoodTrucks (5 months ago)
this was actually a super helpful video. thanks
Jorge Torres (5 months ago)
Eres un Genio, many thanks
TheOriginalNikster (5 months ago)
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.
Barack Lama (5 months ago)
Thank you for the lesson! It really helps. Use Contact Form 7 for one my progect, it's good, wery good. But if you want something faster in creating, I would recommend this Contact Form widget: https://elfsight.com/contact-form-widget/. If the deadline is close, this widget is a salvation!
Meisa Ahvazi (5 months ago)
Very useful, thanks a lot
Ricardo luiz (5 months ago)
very good...
medialync (5 months ago)
PimpMyContact7? lol
Rasmus Larsen (6 months ago)
Awesome video! Thanks! A bit fast, but i managed ;-)
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
Attollo Solutions (6 months ago)
Great video. Thank you
Nathan Lee (6 months ago)
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?
goandplugin (7 months ago)
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!
Ivan (7 months ago)
that's super! Thanks!!!
Jonas Bauer Nygaard (7 months ago)
David Mercer (7 months ago)
Awesome... just what I was looking for!! Thanks!!
kudakwashe zvaita (7 months ago)
Well done buddy.
Black NOTwhite (8 months ago)
Andrew Karas (8 months ago)
nice video, thanks!
staedeli (8 months ago)
good job for doing this video, thanks a lot!!
Nic Hughes (8 months ago)
.wpcf7 input { width 50%; } doesnt work
Nic Hughes (8 months ago)
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
Leo Colazo (8 months ago)
Hello, I wanted to ask you if you could help me with something .. I have a website for example of food recipes, and I would like to know how to do so that people (anyone) can publish their own recipe on my page. Thanks and good video!
k254 intels (8 months ago)
I am looking for a way to use emojis in place of checkboxes in contact form 7 any idea on how this can be done
Erica Greene (9 months ago)
Hello, when I typed the css code for background, the whole form turns that gray color and I end up not being able to see the form boxes. Shouldn't the boxes stay white? How do I fix this? Anyone?
Con Jager (9 months ago)
Perfect! Been searching and searching and your video gave me exactly the solution I'd been struggling to find! Thanks a mil!
Sometimes when you press "submit" or "contact", there's a message saying "Thanks, we received your message". Do you know how to customise that message? I am using a template, but not a Wordpress one. Thanks!
Dean Edwards (9 months ago)
Inside of your specific form, basically where you make the form, there is a tab called "Messages", you can alter that outgoing messages there. - I am hoping this isn't too late or something.
Hub Location Sound (9 months ago)
This is also why I'm here... Hoping to figure out how to change the colors of those messages.
Muhammed Arshid KV (9 months ago)
Try html to contact from 7 convertet cf7.ciphercoin.com
Codey-lee Pickering (10 months ago)
Great video!! very informative! Helped me out a lot thanks
JACK LINKERS (10 months ago)
Yet another tutorial to teach you how to bloat your site with additional lines of code....
RichiRicheh (6 months ago)
JACK LINKERS how exactly is this video teaching people bloating your website with code? Based on your comment you're insinuating that it is unneeded code at that.....
freedomseeker01 (7 months ago)
Bloat? Bloat is when you need 20 characters and should only use 16 because you are writing to 1.44 meg floppy disks and need all the space you can get. But that was in the early 80s. I think we are a bit further along now than that. This is relatively simple HTML. A few lines of code to slim up the screen real estate is cool. Bloat is when you have 2 million lines of code and should have done it in 1.2 million by doing more efficient nesting and using a few more for...next loops.
shib nath (11 months ago)
How to input default value in your email address field not like placeholder that will be default email address if someone don't have their email address or don't want to share with us through the contact form 7
Theocratic Software (11 months ago)
Useful but you talk too fast!
Matthew Thurner (1 year ago)
Now this, this is a useful bit of customizing, thanks Matt.
YOUNSE Pk (1 year ago)
Thanks that was useful for my website
Elegant Themes (1 year ago)
You're welcome

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.