This page is also available in Español.
In the Messages tab in a contact form editor screen, you can edit messages that Contact Form 7 displays in different situations. In the messages, you can only use plain text; do not use HTML tags and entities.
Allowing HTML in a message can be a security risk; Contact Form 7 4.4 and later forcibly strip HTML when displaying the message. Review the Messages tab to make sure that you don’t have any HTML there.
If you do need to use HTML in a message because you want to display specific HTML content in a specific situation, there is a better alternative.
After a submission, Contact Form 7 adds a class
attribute value to the form
element that describes the state of the form. The possible states are:
invalid
— The form has one or more fields with invalid input;spam
— The user submission is suspected of spamming;sent
— The form has been submitted correctly and the mail has been sent successfully; and,failed
— The form has been submitted correctly, but sending the mail failed.
By utilizing those classes along with the CSS stylesheet, you can place a block of HTML content in your form that is visible only in the specified situation.
Let’s say your form contains a div
element with a visible-only-if-invalid
class which you would like to be invisible by default but visible when the form has invalid fields.
<div class="visible-only-if-invalid">
<font color="#f00">You have <marquee>invalid</marquee> fields!</font>
</div>
You can do it with the following CSS style rules:
.wpcf7 form div.visible-only-if-invalid {
display: none;
}
.wpcf7 form.invalid div.visible-only-if-invalid {
display: block;
}
Likewise, you can control the visibility of an element based on other situations.