提交Contact Form 7表单后修改容器及H2样式的实现求助

Got it, let's work through this issue to get your background color change working after a successful CF7 submission. The problem with your initial attempts is likely either using the wrong event listener for CF7's AJAX submissions, or placing your code in the wrong spot (CF7's "Additional Settings" isn't meant for raw JavaScript). Here's the step-by-step solution:

1. Use Contact Form 7's Specific Success Event #

Contact Form 7 uses AJAX for submissions, so standard submit event listeners won't catch the success state correctly. Instead, use CF7's built-in wpcf7mailsent event, which triggers right after a form is submitted successfully and the email is sent.

2. Add the JavaScript Code #

Place this code in your theme's custom JavaScript area (usually under Appearance > Customize > Additional JS) or use a code snippet plugin to inject it into your site:

document.addEventListener('wpcf7mailsent', function(event) {
  // Target the .right-side-product-page container and add your custom class
  const productContainer = document.querySelector('.right-side-product-page');
  if (productContainer) {
    productContainer.classList.add('bg-white-override');
  }

  // Target all <h2> elements on the page and add the class
  const pageHeadings = document.querySelectorAll('h2');
  pageHeadings.forEach(heading => {
    heading.classList.add('bg-white-override');
  });
}, false);

Why this works: #

• We're listening specifically for CF7's success event, so the code only runs when the form submits successfully.
• We check if the container exists before modifying it to avoid console errors.
• We loop through all <h2> elements to apply the class universally.

3. Add the CSS to Enforce White Background #

Add this CSS to your site's Additional CSS section (under Appearance > Customize > Additional CSS) to make the background change take effect:

/* Override background for the product container */
.right-side-product-page.bg-white-override {
  background-color: #ffffff !important;
}

/* Override background for all H2 elements */
h2.bg-white-override {
  background-color: #ffffff !important;
}

Note on !important: #

We use !important here to ensure this style overrides any existing blue/grey background styles that might have higher specificity. If you find you don't need it after testing, you can remove it.

4. Avoid Placing JS in CF7's "Additional Settings" #

Just a quick correction: CF7's "Additional Settings" field is for plugin-specific configuration directives (like setting custom success messages), not raw JavaScript. That's why your previous attempts there didn't work.

Test submitting your form now—after a successful submission, the .right-side-product-page container and all <h2> elements should get the bg-white-override class, switching their backgrounds to white.

内容的提问来源于stack exchange，提问作者BillyW