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

2020年4月2日

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

1 確認画面を表示する

プラグイン(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/
実際、途中までは簡単に設置できました。
1点のみ、気になるところがありました。
それは、確認のボタンなどを押したときに上記の表示まで戻らなかったのです。
オーバーライドで対応する、下記のサイトを参考に、ほぼそのまま利用させていただき解決。
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>


 

2 完了画面(サンクスページ)を追加

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

Related Posts

ワードプレス5.0の投稿編集前の注意

先日ワードプレスのアップデートがありました。 4.××→5.××。エディター機能がブロックエディターのグーテンベルク(Gutenberg)に。 参考:ブロックエディターって何?ワードプレス5.0へアップデート 変化に慣れるには触るのが一番なので新規追加や過去記事の編集を行って頂きたいですが、基本的な注意事項をご紹介します。 【重要】過去記事の編集をする場合でもまずは新規追加 過去記事の編集をする場合でもまずは新規追加から操作して下さい。...