The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.
To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
Excellent.
Thanks for the link, looks like its exactly what I needed!
Hi
I am not sure if this thread will still be active, however this doesnt seem to have resolved my problem.
Having tried multiple ways of adding these customisations to my child theme style sheet, nothing is changing, even including !important declarations.
I only need to change the color of the text actually input by the user for the contact form, which that example actually shows, but when I input it, it just keeps coming up white, and whats controlling it is also controlling the text on the rest of the site. This is code in my parent theme.
Thanks again
Please include a link to your Contact Form 7 form so we can examine your form in detail.
Once we understand how the HTML and CSS is configured in your CF7 form, we should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.
It is a closed site at the moment I cant really make live. Is there another way of doing it?
Sorrry I am new to this. Really appreciate the help.
RE: It is a closed site at the moment I cant really make live. Is there another way of doing it?
You could add the form to another site that is live. Just create a page with the form on it. Doesn’t have to be in your WP menu so visitors to site won’t see this page.
I just need a link where I can use Firebug to examine your form.
Alternatively you could try using Firebug yourself – it’s a very useful skill to learn.
Hi there,
I am a user of Firebug, I just cannot for the life of me figure this one out. Ive managed to change the text colour in firebug, however this then affects both the explanation text and the input text in the area.
Click here for the form
I have disabled Maintenance mode for the time being, so I will put this back on once the issue has been resolved. As explained this is work in progress so please dont judget the rest of it. This is my first attempt 🙂
Thank you for your help
I see following problems in http://www.ilikeclimbingtrees.com/wp-content/themes/twentyfourteenchild/style.css
`.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
color: #FFFFFF !important; /* this setting the text in the input box to white */
}
body, button, input, select, textarea {
color: #FFFFFF; /* this is setting lots of stuff to white */
line-height: 1.5;
}`
TRY:
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
color: #000 ; /* this sets the text in the input box to black */
}
in http://www.ilikeclimbingtrees.com/wp-content/themes/twentyfourteenchild/style.css
Amazing!
Thank you so much.
Yeh I was definitely trying to battle with
body, button, input, select, textarea {
color: #FFFFFF; /* this is setting lots of stuff to white */
line-height: 1.5;
}`
every time Ive been trying to tackle it.
Resolved, thank you very much!
