contactform7 確認画面や完了画面を表示する

contactform7は、完成形のフォームのプラグインであるため手間のかからない優れたものだと個人的には思っております。
ただ、確認画面や完了画面を表示するとなるとちょっとしたコツが必要です。

１　確認画面を表示する

プラグイン（Contact Form 7 add confirm）を利用することにより、対応できる。
少し手間をかけて、フォームの上部にテキストを表示することも可能です。

<p class="wpcf7c-elm-step1" style="font-size:1.7em;">お問い合わせ内容を入力してください</p>
<p class="wpcf7c-elm-step2" style="font-size:1.7em;">送信はまだ完了しておりません。<br>内容確認の上送信ボタンを押して下さい。</p>
<p class="wpcf7c-elm-step3" style="font-size:1.7em;">お問い合わせありがとうございます</p>

CSSの修正方法なども、下記サイトがわかりやすかったです。
https://wind-mill.co.jp/contactform7-add-confirm/
実際、途中までは簡単に設置できました。
１点のみ、気になるところがありました。
それは、確認のボタンなどを押したときに上記の表示まで戻らなかったのです。
オーバーライドで対応する、下記のサイトを参考に、ほぼそのまま利用させていただき解決。
https://zarigani-design-office.com/blog/cf7_add-confirm_scroll/

wpcf7c_scroll = function(unit_tag) {
  // contact form7 add-confirm OVERWRIDE
  jQuery(jQuery.find("input[name=_wpcf7_unit_tag]")).each(function(){
    if(jQuery(this).val() == unit_tag) {
      var parent = jQuery(this).parents("form");
      var speed = 500; //SPEED CHANGE
      var position = parent.offset().top - 120; //OFFSET CHANGE
      if(jQuery('.wpcf7c-anchor').size() != 0) {
        position = jQuery('.wpcf7c-anchor').offset().top - 120; //OFFSET CHANGE
      }
      jQuery("html, body").animate({scrollTop:position}, speed, "swing");
    }
  });
}

私の癖ですが、JSはルート直下にJS用のディレクトリを作りそこに　contactform7mod.js　という名前で保存しました。
そして、フッターに下記を記述しました。

<script src="/js/contactform7mod.js"></script>

２　完了画面（サンクスページ）を追加

下記を参考に作りました。
https://wind-mill.co.jp/contactform7-add-confirm/#toc4
ありがとうございます。
とても、わかりやすかったです。

02

4月