Contact Form 7 button css don’t work properly

I have a Contact Form 7 form in my site. I wanted to customize it and overall it went well. But I can’t change the color of the submit button to white. In Elementor it looks like it should, but in the frontend it is gray. Can you please help me?

To customize the CF7 I added some code in the contact form itself:

<div class=”wps-form”>

<!– Zeile 1 –>
<div class=”wps-form-row”>

<!– Spalte 1 –>
<div class=”wps-form-column”>
[text* vorname placeholder “Vorname*”]
</div>

<!– Spalte 2 –>
<div class=”wps-form-column”>
[text* nachname placeholder “Nachname*”]
</div>
</div>
<!– Ende der Zeile 1 –>

<!– Zeile 2 –>
<div class=”wps-form-row”>

<!– Spalte 1 –>
<div class=”wps-form-column”>
[email* email placeholder “E-Mail-Adresse*”]
</div>

<!– Spalte 2 –>
<div class=”wps-form-column”>
[tel telefon placeholder “Telefon”]
</div>
</div>
<!– Ende der Zeile 2 –>

<!– Zeile 3 –>
<div class=”wps-form-row”>

<!– Spalte 1 –>
<div class=”wps-form-column”>
[textarea* nachricht placeholder “Nachricht*”]
</div>

</div>
<!– Ende der Zeile 3 –>

[acceptance dsgvo]<span style=”font-size:15px”>Mit der Nutzung dieses Formulars erklären Sie sich mit der Speicherung und Verarbeitung Ihrer Daten durch diese Website einverstanden. Weitere Informationen erfahren Sie in der Datenschutzerklärung.*</span>
[/acceptance]

[submit “Senden”]

[honeypot firstname]
[honeypot lastname]
</div>

and in the customizer:

/* Contact Form 7 allgemein */
.wps-form {
width: 100%;
margin: 0 auto;
padding: 20px 15px 0px 15px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
background-color: #82B735;
}

.wps-form-row {
display: flex;
flex-direction: column;
width: 100%;
}

.wps-form-row .wpcf7-form-control {
width: 100%;
}

.wps-form-column {
flex: 1;
padding: 0.5rem 0;
width: 100%;
}

/* Contact Form 7 Submit Button */
input.wpcf7-form-control.has-spinner.wpcf7-submit {
background-color: #ffffff;
color: #125012;
display: block;
margin: 0 auto;
border-radius: 5px;
font-size: 14px;
font-weight: 700;
padding: 15px 25px 15px 25px;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit:hover {
background-color: #000000;
color: #ffffff;
}

/* Notebook / Desktop */

@media only screen and ( min-width: 48em ) {
.wps-form-row {
flex-direction: row;
}
.wps-form-column {
padding: 0.5rem 1rem;
}
}

/* Text nach Checkbox */
span.wpcf7-list-item-label {
color: white;
line-height: 1.1;
}

It looks like the code in the customizer is being overwritten with some other setting.

Hello,

I would like to request temporary admin access to the website to take a better look at the issue there. Also, please send me a link to the page where the form is defined.

Kind Regards

Hello, I have added my login details for you.

Can somebody help me please?

Hello,

Seems that the access is wrong: https://prnt.sc/89uHkZV5jurz

Could you please update it and send me a link to the page on which the CF7 is defined?

Kind Regards

Hello, here is the link where CF7 is defined. I have also created a new password and you must now be allowed to access my website. Best regards, Eugen

Hello,

The button is gray because of the required acceptance field: https://take.ms/u32LjQ , so when you enable the checkbox there, the button will be white: https://take.ms/3L2sk

If you want to have the white button even if the checkbox is disabled, please try to use the below custom CSS code for help:

.wpcf7 .wpcf7-submit {
    opacity: 1 !important;
    cursor: pointer;
}

Define it in Theme Settings -> Custom CSS.

Kind Regards

It works perfektly! Thank you very much!

Hello,

You are welcome! Always remember that you can reach out to us with any questions you may have.

Wish you all the best!

Kind Regards

[Author]

Posts