How to Hide the Contact Form 7 After Submission?

When using the Contact Form 7 plugin on WordPress, you may want to hide the contact form on submission and display only the success message. This improves user experience by confirming that their submission has been successfully processed without showing the empty form again.

Contact Form 7 does not provide any in-built function to hide the contact form on submission. The success message is displayed at the end of the form, which can go unnoticed. This often leaves users confused whether the form was successfully submitted.

In this guide, let us see how we can hide the Contact Form 7 contact form on submit and show only the success message using Contact Form 7’s DOM events and JavaScript.

How to Hide the Contact Form After Successful Submission in Contact Form 7?

You want the form to disappear after the user submits it, leaving only the success message visible? You can achieve this using a DOM event listener and a simple JavaScript snippet.

To run custom JavaScript after a form submission, you can use the wpcf7mailsent event, which is triggered when the form has been submitted and the mail sent successfully.

Option 1: Adding Code to functions.php

1. Open the functions.php file of your active theme. This file can be found by navigating to Appearance > Theme File Editor > Theme Functions in your WordPress dashboard. If you have a Full Site Editing (FSE) theme, you can find the Theme File Editor menu under the Tools menu.
2. Add the following code to the bottom of your functions.php file:

add_action( 'wp_footer', 'speckygeek_wp_footer' );

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

Option 2: Add the Javascript via Plugin

Alternatively, you can also add the script in your WordPress website using any WordPress plugin that allows you to add custom codes to your website footer.

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

Option 3: Adding Javascript in Theme’s JS File

You can also add the Javascript code directly to any JS file loaded in the front-end by your your active WordPress theme. Simply add the code snippet (without the <script> tags) to your custom JavaScript file.

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

This script works by selecting all elements within the form (except for the success message container .wpcf7-response-output) and hiding them by setting their display property to none.

Conclusion

By utilizing Contact Form 7’s DOM events, you can effectively hide your form upon successful submission and only display the success message. You also use this method to run custom scripts, such as Google Analytics tracking, after the form has been successfully submitted.

This approach ensures compatibility with future versions of Contact Form 7, while allowing you to maintain full control over the form’s behavior post-submission.