ザリガニデザインオフィス

Contact Form 7 add confirmのスクロールを調整のサムネイル

Contact Form 7 add confirmのスクロールを調整

とりあえず、オーバーライドで対処します。

有名プラグイン、Contact form 7に確認画面を追加するプラグイン、Contact form 7 add-confirmですが、確認画面に移行した際に、フォームの一番上に自動的にスクロールで戻ります。

その際、ヘッダーなどをposition:fixedで設定していると、その高さの分だけ戻りすぎて、フォームに被ってしまいます。なので、スクロール量を調整したいのですが、この動き自体はプラグインに組み込み済みなので、ちょっと厄介です。

動きはプラグイン内のJavaScriptによって行われているので、このJavaScriptを書き換えてしまえば、挙動を変えることができます。しかし、プラグインを書き換えると、アップデートの際にもとに戻る可能性もあります。かといって、アップデートしないのも、セキュリティ的にもあまりよろしくありません。

書き換えずに上書き(オーバーライド)する

そこで、根本的な解決ではありませんが、関数を上書き(オーバーライド)することで対処します。この動きはプラグイン内のwpcf7c_scrollというJavaScript関数なので、これをコピーしてきて、修正したのが以下の記述です。

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");
    }
  });
}

6行目にスクロールする速度があるので、ここの数字を書き換えることで速度も調節できます。肝心のスクロール量の変更ですが、7行目と9行目に書かれているので、parent.offset().topから120を引くことで、120px分だけオフセットを取れます。ここの数字はヘッダーの高さなどに合わせて任意で調節して下さい。

今後の変更によっては無効になる可能性あり

この方法は、プラグイン書き換えよりはアップデートによる環境変化に強いと思います(*)が、関数名が変更になったりすれば、この方法は効かなくなります。

*この挙動部分はプラグインの根幹に関わるポイントでないので、頻繁にアップデートされないだろう、という個人的な推測です。

将来的は製作者様が対応してくれるかもしれないですが、取り急ぎこんな感じで対応しています。