Contact Form 7: hide form after successfully sent, and only display success message.

Posted on by Jules

Sometimes you may want to hide your form after a visitor has completed it, and only show the success message.

You can achieve this with the following code snippet: 

<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    document.querySelectorAll("form.wpcf7-form > :not(.wpcf7-response-output)").forEach(el => {
      el.style.display = 'none';
    });
  }, false );
</script>

You can add this either in your theme’s JS file, or in the form code itself.

Notes:

  • If you choose to add this snippet in a JS file, make sure to remove the <script> and </script> tags.
  • If you choose to add it in your form code, add the snippet to the bottom of the form. Keep the <script></script> tags, but make sure to not add any blank lines, because CF7 will convert these to <p> tags automatically.