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

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

607 ratings | 51320 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 (49)
Alberto (4 days ago)
How do I get first name and email next to each other? For a simple sign up form?
Garth N (6 days ago)
Doesn't work. The form is styled but the field sizes are still full width
Pee Que (9 days 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 (14 days 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 (16 days 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 (18 days ago)
Great .....!
CapnBlackSparra (1 month 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 (1 month ago)
Great tut, thanks, Can you change the font easily?
Ruchi Acharya (1 month ago)
Christine Walker (2 months ago)
Many thanks, Lots of tips and my form looking good!
SanDiego FoodTrucks (2 months ago)
this was actually a super helpful video. thanks
Jorge Torres (2 months ago)
Eres un Genio, many thanks
TheOriginalNikster (2 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 (2 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 (2 months ago)
Very useful, thanks a lot
Ricardo luiz (2 months ago)
very good...
medialync (3 months ago)
PimpMyContact7? lol
Rasmus Larsen (3 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
Simon Kenny (3 months ago)
Great video. Thank you
Nathan Lee (3 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 (4 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 (4 months ago)
that's super! Thanks!!!
Jonas Bauer Nygaard (4 months ago)
David Mercer (4 months ago)
Awesome... just what I was looking for!! Thanks!!
kudakwashe zvaita (4 months ago)
Well done buddy.
cat noxwill (5 months ago)
Andrew Karas (5 months ago)
nice video, thanks!
staedeli (5 months ago)
good job for doing this video, thanks a lot!!
Nic Hughes (5 months ago)
.wpcf7 input { width 50%; } doesnt work
Nic Hughes (5 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 (5 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 (5 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 (6 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 (6 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 (6 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 (6 months ago)
This is also why I'm here... Hoping to figure out how to change the colors of those messages.
Muhammed Arshid KV (6 months ago)
Try html to contact from 7 convertet cf7.ciphercoin.com
Codey-lee Pickering (7 months ago)
Great video!! very informative! Helped me out a lot thanks
JACK LINKERS (8 months ago)
Yet another tutorial to teach you how to bloat your site with additional lines of code....
RichiRicheh (3 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 (4 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 (8 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 (8 months ago)
Useful but you talk too fast!
Matthew Thurner (9 months ago)
Now this, this is a useful bit of customizing, thanks Matt.
YOUNSE Pk (9 months ago)
Thanks that was useful for my website
Elegant Themes (9 months ago)
You're welcome

Would you like to comment?

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