Contact Form 7 5.2 validation message always visible

Same problem here!

I insert this code in CSS:

div.wpcf7-response-output {border-color:transparent;}

Thank you Rui – I did that too but then the border will be hidden for all messages. I need to find a way to hide the box initially and only have it show up if it actually outputs a validation message.

I don’t know what happened to the plugin – it worked fine before. I suppose during an update something was changed and now it’s behaving like that.

Hi Umberto,
try to insert this code in your contact form, above the submit button:

[response]

https://contactform7.com/locating-response-message-box-anywhere/

When I test (just accept the “Einverst?ndniserkl?rung gem?? DSGVO” button, and submit) your form I’m receiving the messages over the button!

This is happening in sites where I have PHP 7.4 maybe some missing module, I don’t know!

I did but nothing changes. I still get the empty response box when the form is loaded and empty. I want it to behave like this:

1. form is loaded and empty – no validation box visible
2. form is filled out incorrectly – validation box pops up with red background
3. form is successfully sent – response box is displayed with green background

I had PHP7.3 running before – I just changed it an hour ago. What else could cause this problem?

That’s the CSS I have right now:

div.wpcf7-response-output {
    font-size: 10px;
    color: #fff;
    margin: 1.313em 0 0 !important;
    padding: 0.786em 1.15em 1em !important;
    position: absolute !important;
    bottom: 3em;
    width: 100%;
    max-width: 500px;
    border-radius: 0px;
    border-color: transparent;
    box-shadow: none;
    border: 5px solid #ddd;
    background-color: transparent;
}

div.wpcf7-mail-sent-ok {
    border: 5px solid #398f14 !important;
    border-radius: 0px;
}

div.wpcf7-mail-sent-ng {
    border: 5px solid #ff0000 !important;
    border-radius: 0px;
}

div.wpcf7-spam-blocked {
    border: 5px solid #ffa500 !important;
    border-radius: 0px;
}

div.wpcf7-validation-errors {
    border: 5px solid #f7e700 !important;
    border-radius: 0px;
}

Is the message alert box still visible when you are logged-in on WordPress? I had this issue on our website, an alert box shows when I’m logged out. I found that this style is not being loaded when logged out.

.wpcf7 form.init .wpcf7-response-output {
display: none;
}

Read online that if you are using caching plugins, some CSS may not be loaded properly. I have cleared the cache and this has solved the issue.

I’m not sure if this will also work on your end as we are using a caching plugin that created the issue.

Hope this helps.

Hey @raymird!

The issue is present no matter if I’m logged in or not. I always see the box. And yes – I am using a caching plugin. It seems like your style worked – at least for the general behaviour. Thank you very much!!

But I still can’t seem to get the different repsonse colors to work (i.e. red box for validation error and green box for success message). Any idea what could be the issue there?

Hi @umbertofederico, glad to hear it worked for you too.

Regarding the border-box colors, have you checked the classes for the success message and the validation error? It seems the variables have changed since the last update. You may test your forms to see the class variables and cross-reference to your declared styles.

.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border-color: #ffb900; /* Yellow */
}

Yep – works like a charm! Thank you so much! ??

I had this problem as well and what helped we was this CSS:

.wpcf7 form.init .wpcf7-response-output {
	display: none
}

Rather simple, but solves the issue of showing an empty bar right after the page with a form is loaded.

Pasted it as global CSS in Themes as Additional CSS.

This code worked also for me and I posted it in the Theme-Editor!

.wpcf7 form.init .wpcf7-response-output {
	display: none
}