求助：为Contact Form 7添加全选复选框与展开/收起按钮的实现方法

我来帮你搞定这个需求，咱们不用依赖第三方插件（避免冲突），直接通过自定义HTML、CSS和JS来实现。下面是完整的步骤：

1. 替换Contact Form 7的表单代码 #

把你现有的表单代码替换成下面这段，我已经整合了所有需求的结构：

<div class="fullwidthcontactinputinlinesmall">
  <label> Wybierz temat [select* menu-1 include_blank "Kredyt" "Pożyczka" "Współpraca" "Inny"]</label>
</div>
<div class="onehalfcontactinputinlinesmall">
  [text* text-1 placeholder "Imię i nazwisko*"]
</div>
<div class="onehalfcontactinputinlinesmall">
  [tel* tel-1 placeholder "Telefon kontaktowy*"]
</div>
<div class="onehalfcontactinputinlinesmall">
  [email* email-1 placeholder "Adres e-mail*"]
</div>
<div class="onehalfcontactinputinlinesmall">
  [text* text-2 placeholder "Kwota kredytu"]
</div>
<div class="contacttextarea">
  [textarea* textarea-1 placeholder "Treść wiadomości*"]
</div>

<!-- 全选复选框 -->
<div class="consent-group">
  [acceptance acceptance-all class:consent-all] Zaznacz wszystkie zgody [/acceptance]

  <!-- 隐私政策复选框 -->
  [acceptance acceptance-1 class:consent-item] Lorem Ipsum has been the industry's standard dummy text ever since the 1500s <a href="#privacy-policy">polityka prywatnosci</a>. [/acceptance]

  <!-- 营销同意折叠区域 -->
  <div class="marketing-consent-wrapper">
    <button type="button" class="toggle-marketing-btn">Pokaż więcej</button>
    <div class="marketing-consent-content" style="display: none;">
      [acceptance acceptance-2 class:consent-item] Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text [/acceptance]
      [acceptance acceptance-3 class:consent-item] Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's s [/acceptance]
    </div>
  </div>
</div>

[submit id:submitButton "Wyślij"]

2. 添加自定义CSS #

把这段CSS添加到你的WordPress主题的「自定义CSS」面板（外观→自定义→额外CSS），或者子主题的style.css文件中：

/* 同意项布局样式 */
.consent-group {
  margin: 20px 0;
}
.consent-item {
  margin: 10px 0;
}
.consent-all {
  font-weight: bold;
  margin-bottom: 15px;
}

/* 折叠按钮样式 */
.toggle-marketing-btn {
  background: none;
  border: none;
  color: #0073aa;
  cursor: pointer;
  padding: 5px 0;
  text-decoration: underline;
  font-size: 14px;
}
.toggle-marketing-btn:hover {
  color: #006799;
}

.marketing-consent-content {
  margin-top: 10px;
  padding-left: 25px;
}

3. 添加自定义JavaScript #

把这段JS代码添加到你的主题的footer.php文件（结束</body>标签前），或者使用「自定义HTML」小工具添加到页面底部，也可以用CF7的自定义JS插件：

document.addEventListener('DOMContentLoaded', function() {
  // 全选/反选功能
  const allCheckbox = document.querySelector('.consent-all input');
  const consentItems = document.querySelectorAll('.consent-item input');

  allCheckbox.addEventListener('change', function() {
    consentItems.forEach(item => {
      item.checked = this.checked;
    });
  });

  // 单个复选框取消时，取消全选
  consentItems.forEach(item => {
    item.addEventListener('change', function() {
      if (!this.checked) {
        allCheckbox.checked = false;
      } else {
        // 检查是否所有项都选中，是则勾选全选
        const allChecked = Array.from(consentItems).every(i => i.checked);
        allCheckbox.checked = allChecked;
      }
    });
  });

  // 展开/收起营销同意项
  const toggleBtn = document.querySelector('.toggle-marketing-btn');
  const content = document.querySelector('.marketing-consent-content');

  toggleBtn.addEventListener('click', function() {
    if (content.style.display === 'none') {
      content.style.display = 'block';
      this.textContent = 'Ukryj';
    } else {
      content.style.display = 'none';
      this.textContent = 'Pokaż więcej';
    }
  });
});

关键说明 #

• 全选功能：点击第一个复选框会自动选中/取消所有其他三个同意项；如果手动取消某个子项，全选框也会自动取消。
• 折叠功能：「Pokaż więcej」按钮会切换显示/隐藏第三、四个营销用复选框，避免表单过长。
• 兼容性：这段代码不依赖任何第三方插件，和Contact Form 7原生功能完全兼容，不会出现插件冲突问题。
• 样式自定义：你可以根据自己网站的风格修改CSS中的颜色、间距等属性，比如把按钮颜色换成你品牌的主色调。
• 链接替换：记得把隐私政策链接的#privacy-policy替换成你网站实际的隐私政策页面地址。

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