禁用聯系表 7 表單提交

Question

我正在為我的 WP 網站使用聯系表。 我想在提交表單之前調用一些函數。

我想我可以使用以下代碼禁用提交表單：

let form = document.querySelector('form');
form.addEventListener('submit', function(ev){
    ev.preventDefault();
    //some more functions
});

出於某種原因，這不起作用，CF7 仍在提交我的表單。 有人知道如何防止提交功能。

我不想在按鈕上使用禁用的功能，因為這樣表單會失去它的原始功能。

Answer 1

我在我的頁面上嘗試過，遇到了同樣的問題。

嘗試使用input[type=submit]而不是form 。

let form = document.querySelector('input[type=submit]');
form.addEventListener('click', function(e) {
    e.preventDefault();
})

編輯：

如果您在 HTML 中只使用 1 個表單，這將起作用：

window.addEventListener('submit', function(e) {         
    e.preventDefault();
}, true)

Answer 2

選項是阻止“單擊”提交輸入。 所以不是你需要的 100%，但對我來說它可以完成工作。

不確定這是否不符合您的條件以避免“按鈕上的禁用功能”，但對我來說，表單保留原始功能，僅取決於用戶的決定。

 var submit = document.getElementsByClassName('wpcf7-submit')[0]; submit.addEventListener('click', function(e) { var confirmMessage = 'If you require a response, please make sure you have completed the 'Name' and 'Email' fields.'; if (!confirm(confirmMessage)) { e.preventDefault(); } });

 <form method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate"> <p><label> Name<br> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p> <p><label> Email address<br> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false"></span> </label></p> <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form>

Answer 3

Quickfix，應該通過擴展這個js來重構。 作為用戶體驗，我在第一次提交點擊后添加了一個 GIF 圖像而不是按鈕。

對於尚未在 contact-form-7/includes/js/scripts.js 中找到解決方案的任何人，現在搜索第 499 行，可能在更改期間，您有 wpcf7.clearResponse，在此函數中添加：

var str = '<img src="path_of_file"/>';

$('.wpcf7-submit').replaceWith(str);

單擊后，這將使用路徑為 path_of_file 的圖像替換您的按鈕。