Use Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements.
Note: Makes sense to always have a separate test site (we just use an extra sub-domain on the same server) for this and a number of other reasons.
Thank you for the reply. I done what is suggested and indeed a CSS was not defined properly.
body span.wpcf7-not-valid-tip had 0px for font-size, as well as a few more wrong values. I have entered the correct values and all is working now.
It’s odd that such a ‘mistake’ exists in such a successful plugin. Could it be that those values are to be set via JS and because of a conflict I need to set them manually?
RE: It’s odd that such a ‘mistake’ exists in such a successful plugin.?
The appearance of each CF7 form depends on the HTML form elements used and the CSS styling applied to these elements in your current 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.
RE: Could it be that those values are to be set via JS and because of a conflict I need to set them manually
It’s possible but the fact that you could fix this via simple CSS changes indicates this is due to CSS styling applied in your theme.
The theme’s main style sheet has the following CSS.
body span.wpcf7-not-valid-tip {
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
font-size: 10pt;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 280px;
z-index: 100;
}
But when I look at the page with Fiebug I see ‘font-size:0’. Unless, I manually set it, the CSS is not visible.
If you include a link to your Contact Form 7 form I can use Firebug to see exactly what is happening.
I see you are using http://themeforest.net/item/incredible-responsive-wordpress-theme/3016398 as your theme.
The main CSS file for Incredible is http://wheels4sure.com/wp/wp-content/themes/incrediblewp/style.css
This file says:
body span.wpcf7-not-valid-tip {
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
font-size: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 280px;
z-index: 100;
}
Which is exactly what I am seeing in Firebug and on your site.
It looks the theme developer is using a quick (but very crude) technique to hide all of Contact Form 7’s non-validation information.
When you say “Unless, I manually set it, the CSS is not visible ” I am not at all sure what you mean, but it sounds like (and certainly looks) you are not changing the CSS in a location which makes your changes permament.
I’m sorry but the style.css of the theme has a font size entry of 10pt as I copied it on my above post. Where did you copied the 0 value?
RE: Where did you copied the 0 value?
I got it using Firebug to examine the CSS actually used on the site. I could with a little more effort get the same info by looking at the source code. What a gave you is the CSS as I and I believe the rest of the world sees it.
Sorry I don’t know where you are adding your info to your theme (your explanation doesn’t make sense to me at this stage) but it definitely looks to me like it’s not making it to your site.
Line 1419 of the theme’s style.css file that you have linked above shows the value as 10pt. Download the file and open it on a text editor.
“The rest of the world” should see the value of 10pt but don’t as your Firebug investigation proves. THAT is my problem. Who changes the declared font value to zero?
At the stage you are seeing the site I’m NOT adding any extra CSS so that you can diagnose the problem. What I meant was, ‘unless’ I declare extra CSS not-valid-tips are not visible. I.e. I ‘can’ make them visible by simply adding the following to my child theme’s style sheet.
body span.wpcf7-not-valid-tip {
font-size: inherit;
}
Thanks for the info about your child theme – that made things much clearer for me.
It does appear that http://wheels4sure.com/wp/wp-content/themes/incrediblewp/style.css is being overwritten via Javascript. It looks like this is how the theme developer is hiding all of Contact Form 7’s non-validation information.
You could also try adding the following to your child theme:
#wpcf7-f1172-p1163-o1 .wpcf7-not-valid-tip {
font-size: 10pt;
}
This is a much more specific CSS declaration due to using the CF7 forms unique ID (ID’s trump in the CSS point system).
It might make sense to also contact the theme developer about this issue. There was recent change to the way CF7 displays non-validation information in v3.6. This may be how the theme developer has responded to the change.
