在联系表单7中：通知用户如果未输入电子邮件就提交表单，如果用户单击取消按钮然后停止提交表单，则显示确认框

Question

在联系表 7 中，电子邮件字段应该是可选的，并且应该显示“电子邮件（可选）”以使其显而易见。如果有人尝试在未输入电子邮件的情况下提交消息，他们应该会看到一个弹出窗口，显示“您尚未输入电子邮件，因此我们无法回复您。您是否仍要提交消息？ ”选项应该是“提交”和“取消” - 如果用户单击“提交”，他们应该像平常一样显示一条确认消息。

我尝试了这个，但不起作用，它显示了一个确认框，但是当我单击取消按钮时，表单已提交，并且在单击取消按钮表单提交时不会阻止表单提交

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);

Answer 1

因此，仅在提交之后“提交之前”没有本机 cf7 javascript 事件侦听器，因此我将创建一个“假提交”按钮，并使 cf7 提交不可见（显示：无）。

您的表单标签应包含类似的内容（您的 css 类可以根据您的需要而变化）

<a href="#" id="fake-submit-form" class="btn btn-primary">Submit</a>

[submit class:d-none class:btn-submit "Enquire"]

然后将此脚本添加到您的主题 js 文件中或使用 wp_add_inline_script 而不是

wp_footer

jQuery( '#fake-submit-form' ).on(
    'click',
    function ( e ) {
        e.preventDefault();
        let emailField = jQuery( 'input[name="your-email"]' ).val();
        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?" )) {
                // form.submit();
                jQuery( '.wpcf7-submit' ).trigger( 'click' );
            } else {
                return false;
            }
        }
        jQuery( '.wpcf7-submit' ).trigger( 'click' );
    }
);