Contact form 7 add confirmがContact form7の最新版(V5.4以降)との組み合わせで動作しなくなってしばらくたちます。
みなさん、Contact form 7をv5.3.2にバージョンダウンして様子を見ているようです。
修正方法がネットで公開されていたのですが、その通りにやっても動かなかったので修正方法をまとめておきたいと思います。
Contact form 7側の見解
Contact Form 7 add confirm という Contact Form 7 向けのアドオンプラグインが動かなくなったとかで騒がれている方が多いみたいなので Contact Form 7 の作者として公式声明させていただこうと思うんですが、
— Takayuki Miyoshi (@takayukister) March 18, 2021
「なければ自分で作ればいいんじゃないの?」
以上です。
Contact form 7 v5.4以降でContact form 7 add confirmで起きる不具合
不具合内容は大きく3つです。
- Contact form 7 add confirmの確認ボタンを押しても動かない
- 送信完了メッセージが表示されない
- [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 マークアップがわずかに変わります。この変更はほとんどのユーザーには影響しませんが、アドオンプラグインやフォームにスタイルを設定するテーマの開発者は注意する必要があるかもしれません。
新しいマークアップでは
https://contactform7.com/ja/2022/05/20/contact-form-7-56-beta/#markup-changes-in-form-controlsdata-name="{field name}"
属性がフォームコントロールのラッパー要素 (wpcf7-form-control-wrap
) に追加されます。また、その代わりとして、{field name} クラスがラッパー要素から削除されます。
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を使い続けます。


まとめ
Contact form 7とContact form 7 add confirmの組み合わせは個人的にはお気に入りの組み合わせなので、ずっと使い続けたいと思っていました。
本家が修正されるのを待つのが正解ですが、本家に動きが全くなく、現時点で修正される期待は薄いので今回プラグインファイルの修正に踏み切りました。
結果的に、本家が修正されて今回の修正が上書きされたとしても、それはそれで問題なくなるわけなので今回の修正方法の影響はないと思っています。
今回、ようやく修正方法が明確になり、かつ変更も簡単という幸運も重なり、修正による不具合の可能性も低いと思いますので、これで次のContact form 7メジャーバージョンアップまでは、使い続けられると思い安どしています。
今回の修正は、自己責任でお願いします。(すべては自己責任ですが・・・)