Styling contact form 7 and Woocommerce buttons

[dmac]

We are using a contact form 7 in the footer of our website and I am trying to add styling using CSS. I have tried the code I found online (e.g.:https://contactform7.com/styling-contact-form/) but this doesn't work. Does this have anything to do with specificity? I wrapped the code from the form in a div and gave that div an ID but still I couldn't change the styling. I have successfully styled contact forms before by adding id's to the specific fields and adding the CSS code on-page in the CSS field. Since this contact form is used in the footer and thus on almost every page, I have to paste the code in the 'custom CSS' field (appearance > customize > custom CSS). Could this have anything to do with it? At the same time I am having a similar issue with the buttons from WooCommerce. I used the code I found online (https://www.speakinginbytes.com/2016/05/change-style-add-cart-button-woocommerce/) when using this code it also doesn't seem to work.  

[maximus]

Hi dmac Can you please share your website url and admin credentials with me,so that i can fix your issues.  

[dmac]

This reply has been marked as private.

[logan]

Hello, Try this code in wp-admin > appearance > customize > custom css > paste & save. footer div#contactform input.wpcf7-form-control.wpcf7-text{background-color: #fff !important; color: #00bd9a !important;} Refer: http://prntscr.com/n5snkw The main issue was related to the classes and id of the css selector. for another issue please share page url and screenshot of the issue. will share the css for that too.

[dmac]

Hi,   I tried the code. It works if I copy paste the code directly into the inspect tool in Chrome. However when I add it to the custom CSS or simple custom CSS field in the appearance option of the back-end, then it does not work.   Only if I add the code in the CSS field on page, it works. The downside is that it then only works on that specific page, but the contact form is being displayed in the footer on every page with a footer. Therefore it would be better if the code worked when using it in the custom CSS or simple custom CSS field of our website.   My colleague noted that the code he received for a change does not work either when inserting it in those fields. Could you therefore please check if our back-end needs changes so that we can add CSS again that will be used on the entire website?   Thanks you!

[logan]

Hello, I have checked, it is working on every page: https://screencast-o-matic.com/watch/cqfe1kZewp Code is applied on footer widget of contact form because i have used specific selector so that it could not conflicts with any other elements.

---

I have used this code to style your contact page. div.wpcf7 input.wpcf7-form-control.wpcf7-text, div.wpcf7 .wpcf7-textarea {background-color: #fff !important; color: #00bd9a !important;} Refer: http://prntscr.com/n6r8rs Let me know if you are having trouble on some specific link.

---

I have checked you have implemented lots of code in customizer. somewhere it is breaking that is why the other codes are not working. it parse the code from top to bottom. i am sharing this: https://screencast-o-matic.com/watch/cqfe1RZexa i hope this helps to your developers. All the best  

[Author]

Posts