I am using Contact Form 7 to create simple form where people can contact me.

When filling in incorrect data I get the error displayed twice. One error message above and one below the form. Is it possible to disable the message below and keep the one above the form? Plus is it possible to add same styling from bottom message to upper one?

I attached a picture with both error messages: http://i.imgur.com/hklhJgR.png

Plus here is my page with the said form: http://178.62.186.10/event-sponsorship/

Thank you in advance.

Thank you for your understanding.

Sorry for the confusion there.

You can add this under Custom > CSS in the Customizer.

.wpcf7-form .wpcf7-not-valid-tip {
    display:none;
}

.wpcf7-form .screen-reader-response {
    padding:10px;
    border-left: 5px solid #f6dca7;
    color: #c09853;
    background-color: #fcf8e3;
}

Hope that helps.

Thanks for writing in!

In that case, try this CSS:

.wpcf7 .screen-reader-response {
    display: none;
}

Thanks!

Upon checking, it seems you have inserted some HTML tags in your custom CSS area that’s causing the provided CSS not to work (see: http://prntscr.com/63bynr). Please delete the HTML tags OR put the provided CSS at the top of Custom > CSS in the Customizer and the issue should be fixed.

Hope this helps. 🙂

Thank you.

I think that the solution provided by Themeco:

.wpcf7 .screen-reader-response {
    display: none;
}

although it hides the duplicated error message, it causes a problem as it makes the content of that div “inaccessible” by screen readers, which is precisely its purpose.

In my opinion a better way to address this issue would be using the original styling of ‘Contact Form 7’ for that div (which is being overridden by the theme), instead I recommend this CSS:

div.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	margin: 0;
	padding: 0;
	border: 0;
}

Of course there are other ways to achieve the same result. There is an interesting article about this matter, a few years old but provably still valid, here: Hiding Content for Accessibility – Snook.ca

Best Regards,
Diego