WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[closed] How do I customize the style/html of validation errors, success/error messages (17 posts)

  1. donrhummy
    Member
    Posted 1 year ago #

    Currently when there's a validation error, it simply prints it to the right of the input box. I want to be able to customize how and where it appears.

    I also want to be able to do this for the success and error messages for submitting the form as a whole.

    http://wordpress.org/extend/plugins/contact-form-7/

  2. davejampole
    Member
    Posted 1 year ago #

    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.

  3. primaveranz
    Member
    Posted 1 year ago #

    @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.

  4. davejampole
    Member
    Posted 1 year ago #

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

  5. donrhummy
    Member
    Posted 1 year ago #

    @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?

  6. Nykess
    Member
    Posted 1 year ago #

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

    Anyone else?

  7. biswajeet
    Member
    Posted 1 year ago #

    How about this one...?

  8. donrhummy
    Member
    Posted 1 year ago #

    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".

  9. Nykess
    Member
    Posted 1 year ago #

    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.

  10. pybiru
    Member
    Posted 11 months ago #

    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.

  11. vito75
    Member
    Posted 9 months ago #

    pybiru, great solution, thanks

  12. morespinach
    Member
    Posted 9 months ago #

    Is it possible to include HTML in the messages?

  13. pybiru
    Member
    Posted 9 months ago #

    Sure, in admin...

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

  14. morespinach
    Member
    Posted 9 months ago #

    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?

  15. pybiru
    Member
    Posted 9 months ago #

    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.

  16. morespinach
    Member
    Posted 9 months ago #

    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:
    http://i.imgur.com/Q9d1Hcy.png

    How it shows up on the website:
    http://i.imgur.com/RxOizKm.png

  17. pybiru
    Member
    Posted 9 months ago #

    I entered it exactly like yours there and it came out as HTML/ OK for me.

    Not sure why we are getting different results. Could be something to do with the theme maybe, or versions, are you on the latest version of the plugin and wordpress?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic