【WordPress】Snow Monkey Formsで別URLでサンクスページを作る方法


Snow Monkey Formsは、そのシンプルさが魅力のWordPressプラグインです。

Snow Monkey Formsでフォーム送信後のサンクスページを個別のページで表示させたいと考えたことはありませんか?

サンクスページに専用のURLを設定することで、Googleアナリティクスなどのツールを使ったコンバージョン計測が簡単になるからです。

特定のページが表示された回数を計測するだけで済むからです。

しかしSnow Monkey Formsの標準機能では、フォーム送信完了メッセージはフォームと同じページに表示される仕組みになっており、別のURLを持つサンクスページを簡単に作成する機能は提供されていません。

この記事では、Snow Monkey Formsでフォーム送信が完了した後に、任意の「サンクスページ」へ自動的にリダイレクトさせる具体的な方法を分かりやすく解説します。


Snow Monkey Formsには別ページでサンクスページは通常設置できない


Snow Monkey Formsはサンクスページを別URLで設置する機能がありません。

Snow Monkey Formsの管理画面で「完了画面」にサンクスページ用の文言を追加して、URLを変えずにサンクスページのような表示をおこなえるようになっています。


Snow Monkey Forms


しかしこの方法では、フォーム送信後のURLが変わらないため、Googleアナリティクスなどでコンバージョンを正確に計測しにくくなる可能性があります。


「サンクスページ」の固定ページを作成する


別URLでサンクスページを表示させるために、遷移先となるサンクスページの固定ページを作成します。

※今回はサンクスページが「thanks」であることを想定して実装をおこなっていきます。
記事内にサンプルコードを掲載していますが適宜変更をおこなってください。




上記のような感じで固定ページでサンクスページを作成します。
スラッグは「thanks」としてあります。


「page-thanks.php」、もしくは「page.php」を用意する


作成したサンクスページのURLのスラッグは「thanks」なので、「page-thanks.php」という名前でファイルを設置します。

このファイルの中にサンクスページの文言、連絡先などを記述していきます。

page.phpを編集してサンクスページの内容を記述することも可能です。
しかし他の固定ページに影響を出す可能性があるので、注意をしてください。


「function.php」にコードを記載


お問い合わせフォームのID(例:snow-monkey-form-12345)を調べて、下記のコードを「functions.php」に入れてください。


※注意※

コードを触り慣れていない人は「functions.php」をバックアップしてから作業をおこなってください。
もし誤ってエラーの画面になった時に、すぐに直せるようにしておきましょう。


⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩


/**
 * Snow Monkey Form 送信完了後にサンクスページへリダイレクト
 */
add_action(
  'wp_enqueue_scripts',
  function () {
    // JavaScriptコードをバッファリング開始
    ob_start();
?>
  <script>
    window.addEventListener(
      'load', // ページ全体の読み込み完了後に実行
      function() {
        // 対象のフォーム要素を取得('snow-monkey-form-12345' の部分は実際のフォームIDに合わせてください)
        const form = document.getElementById('snow-monkey-form-12345');

        // フォーム要素が存在する場合のみ処理を実行
        if (form) {
          // Snow Monkey Forms の送信イベントを監視
          form.addEventListener(
            'smf.submit', // Snow Monkey Forms が発行するカスタムイベント
            function(event) {
              // 送信ステータスが 'complete' (完了) の場合のみ処理を実行
              if ('complete' === event.detail.status) {
                // 指定したサンクスページへリダイレクト
                // '/thanks/' の部分は実際のサンクスページのスラッグ等に合わせてください
                window.location.href = '<?php echo esc_url(home_url("/thanks/")); ?>';
              }
            }
          );
        }
      }
    );
  </script>
<?php
    // バッファリングしたJavaScriptコードを取得
    $data = ob_get_clean();

    // <script> タグを除去(wp_add_inline_script が自動で追加するため)
    $data = str_replace(['<script>', '</script>'], '', $data);

    // snow-monkey-forms スクリプトの後に追加
    wp_add_inline_script(
      'snow-monkey-forms', // Snow Monkey Forms のスクリプトハンドル名
      $data,
      'after' // snow-monkey-forms スクリプトの後に出力
    );
  },
  11 // 優先度を少し高く設定 (デフォルトは10)
);


お問い合わせフォームのIDはSnow Monkey Formsの管理画面の赤線部分より確認できます。


  • 管理画面TOPのタイトル部分にカーソルを乗せたままにすると表示される
  • Snow Monkey Formsのフォーム詳細ページに入る



サンクスページを実際に確認する


サンクスページの固定ページを作成して、「function.php」にコードを記載したら実際にサンクスページが別URLに遷移するのか確認します。

作成したサンクスページに遷移されれば成功です!!


実装する上ので注意点


一点こちらの実装について注意があります。

Javascriptsでリダイレクトさせる都合上、一瞬Snow Monkey Formsの完了画面が見えてしまうのでご注意ください。

税理士法人T-FRONT