お問い合わせはコチラから

【CF7 v5.4以降に対応】Contact form 7 add confirmの修正方法

サイト運営

Contact form 7 add confirmがContact form7の最新版(V5.4以降)との組み合わせで動作しなくなってしばらくたちます。

みなさん、Contact form 7をv5.3.2にバージョンダウンして様子を見ているようです。

修正方法がネットで公開されていたのですが、その通りにやっても動かなかったので修正方法をまとめておきたいと思います。

Contact form 7側の見解

Contact form 7 v5.4以降でContact form 7 add confirmで起きる不具合

不具合内容は大きく3つです。

Contact form 7 add confirm不具合
  1. Contact form 7 add confirmの確認ボタンを押しても動かない
  2. 送信完了メッセージが表示されない
  3. [acceptance]による非チェック時にConfirmボタンがdisabledにならない

いずれも、Contact form 7が最新版(V5.4以降)になって変更された内容に起因しています。

Contact-Form-7-add-confirmの修正方法

修正対象:

プラグインのjsファイルを修正する必要があります。

Contact-Form-7-add-confirm/includes/js/scripts.js

です。

ダッシュボードのプラグインの編集から編集できます。

Contact form 7 add confirmの確認ボタンを押しても動かない

DOMのUnitTagを参照している方法が古いようです。

修正前

document.addEventListener( 'wpcf7submit', function( event ) {
	switch ( event.detail.status ) {
		case 'wpcf7c_confirmed':
		wpcf7c_step1(event.detail.id);//ここ修正
		break;
		case 'mail_sent':
		wpcf7c_step2(event.detail.id);//ここ修正
		break;

	}
}, false );

修正後

DOMのUnitTagを変更します。

event.detail.id⇒event.detail.unitTag

に変更すればいいだけです。

document.addEventListener( 'wpcf7submit', function( event ) {
	switch ( event.detail.status ) {
		case 'wpcf7c_confirmed':
		wpcf7c_step1(event.detail.unitTag);//修正済み
		break;
		case 'mail_sent':
		wpcf7c_step2(event.detail.unitTag);//修正済み
		break;

	}
}, false );

送信しましたメッセージを表示

Contact form 7の新バージョンと組み合わせると今回の修正だけでは↓こういうやつが表示されなくなります。それを改善します。

参考記事通りにやりましたが、動きませんでした。

これは半分予想していました。

というのも、以下の記事でその現象が報告されていたからです。

Contact form 7のv5.3.2までは、要所要所で、.wpcf7-response-outputにdisplay:blockが自動的に追加される動きでした。

自動的に上書きされるのを前提に、Contact form 7 add confirm側でもdisplay:noneを追加する記述がありました。

しかし、今回Contact form7側が変更された影響で、display:blockを期待する動きが変わったので、そこでボタンの掛け違いが起きて、display:noneから復帰せずに、メッセージが表示されなくなったようです。

修正前

responseOutput.css("display", "none");

修正後

responseOutput.css(“display”, “none”);をコメントアウトして、ifで囲みます。

scrollが”1″のときは確認画面、scrollがnullの時は送信完了画面という条件分けになります。

	if(scroll){
		//responseOutput.css("display", "none");
		responseOutput.addClass("wpcf7c-force-hide");
	 }

[acceptance]による非チェック時にConfirmボタンがdisabledにならない

Contact form 7の脱jQueryの影響で、jsが大幅に書き換わりました。

その影響で従来と動きが変わっています。

[acceptance policy] 規約に同意してチェック [/acceptance]

v5.3.2までは、[aceptance]タグでdisabledを付与する対象は、input:submitが対象でした。

v5.3.2の記述

wpcf7.toggleSubmit = function( form, state ) {
        var $form = $( form );
        var $submit = $( 'input:submit', $form );

        if ( typeof state !== 'undefined' ) {
                $submit.prop( 'disabled', ! state );
                return;
        }

        if ( $form.hasClass( 'wpcf7-acceptance-as-validation' ) ) {
                return;
        }

        $submit.prop( 'disabled', false );

        $( '.wpcf7-acceptance', $form ).each( function() {
                var $span = $( this );
                var $input = $( 'input:checkbox', $span );

                if ( ! $span.hasClass( 'optional' ) ) {
                        if ( $span.hasClass( 'invert' ) && $input.is( ':checked' )
                        || ! $span.hasClass( 'invert' ) && ! $input.is( ':checked' ) ) {
                                $submit.prop( 'disabled', true );
                                return false;
                        }
                }
        } );
};

この記述のおかげて、submitとconfirmのボタンどちらもチェックボックスに連動してdisabledになりました。

しかし、v5.4からjqueryは使わず、vanila javascriptになった影響でしょうか、class名を厳密に指定する修正が行われ、disableの対象はsubmitのみに限定されてしまいました。

その結果、confirmボタンにはdisabled属性が付与されません。

これを直すのはContact form 7側のjsの動きを昔と同じように修正するか、自分で追加する必要があります。

修正内容

この修正はプラグインとは独立しているので、追加する場所や方法は自由です。

Contact from 7 add confirmのscript.jsに追加してしまうのが一番簡単だと思います。

以下のjsをContact-Form-7-add-confirm/includes/js/scripts.jsの最後に追加します。


jQuery(function($) {
	
	var $submit = $('.wpcf7-submit');
	var $confirm = $('.wpcf7-confirm');
	var $policy = $('.policy input[type="checkbox"]');
	let result = $submit.prop('disabled');
 	
  if(result) {
        $confirm.prop('disabled', true);
  }else {
        $confirm.prop('disabled', false);
  }
	
	$policy.change(function() {
		let result = $policy.prop('checked');
	
    if(result) {
        //disabled属性を解除
        $confirm.prop('disabled', false);
    }else {
        //disabled属性を付与
        $confirm.prop('disabled', true);
    }
})
});

jsファイルの修正が反映されない時は対処方法

javascriptファイルへの修正が反映されない場合は、ブラウザキャッシュ削除をすると反映されると思います。

まとめ

Contact form 7とContact form 7 add confirmの組み合わせは個人的にはお気に入りの組み合わせなので、ずっと使い続けたいと思っていました。

本家が修正されるのを待つのが正解ですが、本家に動きが全くなく、現時点で修正される期待は薄いので今回プラグインファイルの修正に踏み切りました。

結果的に、本家が修正されて今回の修正が上書きされたとしても、それはそれで問題なくなるわけなので今回の修正方法の影響はないと思っています。

今回、ようやく修正方法が明確になり、かつ変更も簡単という幸運も重なり、修正による不具合の可能性も低いと思いますので、これで次のContact form 7メジャーバージョンアップまでは、使い続けられると思い安どしています。

今回の修正は、自己責任でお願いします。(すべては自己責任ですが・・・)

タイトルとURLをコピーしました