Different background colors for success and error messages of contact form 7

Support
#1

Hi,

I am using Icon stack and added following code in Theme Options > CSS to have different look of CF7 messages but still all messages of Contact Form 7 are displaying with yellow color background :

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #D8000C;
    background-color: #FFBABA !important;
    border: 0;
    padding: 10px;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #DFF2BF !important;
    border: 0;
    padding: 10px;
}
div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before {
    font: 26px/30px FontAwesome;
    margin-right: 16px;
    vertical-align: middle;
}
div.wpcf7-mail-sent-ok:before {
    content:'\f00c';
}
div.wpcf7-validation-errors:before {
    content:'\f057';
}

Please kindly guide me to solve this issue.

Thanks in advance.

#2

Hello @omid020,

Thanks for writing in! Your custom CSS is valid and correct. It should work on your site. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Best Regards.

#3

Hello @ruenel, Thanks for your reply. I put URL in secure note, the contact form is inside of Accordion Element.

#4

Hi @omid020,

It might be due to the improper class hierarchy of CSS in your code in respect to the code. I have examined the code in the browser debugger and found the following code is working.

.wpcf7-form .wpcf7-response-output
{
    background-color: #ff0000;
}

I would suggest you check and recreate the CSS code based on the CSS classes on the respective output.

Hope it helps.
Thanks

#5

Hi @tristup, Yes, .wpcf7-form .wpcf7-response-output works correctly but it is general for any status, so I think different styles for Success Message and Error Message of CF7 needs more detailed hierarchy which I guess it is missed on theme structure.

Sincerely
Omid

1 Like
#6

Hi Omid,

If you want to change the status background for Success Message and Error Message, please check the CSS hierarchy below.

Success Message:

.wpcf7-form.sent .wpcf7-response-output {
	// your custom css
}

Error Message:

.wpcf7-form.invalid .wpcf7-response-output {
	// your custom css
}

Hope that helps.

Thank you.

1 Like
#7

Thank you! Solved.

#8

Hi @omid020,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.