Back to Community
Home / Community / Plugin → Contact form 7

How to Customize What Happens After a Contact Form 7 Submission

32 threads Sep 7, 2025 Plugin → Contact form 7

Content

One of the most common questions from Contact Form 7 users is how to control what happens after a visitor clicks the submit button. Many users want to go beyond the default behavior of displaying a success message on the same page. Common requests include hiding the form, redirecting to a thank you page, triggering a print dialog, or displaying a large, custom success message.

This guide explains why this customization is needed and provides the most common solutions based on community knowledge.

Why Contact Form 7 Behaves This Way

By design, Contact Form 7 is a lightweight form handler. Its core functionality is to process form submissions via AJAX and then display a response message (like 'Your message was sent successfully') within the wpcf7-response-output div, which is located inside the form itself. This simple approach works for most basic use cases but lacks built-in options for more advanced post-submission actions, which is why users often seek customization.

Common Solutions for Customizing Post-Submission Actions

1. Redirecting to a Thank You Page

This is a highly requested feature. To redirect a user to another URL after a successful submission, you can use the wpcf7mailsent DOM event. This JavaScript event fires when the mail is successfully sent.

How to implement it:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '123' === event.detail.contactFormId ) { // Replace 123 with your form's ID
        location = 'https://yourwebsite.com/thank-you/';
    }
}, false );
</script>

You will need to add this code to your theme's footer or using a plugin that allows you to insert header/footer scripts. Remember to replace 123 with your actual form ID and the URL with your thank you page.

2. Hiding the Form After Submission

If you want to stay on the same page but hide the form, leaving only the success message visible, you can also use JavaScript.

Example code:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    // Hide the form
    document.querySelector('.wpcf7-form').style.display = 'none';
    
    // Optionally, you can also style the success message to make it bigger
    document.querySelector('.wpcf7-response-output').style.fontSize = '2em';
}, false );
</script>

3. Triggering a Custom Action (Like window.print())

As mentioned in the sample threads, some users want to trigger a print dialog without leaving the page. The wpcf7mailsent event is perfect for this.

Example code to open a print dialog:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.print();
}, false );
</script>

4. Using a Thank You Page Redirect Plugin

For users who are not comfortable adding code, several third-party plugins can add redirect functionality through a simple settings interface. Searching the WordPress plugin repository for "contact form 7 redirect" will yield several options.

Important Considerations

  • Form ID: Always check and use the correct Contact Form 7 ID in your JavaScript conditions to ensure your code only affects the intended form.
  • Testing: Thoroughly test any custom code on a staging site before deploying it to your live website.
  • HTML in Messages: Note that HTML, including links (<a href>), is not allowed in the default success messages. Customizing the success message appearance typically requires the JavaScript solutions shown above or custom CSS.

By leveraging these JavaScript events, you can significantly extend the default post-submission behavior of Contact Form 7 to create a smoother user experience tailored to your website's needs.

Related Support Threads Support