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
ありがとうございます。
とても、わかりやすかったです。

5 Comments

Lindadag says:

2020年4月26日 at 3:14 午後

HQ Twitter 2007 – 2019 Aged Accounts Starting from 1$
Prices:
2017,2018,2019-1$ per account
2015,2016-4$ per account
2013,2014 – 5$ per account
2012 – 6$ per account
2011 – 7$ per account
2010 – 8$ per account
2009 – 10$ per account
2008 – 20$ per account ( limited stock)

The Accounts
Have zero or less than 50 followers.
Gender can be both male and female.
May or may not have profile pic and tweets.
I have full access to the accounts,
Accounts are delivered instant after paying.
My Contact Info

Email – congmmo@gmail . com

https://sellaccs.net

Discord : CongMMO#9766
Skype & Telegram : congmmo
ICQ : @652720497

Please don’t PM here on this website , i rarely check it
For quick response contact me on discord or email.

Join my discord server to buy instantly – Link

Instant Buy from the below link
Buy link

Due to timezone difference it might take some time to get back to you. Please wait patiently.

I am verified seller here and have 100% positive feedback

Payments Methods Accepted- BTC, Paypal (additional transaction/miner fee )

Please don’t waste my time if u r not serious.

Terms
All sales are final, once accounts delivered, no refunds
Twitter rules are becoming very strict everyday so I will not be held responsible for the suspension or banning of account in the near future.

I also sell accounts with followers, check my other threads.

gwenso11 says:

2020年4月26日 at 7:10 午後

New project started to be available today, check it out
http://animalbuttporn.miyuhot.com/?jaylene

removing porn from your computer porn schoolboy free porn no age requirement porn games 2 adult hd porn pic

JamesBup says:

2020年4月27日 at 12:42 午前

The internet has a ton of online gambling sites. Our experts create the following online casino game reviews to help you confidently pick the best ones. With each review, a real person goes to the site, makes a deposit, and plays the games before requesting a payout.

AaronOxync says:

2020年4月27日 at 9:34 午前

Woodridge

Michaelscern says:

2020年4月28日 at 7:52 午前

XYZ專業光碟教學網站 http://xyz.net.tw/

02

4月