トノムラマサシ Snow Monkey Formsでは完了画面はJavaScriptで画面推移しないように設定してあります。
なので、特別なthanksページに飛ばしたい時や、完了画面にアナリティクスのタグを仕込みたい時にどうすればいいか？悩むことがあるかと思います。
今回はそんなお悩みを解決する記事を書こうと思います。
Snow Monkey Formsでこれからお問合せフォームを作るという人は下記記事でお問い合わせフォームの作り方を書いてますので、こちらからご覧ください。
Snow Monkey Formsで完了画面を別URLにしたいんだけど、どうやって設定したらいいんだろう？
Snow Monkey Formsでお問合せフォームの完了画面を別ページにするには、多少のコード編集で簡単に設定できます！
具体的にいうと、送信ボタンをクリックした時に固定ページの完了画面にリダイレクトさせます。どんなURLでもリダイレクトできるので特別にサンクスページを別URLで作ってる場合でも大丈夫です。
手順は下記のようになっております。たったの3ステップです。
①完了画面用の固定ページを作成する（もう用意できてるなら飛ばしてもOK）
②コード追記用のプラグインを作成
③自作プラグインをWordPessにインストール
それでは解説していきますね。
Snow Monkey Formsのフォームの完了画面を別URLにリダイレクトしよう
さっそくSnowMonkeyFormsで、前回作ったフォームがあるので、そのフォームの固定ページで完了画面を作って、その完了画面にリダイレクトさせたいと思います。
①完了画面用の固定ページを作成する（もう用意できてるなら飛ばしてもOK）
まずは固定ページを作っていきましょう。
WordPress管理画面の左メニューから「固定ページ」をクリックして、「新規追加」をクリックしましょう。
すると固定ページの編集画面になります。
ちょっとやることが多いですが、順に説明しますね。
①タイトル名を決めましょう。
②完了画面の本文を入力します。
③右メニューのURLをクリックします。（項目がない場合は上の「固定ページ」をクリックしましょう）
④ウィンドウが出てくるので、完了画面（サンクスページ）のURLを変更します。今回は「thanks_page」に変更しております。
⑤設定が終わりなので「更新」クリックして保存しておきましょう。
固定ページを作ったら次は、プラグインを作っていきます。
コード追記用のプラグインを作成しよう
PCのダウンロードか、デスクトップにフォルダをまずは作ります。僕はMacなんで下記のようになりますね。
ダウンロード配下に「プラグイン」というフォルダを作成しました。
プラグインフォルダをテキストエディタで開きます。テキストエディタはなんでもOKです。僕はvscodeを使っております。
プラグインフォルダ内にファイルを新規追加してください。
ファイル名は「thanks_redirect.php」で今回は進めていこうと思います（どんな名前でもOKです）。
ファイル名を付けたら、「thanks_redirect.php」の中にプラグインの基本設定を書いていきます。
「thanks_redirect.php」にプラグインの基本設定を書いていきます。まずは「<?php」と書いてphpを書いていくよ。という宣言をします。
その下にプラグインの設定を書くのですが、書式は決まっているので、こちらコピペで入れてご自身のサイトに合わせて変更いただければと思います。
<?php
/*
Plugin Name: Thanks Redirect plugin
Plugin URI: https//:tonoblog.yutaka01.net
Description: お問合せページで完了時に完了ページにリダイレクトする
Version: 1.0.0
Author: Tonoblog
Author URI: https//:tonoblog.yutaka01.net
*/こちらの文言を先頭に入れておくことで、WordPressがプラグインと認識して有効化できるようになります（コメントアウトみたいになってますが、そのままコピペでOKです）。プラグイン作成は簡単ですね。
それではこのプラグインにコードを追記していきましょう。「thanks_redirect.php」の下に追記していってください。
<?php
/*
Plugin Name: Thanks Redirect plugin
Plugin URI: https//:tonoblog.yutaka01.net
Description: お問合せページで完了時に完了ページにリダイレクトする
Version: 1.0.0
Author: Tonoblog
Author URI: https//:tonoblog.yutaka01.net
*/
function add_thanks_redirect() {
ob_start();
?>
window.addEventListener('load', function() {
var form = document.getElementById( 'snow-monkey-form-503' );
if (form) {
form.addEventListener(
'smf.submit',
function(event) {
if ('complete' === event.detail.status) {
window.location.href = 'https://ご自身のドメイン/thanks_page/';
}
}
);
}
});
<?php
$data = ob_get_clean();
wp_add_inline_script(
'snow-monkey-forms',
$data,
'after'
);
}
add_action('wp_enqueue_scripts', 'add_thanks_redirect', 11);すいません。一気にややこしいコードが入りましたね。とりあえずはコピペしていきましょう。
カラーになっているコードがPHPで、グレーのコードがJavaScriptです。要はPHPでWordPressに出力する部分を動作させていて、リダイレクトの挙動はJavaScriptで動作させています。
コード的には2箇所を変えるだけでOKです。
①コードを「thanks_redirect.php」をコピペ
②フォーム編集画面のIDに書き換え
③ご自身のサイトのドメインに書き換え
「フォーム編集画面のID」は下記画面で確認できます。
「SnowMonkeyForms」から作成したフォームの編集画面に入り、URLをみると数字が入っているので、その数字がIDになっています。
今回コピペだけでは気持ち悪いので、コードの意味を確認しつつみてみましょう！
①ob_start() PHP関数、パッファリングをスタートさせる（正しい箇所に表示させるための処理）
②addEventListener() JS関数、イベントを登録（この箇所はページをロードしたら？というイベントを付加）
③getElementById() JS関数、HTMLタグのIDの値を指定してHTML要素を取得
④window.location.href JSプロパティ、強制的に指定URLにページ移動させる
⑤ob_get_clean() PHP関数、バッファリングでデータを取得する
⑥add_action() WordPress関数、WordPressでソースを読み込む
上の説明をみながらコードの理解を進めていっていただければと思います。要はPHPでJSコードを取り込んで、正常にWordPressのSnowMonkeyFormsのコードの下あたりにJSコードを出力しております。
こちらのコードのコピペ、差し替えが完了したらプラグインをインストールしていきたいと思います。
自作プラグインのインストールをしよう
PCのフォルダに戻り、ファイルの圧縮をおこないます。
「README.md」と「thanks_redirect.php」を両方とも選択して、「右クリック」をして、「圧縮」をクリックしてください。
するとzipファイルができるので、名前の変更をしておきます。
上記のようにzipファイルの名前を変更したら、またWordPress管理画面の最初の画面に戻ります。
左メニューの「プラグイン」をクリックして、「新規追加」をクリックして進みます。
すると「プラグインの追加」画面になるので、さらに「プラグインのアップロード」をクリックして進みます。
画面が切り替わると「ファイルを選択」というボタンが出てくるので、ここから先ほどの「zipファイル」を選択し、選択できたら「今すぐインストール」のボタンをクリックしましょう。
そして、画面が切り替わったら「有効化」をクリックしておきます。
「プラグイン一覧画面」に切り替わって、上記のように表示されたら成功です！逆にエラーが起きて「有効化」できないなら、プラグインの設定を見直しましょう。
これで設定は完了なので、ちゃんと完了画面にリダイレクトするか？試してみましょう！
お問い合わせフォーム画面を表示して、フォームにダミーテキストを入れて送信してみましょう。
固定ページで作った完了画面にリダイレクトしました！
パンクズを見ると完了画面のタイトルで確認できます。URLも固定ページの完了画面になっているかしっかりと確認しておきましょう。
これでSnow Monkey Formsのお問合せフォームの完了画面のリダイレクト設定は完了です。
完了画面を固定ページで作って、プラグインにコードを追記してインストールするだけで、簡単に完了画面のリダイレクトが完了しました。
一応、今回のプラグインのzipファイルをダウンロードできるようにしておきますね。
もしうまくいかない箇所などありましたら、下記ボタンからご相談いただけますとありがたいです。
せっかくお問合せフォームを作ったので、次はお問合せフォームへの導線を考えてみましょう。
お問い合わせフォームへの動線を整えよう
お問い合わせフォームを設置して置いておけばお問い合わせがしてくれると思いますか？答えは「NO」です。
ただヘッダーに置いておくだけでもたまに来るかもですが、そんな簡単にお問い合わせは来ません。残酷ですが現実はこんなもんです。
お問い合わせをクリックさせるには、ユーザーの目に付くところに置くのと、お問い合わせしたくなるタイミングの場所にお問合せボタンを置くことですね。
例えば、ユーザーが悩みがあって、ブログ記事に来たとします。ブログ記事を読んでその通りに試してみたのに解決しない場合、ユーザーはどんな行動をしますか？
答えは、もう一度ちゃんと始めから最後までをしっかりと読むという行動をするかもです（ここは仮説）。
それでも上手く解決しないとなった時に記事の最後をみると「お問合せボタン」が置いてあって、もしわかないことがあったらご連絡ください！と書いてあったらいかがでしょうか？
そう。思わず質問したくなります。僕自身もそういうお問合せをしたことがあります。
要はこの辺りでお問合せしたくなるだろうな。という箇所に「お問い合わせボタン」を設置しておくことで思わずアクションをさせることができます（置き過ぎには注意）。
色々と試してみましょう！
お問合せフォームの入力画面での離脱を減らす方法
けっこうアナリティクスなどをみていると、お問合せ入力画面から送信までいかずに離脱している数が多いです。10人中8人ぐらいは離脱しているんじゃないか？という感覚ですね。
その離脱する原因を取払うことで、離脱率をちょっとでも減らすことも可能ですね。
例えばお問合せフォームを開いたら入力項目が多く、必須項目ばかりだと萎えませんか？無駄に2回Emailの入力を求められたりw
ユーザー目線で考えるとイメージしやすいかもです。
あと、最後に後押しするというのも結構効果があります。
よく送信ボタン周りに小さいテキストが並んでたりするのですが、意外とボタン周りの小さいテキストは読まれる傾向があり、そこに後押しのテキストを入れておくと、送信してくれたりします。
例えば「今なら割引」のアナウンスとか、「返信は基本、本日中にさせていただきます。」とか、そのユーザーにとってお得感があるようなことを書いておくと、抵抗なく押してくれたりします。
今回は以上となります。最後までお読みいただきましてありがとうございました。
SnowMonkeyFormsで自動で住所入力する方法を解説しております。気になる人はこちらもどうぞ。
5分でスパム対策をSnowMonkeyFormsに追加したい人はこちらからどうぞ。
