Hi Guys,
I’m using a simple signup form in the footer and want to style it differently than any other cf7 forms.
However, when trying to style only the footer, It applies the styling to all the forms? How can I get it to only style the cf7 in the footer? Here is the css: (see attached screenshot of footer form)
#footer input[type=”text”], input[type=”email”], input[type=”password”], textarea, select, .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea, .wpcf7 select, .ginput_container input[type=”text”], .ginput_container input[type=”email”], .ginput_container textarea, .ginput_container select, .mymail-form input[type=”text”], .mymail-form input[type=”email”], .mymail-form textarea, .mymail-form select, input[type=”date”], input[type=”tel”], input.input-text, input[type=”number”], .select2-container .select2-choice {
background-color: #000000 !important;
border-color: #000000 !important;
border-radius: 30px;
color: #d1d1d1;
}
#footer input[type=”submit”], button[type=”submit”], input[type=”file”], .wpcf7 input.wpcf7-submit[type=”submit”] {
background: #2c3a57 none repeat scroll 0 0;
border-radius: 30px;
color: #d1d1d1;
}
I’ve tried adding an id or class to the form field as suggested here, with no luck: http://contactform7.com/styling-contact-form/
exmaple [text text-123 id:very-special-field]
#very-special-field
{
}
Also tried styling the form as suggested with the full form id (with no luck): https://www.elegantthemes.com/blog/tips-tricks/how-to-customize-the-style-of-contact-form-7-to-match-your-website
example:
#wpcf7-f4407-p4405-o1 {
}
Please help – much appreciated
Attachments:
You must be
logged in to view attached files.
.