联系表格 7：提交后如何将表格替换为 HTML 代码？

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.getElementsByClassName("myForm");
  let thankYouMessage = document.getElementsByClassName("thankYou");

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

}, false );

your HTML file:

<form class="myForm">
</form>

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

</div>

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