WordPressのフォームプラグイン「Snow Monkey Forms」は、軽量かつ拡張性の高いフォームプラグインです。本記事では、複数のフォームを個別に送信後、異なるサンクスページへ自動リダイレクトする方法をご紹介します。
（1フォームの場合でも使用可能です。）
実現したいこと
Snow Monkey Formsのデフォルト機能では、サンクスページ（完了ページ）はフォームページと同じページで表示されます。
「Google アナリティクスでコンバージョンを計測したい」という場合、サンクスページをフォームと別のURLにすることで計測しやすくなります。
例えば以下のようなフォームがサイトに存在する場合、それぞれに対応するサンクスページへリダイレクトしたいケースがあります。
| フォームの種類 | リダイレクト先（サンクスページ） |
|---|---|
| お問い合わせフォーム | /contact/thanks/ |
| 採用応募フォーム | /job-thanks/ |
コードの概要
以下のコードを functions.php に記述することで、Snow Monkey Forms の送信完了後に、それぞれ対応するページにリダイレクトさせることができます。
このコードをコピペした後、以下2箇所を変更してください。
※自作テーマではない方は、プラグイン「Code Snippets」を使用してコードを入れる方法をオススメします。
snow-monkey-form-111、snow-monkey-form-22の数字部分を、ご自分のサイトのSnow Monkey FormsのIDに変更。/contact/thanks/、/job-apply/thanks/のURL部分を、ご自分のサイトのURLに変更。
<?php
/**
* Snow Monkey Forms送信後のリダイレクト設定
* 複数フォーム対応版
*/
add_action(
'wp_enqueue_scripts',
function () {
ob_start();
?>
window.addEventListener(
'load',
function() {
// フォームIDとリダイレクト先のマッピング
// snow-monkey-form-〇〇 は、Snow Monkey FormsのフォームID
var formRedirects = {
"snow-monkey-form-111": "<?php echo esc_js(home_url('/contact/thanks/')); ?>",
"snow-monkey-form-22": "<?php echo esc_js(home_url('/job-apply/thanks/')); ?>",
};
// 各フォームにイベントリスナーを設定
Object.keys(formRedirects).forEach(function(formId) {
var form = document.getElementById(formId);
if (form) {
form.addEventListener(
'smf.submit',
function(event) {
if ('complete' === event.detail.status) {
window.location.href = formRedirects[formId];
}
}
);
}
});
}
);
<?php
$data = ob_get_clean();
wp_add_inline_script(
'snow-monkey-forms',
$data,
'after'
);
},
11
);コードの詳しい解説
- wp_enqueue_scripts は、フロントエンドにスクリプトやスタイルを読み込むタイミングで実行されるフックです。これを使用する場合、JavaScriptコードを
<script>タグで囲む必要はなくなります。 - 11 は実行の優先度。10（デフォルト）より後に処理したいときに使用されます。
ob_start()～ob_get_clean()の間で書かれたコードは 出力バッファ（一旦ためて、あとでまとめて処理する仕組み） にためられ、最後に文字列として$dataに格納されます。- 最後の方に追加した
wp_add_inline_script()を使って、Snow Monkey Forms の JavaScriptファイル（ハンドル名が ‘snow-monkey-forms’）の後にこのインラインスクリプトを追加し、実行するようになっています。
Snow Monkey formsのIDの調べ方
1.URLから調べる
Snow Monkey Formsの編集画面で、URLをチェックしてください。
/wp-admin/post.php?post=111&action=edit?post=111の111がIDです。
2.ブロックエディタから調べる
固定ページなどで「Snow Monkey Forms」のブロックを選択したとき、次のような画面になります。
この画像の792がIDです。
参考サイト
このサイトでは、プラグインでの実装方法を紹介しています。
Snow Monkeyの有料会員なら、プラグインをインストールできるので、有料会員の方はこちらがおすすめです。
まとめ
自作テーマで制作されている方、プラグイン「Code Snippets」を使える方は、
こちらでご紹介した方法で実装してみてくださいね！
