[Plugin: Contact Form 7] How to change text area background colour

Hey LL, in firefox try hitting f12 and see if it opens your firebug, yeah had the same issue with it not working then found a tab in the tools menu now instead of the old box in my tool bar, f12 works for mine. The link given above by sglee2120 has some good info about resizing contact form7.
Basically your going to have something like;’.wpcf7-form input, .wpcf7-form textarea {width: 350px; height: 100px;}’ thats only for the text input area but it should be easy to modify for the other boxes.
Let us know how you make out.
God Bless
Jon

Tried f12 doesn’t render . . . when I look at inspect element in chrome it shows input:valid, textarea:valid when I look in my style sheet for that it shows

select, input, textarea, button { font:99% sans-serif; }

textarea { overflow: auto; }

button, input, select, textarea { margin: 0; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

body, select, input, textarea { color: #191a17; font-size:12px; font-family: “Verdana”, Lucida Sans Unicode, Lucida Grande, sans-serif;}

then it goes to my footer quick contact widget

footer .quick_contact .form textarea{

& then to

#respond textarea{
height:180px; blah blah blah

nothing to indicate the contact 7 form . . .

Went to the link you suggested & I guess I have to add some code to it, thats all good I can do that if I read that page correctly?

https://www.wpsnippet.com/tag/style-contact-form-7/ that you have to add, is that correct?

Thank you so much for your communication, I am grateful ??
Linda Lou

Hi LL, I just opened up your site give me a few and let me see what I can find, btw your site loaded very very slowly, not sure if its cause you are editing it or what.
Jon

I go through cloudflare but did have it on developer mode ??
Thank You ??

Hi Lindalou; on your style.css ver1 line 1 I find
‘body, select, input, textarea {
color: #191A17;
font-family: “Verdana”,Lucida Sans Unicode,Lucida Grande,sans-serif;
font-size: 12px;
}’
I added height: 25px; into that line of css and it increased the size of the boxes. unfortunatly it also decreased the size of the message box. I am trying to figure out the code to then overwrite for the message box, it will probably be similar to what I posted above. running firebug on your site keeps crashing my firefox so it is a slow process.

LL
firebug wont let me add a new line of code so try adding after the above line, a line with ‘body, select, input, textarea, wpcf7-form textarea {width: 350px; height: 100px;}’ and adjust the sizes to what you need, not sure if this is going to affect all the boxes or just the message box. Let me know how you fare. I have a meeting in the AM and should have been to bed a while ago, so good night and God Bless!!
Jon

Thanks for all your help mobijon but changes those values changed my mail chimp signup form on the side bar as well – I also tried the instructions at https://www.wpsnippet.com/styling-contact-form-7/ & everything seemed to working ok with the css & changing those values but I couldn’t figure out where to put this – the obvious was on the contact page right? but when I did it didn’t put any verbiage at the form as it states below here’s a sample page I made you’ll see:

https://lindaloustarr.com/sample-contact

<h2>Here are some text to go with the form</h2>
<p>Your Name (required)[text* your-name] </p>
<p>Your Email (required)[email* your-email] </p>
<p>Subject [text your-subject] </p>
<p>Your Message[textarea your-message]</p>
<p>[submit class:buttons_form "Send"]</p>

Hi LL;
hmm so it does, so that is controlling every text input box on your site. Looks like you will need to identify each of the input areas of contact form 7 and specify css height and width (or whatever you need to change) for each one. If you like contact me at [email protected] and I can help you sort that out as I get time. As I mentioned firebug running on your site crashes my firefox so I will see if I can sort it out on one of my sites and see if it will transfer.
God Bless
Jon

Hi LL, did you get this sorted out? If not, I can help.

@abbyj: If you have a solution to offer, please post it here.

No I did not get it sorted out – threw my hands up & moved onto other things LOL – all I want to do is change the size of the input areas & contact 7 throws those codes around every where from what I gather ??
LL

linda’s contact form looks fine so I think she figured it out. In any case . . .
css to style:
input blocks and the text entered in them: .wpcf7-form input { }
titles of input blocks: .wpcf7-form {}
size, background etc of “your message” area: .wpcf7-textarea {}
spacing around blocks: .wpcf7 p {}

Let me know if you need anything else.

abbyj – no, contact form is not how I want it – I want to be able to know where to make the input areas larger?
Thank you – peace & blessings

Yeah , thanks abbyj – codes you gave helped make the form height/width look 100 times better! xxxoooxxxooo you are greatly appreciated!
LL