如何禁用提交按钮并更改在Wordpress“联系表单7”上提交的表单上的文本 [英] How to disable submit button and change text on form submit at Wordpress "contact form 7"

问题描述

我正在使用联系表格7 WordPress插件。

I am using "contact form 7" WordPress plugin.

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

I want to disable submit button on form submit and change text like

提交...。 ，并在成功或出错时启用，以便用户可以再次单击。

"Submitting...." and enable on success or on error so the user can click again.

推荐答案

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

Please use this code to disable the submit button.

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

我们知道联系表7 插件提交后返回各种响应。

As we know that the contact form 7 plugin returns various responses after submitting.

这是针对已发送邮件的事件：

This is for mail sent event:

 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....");
});

注意： 状态提交表单后，返回诸如 validation_failed ， mail_sent 之类的响应。

Note: status returns the responses like validation_failed, mail_sent, etc after form submitted.

这篇关于如何禁用提交按钮并更改在Wordpress“联系表单7”上提交的表单上的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！