Website in question: https://loopcycle.io/contact-us/
I found code that SHOULD change the look of my form, but it does nothing, I'm totally confused, looks like something within the template or wordpress itself is blocking those?
Code I've added for making the input box white:
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
and for centering the Submit button:
input.wpcf7-form-control.wpcf7-submit {
display: block;
margin: 0 auto;
}
The Form's code is:
<div class="form-group" style="padding-bottom: 30px;">[radio contact-reason use_label_element default:1 "Curious about Loopcycle" "Demo for manufacturers" "Demo for end users" "Collaboration" "Careers & Internships" "Speaker request" "Press" "Other"]</div>
<div class="form-group">[text* your-name placeholder "Your Name (required)"]</div>
<div class="form-group">[email* your-email placeholder "Your Email (required)"]</div>
<div class="form-group">[text your-company placeholder "Your Company"]</div>
<div class="form-group">[text* your-subject placeholder "Subject (required)"]</div>
<div class="form-group">[textarea your-message placeholder "Your message"]</div>
<div class="submit-group">[submit class:eut-extra-round "Send your message"]</div>
I feel like I clicked on every possible tab and panel trying to find out what overrides my edits, but can't find anything.
Try this CSS. it will be work
input.wpcf7-form-control.wpcf7-submit {
display: block !important;
margin: 0 auto !important;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
background-color: #fff !important;
color: #000 !important;
width: 50% !important;
margin: 10px auto !important;
}
span.wpcf7-form-control.wpcf7-radio > span {
width: 50% !important;
margin: 0 auto !important;
}