Contact Form7邮箱可选提交异常：取消仍提交、提示闪失问题

需求与问题 #

核心需求 #

• 将Contact Form7中的邮箱字段设为可选，显示文本为Email (optional)
• 用户未填写邮箱提交时，弹出确认提示："You haven't entered an email, so we can't get back to you. Do you still want to submit your message?"，提供「Submit」和「Cancel」选项
  • 点击Submit：正常提交表单并显示提交成功提示
  • 点击Cancel：直接阻止表单提交

遇到的问题 #

用户尝试两段代码后均存在异常：

1. 第一段代码：点击Cancel后表单仍会自动提交
2. 第二段代码：解决了取消提交的问题，但出现页面偶尔刷新、提交成功后的「thank you」提示框一闪而过无法停留的异常

用户尝试的代码 #

第一段代码 #

function custom_wpcf7_validation_script() {
    ?>
    <script>
    document.querySelector('form.wpcf7-form').addEventListener('submit', function(event) {
        var form = event.target;
        var emailField = form.querySelector('[name="your-email"]');
        var emailValue = emailField ? emailField.value : '';

        if (!emailValue) {
          event.preventDefault();

          if (confirm("You haven't entered an email, so we can't get back to you. Do you still want to submit your message?")) {
            // form.submit();
            form.querySelector('input[type="submit"]').click();
          } else {
            return false;
          }
        }
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_wpcf7_validation_script',1);

第二段代码 #

function custom_wpcf7_validation_script() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('#fake-submit-form').on('click', function(e) {
            e.preventDefault(); // Prevent default form submit

            var emailField = $('input[type="email"]').val();
            
            // Check if the email field is empty
            if (!emailField) {
                if (confirm("You haven't entered an email, so we can't get back to you. Do you still want to submit your message?")) {
                    // If the user confirms, trigger the form submission
                    // This will trigger Contact Form 7's submit process                  
               jQuery( '.wpcf7-submit' ).trigger( 'click' );
                } else {
                    // If the user cancels, do nothing
                    return false;
                }
            } //else {
                // If the email field is filled, trigger the form submission
                    
               jQuery( '.wpcf7-submit' ).trigger( 'click' );

            //}
        });
    });
</script>
    <?php
}
add_action('wp_footer', 'custom_wpcf7_validation_script',1);

解决方案 #

正确实现代码 #

function custom_wpcf7_email_confirm() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const wpcf7Form = document.querySelector('.wpcf7-form');
        if (!wpcf7Form) return;

        let isConfirmed = false; // 标记是否已确认提交，避免重复弹窗

        wpcf7Form.addEventListener('submit', function(e) {
            const emailField = wpcf7Form.querySelector('[name="your-email"]');
            const emailValue = emailField ? emailField.value.trim() : '';

            // 邮箱为空且未确认过，阻止默认提交流程
            if (!emailValue && !isConfirmed) {
                e.preventDefault();
                
                const confirmSubmit = confirm("You haven't entered an email, so we can't get back to you. Do you still want to submit your message?");
                if (confirmSubmit) {
                    isConfirmed = true; // 设置确认标记
                    wpcf7Form.dispatchEvent(new Event('submit')); // 触发原生表单提交，兼容CF7的AJAX逻辑
                }
                // 取消提交则无操作，表单不会提交
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_wpcf7_email_confirm', 10);

关键说明 #

1. 表单前置设置：先在Contact Form7编辑器中，去掉邮箱字段的「必填项」勾选，修改字段标签为Email (optional)
2. 避免重复触发：通过isConfirmed标记，防止用户确认提交后再次弹出提示框
3. 兼容CF7逻辑：使用dispatchEvent触发原生提交事件，完全兼容Contact Form7的AJAX提交流程，不会导致页面刷新或提示框闪烁
4. DOM加载判断：确保DOM完全加载后再绑定事件，避免找不到表单元素的问题

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