Contact Form 7: How to replace the form with an HTML code after submission?

Question

I am developing a web form with WordPress and Contact Form 7. The form is working OK. However, I want the entire form to be replaced with a thank you message and an image. I don't want to redirect to a thank you page. I want to just replace the form and stay on the same page. Can you understand?

Can anyone point me to a solution?

Thanks.

Answer 1

You should use DOM Events as stated on this Contact Form 7 Documentation Page

For your example the code could look like this:

script.js

document.addEventListener( 'wpcf7submit', function( event ) {
  let form = document.getElementById("myForm");
  let thankYouMessage = document.getElementById("thankYou");

  form.style.display = 'none';
  thankYouMessage.style.display = 'block';

}, false );

your HTML file:

<form id="myForm">
</form>

<div id="thankYou">
<img src="" />
<h2>Thank you for your submit!</h2>

</div>

Now just set display:none; for the container with id thankYou and you are good to go!