william712 on "[Plugin: Contact Form 7] DIV Styles not Appearing"

Hi,

I'm having a strange problem. When I try to style a div on a CF7 form, it does not allow the styles to be applied from my child theme's style.css. So for instance, if I place:

<div class="text-style">[text your-text]</div>

in my CF7 form and then place:

.text-style {color: #fff;}

in my style.css, it does not apply the style. For this reason I am having to put all styles inline and this has made my CF7 form very chaotic. Does anyone know a solution to this?

https://wordpress.org/plugins/contact-form-7/

Hi,

This is due to CSS styling applied to standard HTML form elements within your current WordPress theme.

In particular your current WordPress theme does not appear to support the new HTML5 "email" & "telephone number" form elements now used by CF7.

http://contactform7.com/faq/#Why_does_my_email_address_input_field_look_different (recently added to http://contactform7.com/faq/) gives you some guidance on how make these fields look the same in your current WordPress theme.

Try to Use Firebug or Chrome Dev Tools to first understand and then change the CSS used for your CF7 form elements.

Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don't inadvertantly effect other elements on your website.

See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS.

Hi William,

Thanks for your reply and help on this issue, it is driving me a bit bonkers!

I appreciate your advice above regarding my markup. One thing I would like to point out is that the classes that I am using are unique class elements targeted only at the divs in my contact form. If what you said is the case, shouldn't the styles show up in debug? When I inspect the div elements using firefox dev tools, although the divs show up with the correct classes, there is no sign of the styles I apply to them not even as overridden styles. They're just simply not there.

I have read through that link for stlying CF7 forms multiple times, but I can't find anything in there that suggests that styling div elements in style.css shouldn't be applied in the contact form.

Or am I completely misunderstanding something?

Hi,

Can you provide me a link where I can see your form and check it under the browser's dev tools?