修复Contact Form7提交成功后5000秒自动恢复内容的无效代码

原代码的问题点 #

• 重复监听同一事件的不同命名（新版CF7标准事件为wpcf7mailsent，无需同时绑定旧版的wpcf7-mail-sent-ok）
• jQuery代码语法错误：jQuery('form.wpcf7form')[1000].reset() 逻辑完全错误，且未设置延迟执行
• 缺失5秒后恢复表单显示状态的核心逻辑
• 不必要的event.preventDefault()会干扰CF7默认的成功处理流程

修正后的代码 #

document.addEventListener('wpcf7mailsent', function(event) {
    // 获取需要操作的DOM元素
    const qtWRP = document.querySelector('.qtWRP');
    const inputBTMx = document.querySelector('.inputBTMx');
    const cap = document.querySelector('.cap');
    const qtWRP2 = document.querySelector('.qtWRP2');
    const form = document.querySelector('form.wpcf7form');

    // 切换显示：隐藏表单，展示感谢提示
    qtWRP.style.display = 'none';
    inputBTMx.style.display = 'none';
    cap.style.display = 'none';
    qtWRP2.style.display = 'block';

    // 5秒后恢复原状（若确实需要5000秒，将5000改为5000*1000）
    setTimeout(() => {
        // 恢复表单显示，隐藏感谢提示
        qtWRP.style.display = 'block';
        inputBTMx.style.display = 'block';
        cap.style.display = 'block';
        qtWRP2.style.display = 'none';

        // 重置表单内容，避免元素不存在时报错
        form?.reset();
    }, 5000);
});

代码说明 #

1. 统一使用新版CF7的wpcf7mailsent事件监听提交成功状态
2. 先切换元素显示状态，展示自定义感谢提示
3. 通过setTimeout设置5秒延迟，自动恢复表单显示并重置表单内容
4. 使用可选链操作符form?.reset()，避免表单元素不存在时触发报错

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