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

【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の最後に追加します。

Ver5.6+からポリシーチェックの状態を取得するセレクタが変更になったようです。
アップデートしました。

フォームコントロールのマークアップの変更#フォームコントロールのマークアップの変更

DOM 操作をより確実にするため、フォームコントロールの HTML マークアップがわずかに変わります。この変更はほとんどのユーザーには影響しませんが、アドオンプラグインやフォームにスタイルを設定するテーマの開発者は注意する必要があるかもしれません。

新しいマークアップでは data-name="{field name}" 属性がフォームコントロールのラッパー要素 (wpcf7-form-control-wrap) に追加されます。また、その代わりとして、{field name} クラスがラッパー要素から削除されます。

https://contactform7.com/ja/2022/05/20/contact-form-7-56-beta/#markup-changes-in-form-controls
jQuery版(Contact form 7 ver 5.6+)

jQuery(function($) {
	
	var $submit = $('.wpcf7-submit');
	var $confirm = $('.wpcf7-confirm');
	//var $policy = $('.policy input[type="checkbox"]');
	var $policy = $('[data-name="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);
    }
})
});
Vanilla js版(Contact form 7 ver 5.6+)

Contact form 7 add confirmがjQuery使っているので、jQueryでいいやんと思っていましたが、jQuery版だとボタンを押せなくなるタイミングが遅いので、Vanilla JS版も作りました。

function policy_check() {
  const $submit=document.querySelector('.wpcf7-submit');
  const $confirm=document.querySelector('.wpcf7-confirm');
  //const $policy=document.querySelector('.policy input[type="checkbox"]');
  const $policy=document.querySelector('[data-name="policy"] input[type="checkbox"]');

  if($policy) {
    let result=$policy.checked;
    if(result) {
      $confirm.disabled=false;
    }
    else {
      $confirm.disabled=true;
    }
    $policy.addEventListener('change', function() {
      let result=$policy.checked;
      if(result) {
        $confirm.disabled=false;
      }
      else {
        $confirm.disabled=true;
      }
    }
    );
  }
}

policy_check();
jQuery版(Contact form 7 ver 5.6より前)

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);
    }
})
});
Vanilla js版(Contact form 7 ver 5.6より前)

function policy_check() {
  const $submit=document.querySelector('.wpcf7-submit');
  const $confirm=document.querySelector('.wpcf7-confirm');
  const $policy=document.querySelector('.policy input[type="checkbox"]');
  

  if($policy) {
    let result=$policy.checked;
    if(result) {
      $confirm.disabled=false;
    }
    else {
      $confirm.disabled=true;
    }
    $policy.addEventListener('change', function() {
      let result=$policy.checked;
      if(result) {
        $confirm.disabled=false;
      }
      else {
        $confirm.disabled=true;
      }
    }
    );
  }
}

policy_check();

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

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

confirm-plus-contact-form-7という代替プラグインもある

confirm-plus-contact-form-7という代替プラグインがWordpress公式にリリースされています。

まだ、利用者も少なく(500前後)、サポートもまともにされていない(回答数0)ので、まともに使えるのか謎ですがこういうプラグインもあるというのは覚えておいて損はないかもしれません。

動きにかなり癖がありわざわざ乗り換えるのも手間なので、既存のサイトはContact form 7 add confirmから置き換える予定はありません。今後制作するサイトも使えるのであればContact form add confirmを使い続けます。

Confirm Plus Contact Form 7
Add a confirmation screen to "Contact Form 7".
Contact Form 7に確認画面を追加するWordPressプラグイン「Confirm Plus Contact Form 7」 | TechMemo
Confirm Plus Contact Form 7は、Contact Form 7のフォームに確認画面を追加してくれるWordPressプラグインです。開発元は、トラストリング株式会社さんです。 確認画面を追加するプラグインといえばCo

まとめ

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

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

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

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

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

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

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