求助：在WordPress的Contact Form 7手风琴报价系统中实现选中项汇总

Hey there! Great question—you’re absolutely right that JavaScript is the way to go here. Let’s walk through a step-by-step solution that’ll generate that selected items summary under each corresponding accordion title at the bottom of your page, working seamlessly with Contact Form 7.

Step 1: Prepare Your HTML Structure #

First, make sure your accordion sections have consistent classes to make DOM traversal easy. Adjust the classes below to match your existing accordion setup if needed:

<!-- Example accordion section -->
<div class="accordion-section">
  <h3 class="accordion-title">素食小食</h3>
  <div class="accordion-content">
    <!-- Contact Form 7 checkbox group -->
    <div class="wpcf7-form-control-wrap checkbox-537">
      <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-537[]" value="蔬菜春卷">
          <span class="wpcf7-list-item-label">蔬菜春卷</span>
        </span>
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-537[]" value="素煎饺">
          <span class="wpcf7-list-item-label">素煎饺</span>
        </span>
      </span>
    </div>
  </div>
</div>

Step 2: Add the JavaScript Code #

You can add this code to your WordPress site via a custom HTML block, your theme’s functions.php (enqueued as a script), or a plugin like Code Snippets. This script will handle both real-time summary updates and post-submission display:

document.addEventListener('DOMContentLoaded', function() {
  const cf7Form = document.querySelector('.wpcf7-form');
  if (!cf7Form) return;

  // Helper function to generate/update the summary
  function updateSummary() {
    let summaryContainer = document.getElementById('selected-items-summary');
    
    // Create summary container if it doesn't exist
    if (!summaryContainer) {
      summaryContainer = document.createElement('div');
      summaryContainer.id = 'selected-items-summary';
      summaryContainer.style.marginTop = '30px';
      cf7Form.parentNode.insertBefore(summaryContainer, cf7Form.nextSibling);
    }
    
    // Clear existing content
    summaryContainer.innerHTML = '<h2>您选择的项目汇总</h2>';

    // Loop through each accordion section to collect selected items
    document.querySelectorAll('.accordion-section').forEach(section => {
      const accordionTitle = section.querySelector('.accordion-title').textContent.trim();
      const checkedBoxes = section.querySelectorAll('.wpcf7-checkbox input[type="checkbox"]:checked');

      if (checkedBoxes.length > 0) {
        // Build summary section for this accordion
        const accordionSummary = document.createElement('div');
        accordionSummary.className = 'accordion-summary';
        accordionSummary.innerHTML = `<h3>${accordionTitle}</h3>`;

        // Create list of selected items
        const itemList = document.createElement('ul');
        checkedBoxes.forEach(box => {
          const listItem = document.createElement('li');
          listItem.textContent = box.nextElementSibling.textContent.trim();
          itemList.appendChild(listItem);
        });

        accordionSummary.appendChild(itemList);
        summaryContainer.appendChild(accordionSummary);
      }
    });
  }

  // Update summary when form is submitted
  cf7Form.addEventListener('submit', function(e) {
    updateSummary();
    // Uncomment below if you want to delay form submission for summary visibility
    // e.preventDefault();
    // setTimeout(() => cf7Form.submit(), 2000);
  });

  // Optional: Update summary in real-time as checkboxes are toggled
  document.querySelectorAll('.wpcf7-checkbox input[type="checkbox"]').forEach(box => {
    box.addEventListener('change', updateSummary);
  });
});

Step 3: Style Your Summary (Optional) #

Add this CSS to make your summary look clean and match your site’s design:

#selected-items-summary {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-top: 40px !important;
}

.accordion-summary {
  margin-bottom: 20px;
}

.accordion-summary h3 {
  margin-bottom: 10px;
  color: #2d3748;
}

.accordion-summary ul {
  list-style-type: disc;
  margin-left: 20px;
  color: #4a5568;
}

Key Notes #

• If your accordion uses different classes (e.g., from a plugin like Elementor), adjust the selectors .accordion-section and .accordion-title to match your actual HTML.
• The real-time update feature is optional but improves user experience by letting visitors see their selections as they go.
• If you want the summary to stay visible after CF7’s AJAX submission, you don’t need to prevent default form submission—since the page won’t refresh, the summary will remain.

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