サンクスページの表示
サンクスページを作ってコンバージョン率を分析できるようにする
フォームは1枚のテンプレート( HTML )でフォームの入力から送信結果までが全て完結できます。この状態だと、最初から最後まで単一のURLで画面遷移が行われてしまうため、Google Analytics等でコンバージョンを調べる際に、ゴールページを設定することができませんでした。 サンキューページ( 送信のお礼ページ )を別で用意して、フォームの送信が完了したら、そのページが表示されるようにします。
サンキューページを用意する
thanks.html ファイルを作成し、この中にサンキューページの内容を入れていきます。まず、結果表示( step#result )のブロックをこのthanks.htmlに持ってきます。これで、送信完了画面でこのthanks.htmlのテンプレートが使われても、送信結果が表示できるようになります。
Twigを利用する場合は、thanks.html ではなく thanks.html.twig のように .twig 拡張子を付けることをおすすめします。Twigテンプレートとして認識されるため、エディターによるシンタックスハイライトや補完機能を利用でき、テンプレートの編集がしやすくなります。
<!-- BEGIN_MODULE Form -->
<!-- BEGIN step#result -->
<section>
<h2 class="contactH2">メールでのお問い合わせ</h2>
<p class="message">お問い合わせありがとうございました。以下の内容で送信しました。</p>
@include("/contact/form/confirm.html")
</section>
<!-- END step#result -->
<!-- END_MODULE Form -->
{% set form = module('V2_Form') %}
{% if form.step == 'result' %}
<section>
<h2 class="contactH2">メールでのお問い合わせ</h2>
<p class="message">お問い合わせありがとうございました。以下の内容で送信しました。</p>
{{ include('/contact/form/confirm.twig', form.fields) }}
</section>
{% endif %}
確認ページからthanks.htmlに飛ぶようにする
確認ページにあるフォーム送信ボタンのformタグのactionにthanks.htmlに飛ぶように記述します。
フォームテンプレートの確認ボタンのactionを action="thanks.html" にしてください。
<!-- BEGIN step#confirm -->
<!-- フォームステップ：確認画面 -->
@include("/contact/form/confirm.html")
<form action="?step=reapply" method="post">
<input type="hidden" name="step" value="reapply" />
<input type="hidden" name="takeover" value="{takeover}" />
<input type="submit" name="ACMS_POST_Form_Chain" value="入力画面へ戻る" />
</form>
<form action="thanks.html" method="post">
<input type="hidden" name="To[]" value="{email}" />
<input type="hidden" name="AdminReply-To[]" 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="送信" />
</form>
<!-- END step#confirm -->
{% if form.step == 'confirm' %}
<!-- フォームステップ：確認画面 -->
@include("/contact/form/confirm.html")
<form action="?step=reapply" method="post">
<input type="hidden" name="step" value="reapply" />
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
<input type="submit" name="ACMS_POST_Form_Chain" value="入力画面へ戻る" />
</form>
<form action="thanks.html" method="post">
<input type="hidden" name="To[]" value="{{ form.fields.email.value }}" />
<input type="hidden" name="AdminReply-To[]" value="{{ form.fields.email.value }}" />
<input type="hidden" name="step" value="result" />
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
<input type="hidden" name="id" value="contactForm" />
<input type="submit" name="ACMS_POST_Form_Submit" value="送信" />
</form>
{% endif %}
これで、完了ページを別URLで表示できるようになりました。