サンクスページの表示

サンクスページを作ってコンバージョン率を分析できるようにする

フォームは1枚のテンプレート( HTML )でフォームの入力から送信結果までが全て完結できます。この状態だと、最初から最後まで単一のURLで画面遷移が行われてしまうため、Google Analytics等でコンバージョンを調べる際に、ゴールページを設定することができませんでした。 サンキューページ( 送信のお礼ページ )を別で用意して、フォームの送信が完了したら、そのページが表示されるようにします。

サンキューページを用意する

thanks.html ファイルを作成し、この中にサンキューページの内容を入れていきます。まず、結果表示( step#result )のブロックをこのthanks.htmlに持ってきます。これで、送信完了画面でこのthanks.htmlのテンプレートが使われても、送信結果が表示できるようになります。

<!-- BEGIN_MODULE Form -->

<!-- BEGIN step#result -->
<!-- フォームステップ：完了画面 -->
<div class="acms-entry contactBox">
	<section class="entryColumn">
		<h2 class="contactH2">メールでのお問い合わせ</h2>
		<p class="message">お問い合わせありがとうございました。以下の内容で送信しました。</p>
		<!--#include file="/contact/form/confirm.html"-->
	</section>
</div>
<!-- END step#result -->

<!-- END_MODULE Form -->

確認ページからthanks.htmlに飛ぶようにする

確認ページにあるフォーム送信ボタンのformタグのactionにthanks.htmlに飛ぶように記述します。
フォームテンプレートの確認ボタンのactionを action="thanks.html" にしてください。

<!-- BEGIN step#confirm -->
<!-- フォームステップ：確認画面 -->
<!--#include file="/contact/form/confirm.html"-->
<form action="?step=reapply" method="post" class="acms-form acms-inline-btn">	<input type="hidden" name="step" value="reapply" />
	<input type="hidden" name="takeover" value="{takeover}" />
	<input type="submit" name="ACMS_POST_Form_Chain" value="入力画面へ戻る" id="btnToInput" class="acms-btn" />
</form>

<form action="thanks.html" method="post" class="acms-form">	<input type="hidden" name="To[]" value="{email}" />
	<input type="hidden" name="AdminReply-To[]" value="<{email}>" />
	<input type="hidden" name="AdminFrom[]" value="<{email}>" />
	<input type="hidden" name="step" value="result" />
	<input type="hidden" name="takeover" value="{takeover}" />
	<input type="hidden" name="id" value="contactForm" />
	<input type="submit" name="ACMS_POST_Form_Submit" value="送信" id="btnSubmit" class="acms-btn acms-btn-primary acms-btn-admin-save" />
</form>
<!-- END step#confirm -->

これで、完了ページを別URLで表示できるようになりました。