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

【问题标题】：How to disable submit button and change text on form submit at Wordpress "contact form 7"如何在 Wordpress“联系表格 7”上禁用提交按钮并更改表单提交上的文本
【发布时间】：2019-05-14 14:22:44
【问题描述】：

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

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

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

【问题讨论】：

您好，我不确定您为什么要这样做。但是当有人提交表单时，CF7 已经内置了一个加载器。将文本从提交更改为提交也是没有意义的，因为除非您的代码真的很糟糕或者某些事情让您的网站变得非常缓慢，否则如果幸运的话，您只会看到提交...文本可能会显示 2 秒。
是的。它有装载机，.. 但它的风格很旧。表单提交需要一些时间，然后看起来什么都没有发生，这就是为什么我想更改按钮文本，如 .. 提交.. 或请稍候... 这样用户可以感觉它在工作并且按钮禁用，所以不能提交更多时间.

标签： wordpress contact-form-7

【解决方案1】：

以上答案对我不起作用，可能与最新版本的 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...");

});

【讨论】：

到目前为止，这是我正在寻找的答案，它可以根据需要在提交表单时禁用提交按钮并防止重复条目。谢谢！

【解决方案2】：

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

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

see all events of contact form 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_failed、mail_sent等响应。

【讨论】：

请访问此链接contactform7.com/dom-events和stackoverflow.com/questions/27798264/…

【解决方案3】：

您可以改用它。此代码将帮助您禁用提交按钮，直到发送成功电子邮件。您可以通过此代码停止多次提交。

// disable button after clicking on submit button
<?php add_action('wp_footer', 'mycustom_wp_footer');
function mycustom_wp_footer()
{
?>
    <script type="text/javascript">
        jQuery('.wpcf7-form').submit(function() {
            jQuery(this).find(':input[type=submit]').prop('disabled', true);
            var wpcf7Elm = document.querySelector('.wpcf7');
            wpcf7Elm.addEventListener('wpcf7submit', function(event) {
                jQuery('.wpcf7-submit').prop("disabled", false);
            }, false);
            wpcf7Elm.addEventListener('wpcf7invalid', function() {
                jQuery('.wpcf7-submit').prop("disabled", false);
            }, false);
        });
    </script>
<?php
}?>

【讨论】：