如何在 Wordpress“联系表格 7”中禁用提交按钮并更改表单提交上的文本

Question

我正在使用"contact form 7"WordPress 插件。

我想禁用表单提交上的提交按钮并更改文本，例如

"Submitting...." 并在成功或错误时启用，以便用户可以再次单击。

Answer 1

请使用此代码禁用提交按钮。

jQuery('.wpcf7-submit').on('click',function(){
    jQuery(this).prop("disabled",true); // disable button after clicking on button
});

我们知道contact form 7插件在提交后会返回各种响应。

这是邮件发送事件：

 document.addEventListener( 'wpcf7mailsent', function( event ) {
      jQuery(this).prop("disabled",false);// enable button after getting respone
    }, false );

查看联系表 7 的所有活动

更新：

document.addEventListener( 'wpcf7submit', function( event ) {
    var status = event.detail.status;  
    console.log(status);  
    //if( status === 'validation_failed'){
        jQuery('.wpcf7-submit').val("Send");
    //}    
}, false );

jQuery('.wpcf7-submit').on('click',function(){
    jQuery(this).val("Submitting....");
});

注： 表单提交后返回、等status响应。validation_failedmail_sent

Answer 2

以上答案对我不起作用，可能与最新版本的 CF7 冲突。

无论如何，我已经更新了上面的代码，以便它适用于最新版本。

我还改进了代码，使其适用于网站上的任何表单，而不管提交按钮说什么。

它禁用提交按钮，更改值以要求用户耐心等待，然后当表单完成提交时，恢复原始提交值。

/**
 * Disable WPCF7 button while it's submitting
 * Stops duplicate enquiries coming through
 */
document.addEventListener( 'wpcf7submit', function( event ) {
    
    // find only disbaled submit buttons
    var button = $('.wpcf7-submit[disabled]');

    // grab the old value
    var old_value = button.attr('data-value');

    // enable the button
    button.prop('disabled', false);

    // put the old value back in
    button.val(old_value);

}, false );

$('form.wpcf7-form').on('submit',function() {

    var form = $(this);
    var button = form.find('input[type=submit]');
    var current_val = button.val();

    // store the current value so we can reset it later
    button.attr('data-value', current_val);

    // disable the button
    button.prop("disabled", true);

    // tell the user what's happening
    button.val("Sending, please wait...");

});