ブログ

MAをこれから勉強したい人からカミハヤユーザーまで、
役に立つ情報のご紹介です。

  • ホーム
  • ブログ
  • フォーム送信後、フォーム上部に表示される成功公開メッセージへジャンプさせる方法
カミハヤMA
2022.09.08

フォーム送信後、フォーム上部に表示される成功公開メッセージへジャンプさせる方法

本記事では、フォーム送信ボタンを押下した後、フォーム上部に表示される成功公開メッセージが表示される箇所へジャンプさせる方法を説明します。

 

目次
 
 1.はじめに
 2.設定方法
 3.最後に 

1.はじめに

フォーム入力項目が多くなり、フォーム送信ボタンをクリックしても画面上部に表示される成功公開メッセージが、フォーム送信者側にうまく伝わらないケースが発生します。そのような場合、フォーム送信者は送信が成功したのかどうかが分からず、繰り返しフォームを送信しようとするかもしれません。
送信ボタンをクリックすると画面トップへジャンプされ、成功公開メッセージがフォーム送信者側へうまく伝えることができれば、このような問題を回避することができそうですね。では、設定方法について説明します。

2.設定方法

今回、MA標準で用意されているBlankV2のフォームテーマであるform.html.twigを確認しました。
そこにはフォームをサブミットした場合、ページトップに戻る設定が何もありませんでした。どうやらform.html.twigを修正することで目的を達することができそうです。次のようなスクリプトをform.html.twigに加えてみました。

    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
        <script type="text/javascript">

        $("form").on("submit", function(e){
            $(window).scrollTop(0);
        });
    </script>


フォームのプレビュー画面で試してみたところフォームの送信ボタンをクリックするとフォームのトップ位置にジャンプさせることができました。
では、このフォームIDをLPに挿入して、動作を確認してみましょう。
なぜかLPにこのフォームをトークンで挿入するとうまく機能しません。

ブラウザの検証ツールで確認したところ、フォームIDをLPにトークンで挿入すると記述したスクリプト内容が消えてしまっていることがわかりました。
仕方が無いので、フォームのプレビュー画面でソース表示を行いコピーして、フォームを貼り付けたい先のLPをコードモードにした上で先ほどコピーした内容をペーストすることで、目的を達することができました。

3.最後に

いかがでしたでしょうか。本来であればフォームのプレビューと同じ挙動で、{form=formID}のトークンを挿入したLPでも動いて欲しかったのですが、残念ながらうまくいきませんでした。
最後は、力技でLPをコードモードにしてフォームのソースをペーストすることで目的を成すことはできましたが、逐一この対応をするのも少々億劫かと思います。
もっと良い方法を見つけることができれば、また別の機会にご紹介できればと思います。

カミハヤの製品ラインナップ

複数製品を組み合わせてのご利用も可能です。詳細はお気軽にお問い合わせください。

カミハヤCMS

カミハヤCMS

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMA

カミハヤMA

直感的で使いやすい管理画面、ノーコード。技術者無しでも素早くキャンペーンを始められる、BtoB向けマーケティングオートメーションツールです。

もっと見る
カミハヤSEO

カミハヤSEO

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMAトライアルキャンペーン実施中! MAトライアルのお申込み
資料ダウンロード
資料ダウンロード
お問い合わせ
お問い合わせ
よくあるご質問
よくあるご質問