How do I customize the style/html of validation errors, success/error messages

Go to: dashboard, click Contact’, mouseover the form in question and click on ‘Edit’ which appears under the form name. When the form design page opens, scroll down the page and you will see all the messages available. Any of them can be customized as much as you want.

@dave, So on that page, say you want to change the position of the element
“# Sender’s message was failed to send”

How/where do you apply the CSS?
Thanks.

You’re beyond what I can do. Someone else is going to have to jump in. Sorry

@primaveranz I figured it out (not for individual fields yet, but for the failed to send message). There’s a field called [response] that you can wrap like this (you do it in the section of WordPress where you create the form itself)

<div class=”someClassIMakeUp” id=”anyIDIWant”>[response]</div>

Then you can move that div anywhere you want.

What I still don’t know how to do is move the error responses for indivudal validations. How do I do this?

donrhummy, did you ever figure out how to move the error responses for individual validations?

Anyone else?

How about this one…?

Nykess – the only way I was able to figure out was with javascript. In WordPress (under Contact Form 7) when you’re creating a form, at the bottom there’s a place where you can put some javascript to be called when it submits. You can make this call your function which then looks for (if I remember correctly) the elements of class “wpcf7-not-valid-tip”.

I am no good with javascript, unfortunately, so I would need more detailed instructions. I do appreciate you taking the time to reply, though.

biswajeet, that would work perfectly. Do you have any instructions about how to accomplish that?

Thank you.

I just wanted to make the borders of the inputs red. Some CSS knowledge required.

Hide standard error messages with…

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

Then if the form is invalid, it adds a class “invalid” to the form itself. So then to make fields that are invalid highlighted in red…

form.invalid input.wpcf7-not-valid{
  border:1px solid red;
  background:#f0e3e3;
}

That’s one solution anyway.

pybiru, great solution, thanks

Is it possible to include HTML in the messages?

Sure, in admin…

Left sidebar->Contact(cf7 plugin)->Click on your form->look for tab titled “Messages”. You can include HTML in these fields.

Nope, that doesn’t work. It simply prints out the html…as if it were a <pre> tag in HTML. How can I make it print the HTML as real HTML, not as code?

Hmm, I did it locally and it worked for me. I entered…

<em style='color:green'>Validation errors occurred. Please confirm the fields and submit it again.</em>

Not sure why it’s different for you.

It neither works on my localhost, nor on the website. It has never worked, ever, with HTML. Hence the question. What am I missing?

Screenshots as proof…

Inside the WP admin area:
https://i.imgur.com/Q9d1Hcy.png

How it shows up on the website:

View post on imgur.com