brianrhea

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.

STEP ONE

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

STEP TWO

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>
</div>

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.

STEP THREE

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