Contact Form 7で確認画面の戻る（previous）ボタンが効かない時の対処法

blog画像（contactform7）

概要

WordPressのお問い合わせフォーム設置に使用されるプラグイン「Contact Form 7」で、入力確認画面を追加するためのプラグイン「Contact Form 7 Multi-Step Forms」でお問い合わせフォームから確認画面へ遷移した際、入力内容を訂正するときのために戻る（previous）ボタンを導入すると思いますが、このボタンを押しても反応せず、入力画面に戻れないという不具合が発生したため、その対処法を備忘録として残します。

Contact Form 7の戻るボタンの問題と解決策

Contact Form 7のMulti-Step Formsは、ボタンの動作をJavaScriptで制御しているのですが、
・WordPressのjQueryの読み込み方法
・プラグインの影響
・スクリプトの実行タイミング
などの要因で、「戻る」ボタンのイベントが正常にセットされなくなる場合があります。
つまり、ボタンは表示されてるけど、押してもスクリプトが動かない状態になるということです。

対策として、JavaScriptに下記を追加し、戻る（previous）ボタンをクリックしたときに、処理を確実に実行させるようにしました。

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.wpcf7-previous').forEach(function(button) {
        button.addEventListener('click', function() {
            history.back();
        });
    });
});


これにより、ページの読み込みが終わったら確実にスクリプトを適用でき、ボタンを押したときに正常に入力画面に戻ることができました。
同じような事象が発生してお困りの方は、一度お試しください。