Contact Form 7
How to change forms confirmation message (2 posts)

  1. Katyxa
    Posted 5 years ago #

    I would like to see where I can change confirmation/error message that appears at the bottom of the form after user clicks on "submit" button. I want to change "Your message was sent successfully" message.

  2. brianrhea
    Posted 5 years ago #

    Hi Katyxa,

    Unfortunately, I cannot share a live demo with you because I just implemented for a client and the site is not live yet. However, I achieved what you're trying to accomplish with the following:

    I wanted the form itself to disappear and be replaced with a success message so I did this with jQuery.


    Go to Edit Contact Form 7 and scroll to the bottom to Additional settings. Input the following:

    on_sent_ok: "$('#contact-form').slideUp('slow'); $('#form-success').slideDown('slow'); "

    This is telling the form to hide the div id #contact-form and to display the div #form-success


    Insert the following code after wherever you have placed the Contact Form 7 call.

    <div id="form-success" class="hidden">
    	<h3>Thank You!</h3>
    	<p>We have received your information and we will be in touch as soon as possible</p>

    I styled the div id form-success to look just like contact-form, but that's your call of course. Add the following to your CSS:

    .hidden {
    	display: none;

    This will make the success message invisible when the page first loads. I suppose it could be a part of the form-success style as well, but I implement this in different areas of the site so it's just useful for me to have one class I can call on.


    Test! I hope it works for you and you're happy with the results.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic