If you want to hide Contact Form 7 after submission, this guide shows a clean and reliable way to do it while displaying a custom success message using a CSS-only approach.

Recently, while creating a new form on our website using Contact Form 7 (CF7), I noticed something that can easily confuse users.

CF7 is the commonly used short name for the Contact Form 7 plugin, which is widely adopted across WordPress websites.

After submitting the form, the success message appeared, but the form itself was still visible. When users work with multiple browser tabs or return to the page later, it becomes difficult to remember whether the form was already submitted or not.

This behavior is default in Contact Form 7, but from a real user experience point of view, it is far from ideal. That is when I decided to hide the form after submission and show a clear, custom success message instead.

This guide explains exactly how I solved the issue using a CSS-only approach, which works reliably across themes, caching plugins, and future Contact Form 7 updates.

How to Hide the Contact Form 7 After Submission

Contact Form 7 (commonly known as CF7) is one of the oldest and most widely used contact form plugins in the WordPress ecosystem.

Since its launch, Contact Form 7 has become a go-to solution for WordPress site owners who need a simple, flexible, and free way to create contact forms without relying on heavy page builders or proprietary systems.

With millions of active installations and long-term community support, CF7 plays an important role in WordPress websites of all sizes, from personal blogs to business and enterprise sites.

One of the reasons Contact Form 7 remains popular is its lightweight architecture. It integrates cleanly with WordPress core, supports AJAX-based submissions, and works well with custom themes, caching plugins, and third-party integrations.

Tip: If you also want to store CF7 submissions automatically in Google Sheets, the CF7 Google Sheet Connector lets you sync entries in real time without changing your existing form setup.
Download Free version Now

However, because CF7 focuses on simplicity, some user-experience features such as hiding the form after submission, are not enabled by default. This is where many WordPress users start looking for practical enhancements.

While working with CF7 on our own website, this limitation became very noticeable. After submitting a form, the success message appeared, but the form itself was still visible, which created confusion, especially when users had multiple browser tabs open.

Below is the exact method I used to hide the Contact Form 7 form after submission and show a clear, custom success message using a clean and reliable CSS-only approach.

Why Contact Form 7 Doesn’t Hide the Form Automatically

Contact Form 7 submits forms using AJAX. This means the page does not reload after submission, and the form remains visible unless you manually change its behavior.

By design, Contact Form 7 only shows a small confirmation message at the bottom of the form. While this works for basic setups, it quickly becomes limiting for real-world websites.

Common issues CF7 users face include:

• The form staying visible after submission
• Users submitting the same form twice accidentally
• Unclear confirmation when navigating between tabs
• Default success messages not matching site design

Why This Becomes a UX Problem

When users submit a form, they expect a clear confirmation that the action is complete. Leaving the form visible creates uncertainty.

This is especially problematic for:

• Lead generation forms
• Case study or application submissions
• Support request forms
• Multi-tab browsing scenarios

From a usability standpoint, hiding the form after submission removes ambiguity and gives users clear closure.

The Correct Way to Detect a Successful Submission

After a successful submission, Contact Form 7 automatically updates the form markup with the following attribute:

<form class="wpcf7-form sent" data-status="sent">

The data-status=”sent” attribute is native to CF7 and remains consistent across versions. This makes it the most reliable way to detect when a Contact Form 7 submission has completed successfully.

Instead of relying on JavaScript events, we can use this attribute directly with CSS.

Step 1: Add a Custom Success Message Below the Form

First, place your Contact Form 7 shortcode. Immediately after it, add your custom success message container.

Use the structure below exactly as shown:

[contact-form-7 id="8XXa7ee" title="Case Studies Form"]
<!-- Replace the Contact Form 7 shortcode above with your own CF7 form ID and title -->

<div class="cf7-custom-success">
<wp-p style="font-size: 50px; color: #039436;">✔</wp-p>

<h3>Your request has been submitted successfully</h3>

You should receive a confirmation email shortly. If you do not see it, please check your spam folder or ensure emails from
<a href="mailto:abdullah@gsheetconnector.com">abdullah@gsheetconnector.com</a> are allowed.

If you still cannot find the confirmation email, feel free to contact us via
<a href="https://m.me/gsheetconnectorofficial" rel="nofollow">Facebook Messenger</a>
or
<a href="https://twitter.com/intent/follow?screen_name=GSheetConnector" rel="nofollow">Twitter</a>.
</div>

This message remains hidden until the Contact Form 7 submission is successful.

Step 2: Use This CSS-Only Solution

Add the following CSS to Appearance → Customize → Additional CSS.
If you prefer not to use global CSS, the same styles can also be applied directly on the form page using a custom code snippet.

/* Hide default Contact Form 7 success message */
.wpcf7-response-output {
    display: none !important;
}

/* Hide custom success message initially */
.cf7-custom-success {
    display: none;
    text-align: center;
    padding: 30px;
}

.cf7-custom-success h3 {
    color: #039436;
    margin-bottom: 10px;
}

.cf7-custom-success p {
    font-size: 16px;
}

/* Hide the form after successful submission */
.wpcf7 form[data-status="sent"] {
    display: none;
}

/* Show custom success message after submission */
body:has(.wpcf7 form[data-status="sent"]) .cf7-custom-success {
    display: block !important;
}

Hide Contact Form 7 After Submission & Show Custom Success Message

Why This Method Works Reliably

• Uses Contact Form 7’s native submission state
• No JavaScript dependency
• No page reloads
• Stable across CF7 updates
• Compatible with caching and optimization plugins

Managing Contact Form 7 Submissions Efficiently

Once you improve the user experience by hiding the form after submission, the next challenge is managing the submitted data.

Many site owners prefer storing CF7 submissions in Google Sheets for easier tracking and collaboration. If you are already using CF7, you may find tools like GSheetConnector integrations helpful for syncing form entries automatically.

One important thing to note is that this solution does not require installing any additional plugins. With a few simple tweaks using Contact Form 7’s native submission state and CSS, the form behavior can be improved cleanly and reliably.

Final Result

After applying this solution:

• The Contact Form 7 form is hidden immediately after submission
• The default CF7 success message is removed
• A custom success message is shown clearly
• Users are no longer confused about submission status

Frequently Asked Questions

How do I hide Contact Form 7 after submission?

You can hide Contact Form 7 after submission by targeting the form’s data-status=”sent” attribute with CSS. This method avoids JavaScript and works reliably.

Does Contact Form 7 hide the form automatically?

No. By default, Contact Form 7 only shows a confirmation message and keeps the form visible.

Is this solution safe for future CF7 updates?

Yes. It relies on Contact Form 7’s internal submission state, which is stable across versions.

Can I use this with caching plugins?

Yes. Since this is a CSS-only approach, it works well with caching and performance plugins.