[Adam PParticipant]

Hello,

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.

[DarshanaModerator]

Thanks for writing in! Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[nathanlittleParticipant]

This happens to me after a fresh install which is a shame because Contact Form 7 integration is advertised as a feature on the X Theme website, and it doesnt work.

[Paul RModerator]

Hi Guys,

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.

[letsmakeitworkParticipant]

This reply has been marked as private.

[letsmakeitworkParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for writing in!

In that case, try this CSS:

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

Thanks!

[letsmakeitworkParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

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.

[EDUCACTIVOSParticipant]

Hi,

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

[ZeshanMember]

Hi Diego,

Thank you so much for sharing this with other users! 🙂

Have a nice day!

[Author]

Posts