フォームの入力エラー取得
フォームの各ステップに対応した以下のようなブロックがあります。
標準テンプレートの場合
- step 初期画面
- step#reapply エラー画面
- step#confirm 確認画面
- step#result 送信完了画面
- step#forbidden 不正アクセス画面
- step#repeated 連続投稿エラー画面
twigの場合
- step 初期・修正画面
- confirm 確認画面
- result 送信完了画面
- forbidden 不正アクセス画面
- repeated 連続投稿エラー画面
<!-- BEGIN_MODULE Form --> <!-- BEGIN step--> <!-- 初期画面 --> <!-- END step --> <!-- BEGIN step#reapply --> <!-- 修正画面 --> <!-- END step#reapply --> <!-- BEGIN step#confirm --> <!-- 確認画面 --> <!-- END step#confirm --> <!-- BEGIN step#result --> <!-- 完了画面 --> <!-- END step#result --> <!-- BEGIN step#forbidden --> <!-- 不正アクセス画面 --> <!-- END step#forbidden --> <!-- BEGIN step#repeated --> <!-- 連続投稿エラー画面 --> <!-- END step#repeated --> <!-- END_MODULE Form -->
{% set form = module('V2_Form') %}
{% if form.step == 'step' %}
<!-- 初期・修正画面 -->
{% endif %}
{% if form.step == 'confirm' %}
<!-- 確認画面 -->
{% endif %}
{% if form.step == 'result' %}
<!-- 完了画面 -->
{% endif %}
{% if form.step == 'forbidden' %}
<!-- 不正アクセス画面 -->
{% endif %}
{% if form.step == 'repeated' %}
<!-- 連続投稿エラー画面 -->
{% endif %}
エラーブロック
以下のようなブロックを記述すると、フォームのバリデーターでエラーが発生した際に、そのエラー内容とフォームIDを変数として持つブロックが表示されます。
エラーブロックの記述
<!-- BEGIN_MODULE Form -->
...
<!-- BEGIN error -->
<!-- フォームID : {formID} / エラー項目 : {errorKey} -->
<!-- END error -->
...
<!-- END_MODULE Form -->
<!-- 実行例 -->
<!-- フォームID : contactForm / エラー項目 : description,inquiry,name,email,zip,pref_code,address -->
{% set form = module('V2_Form') %}
{% if form.error %}
<!-- フォームID : {{ form.error.formID }} / エラー項目 : {{ form.error.fields|join(', ') }} -->
{% endif %}
<!-- 実行例 -->
<!-- フォームID : contactForm / エラー項目 : description,inquiry,name,email,zip,pref_code,address -->
- formID フォームIDの変数
- errorKey | error.fields 入力エラーが起こったフィールド名
Google Analyticsとの連携
Google Analyticsにイベントトラッキングという仕組みがあり、これを使ってフォームの入力エラーをイベント通知する事ができます。(Google Analyticsの詳細は省略します)
<!-- BEGIN_MODULE Form -->
...
<!-- BEGIN error -->
<script type="text/javascript">
ga('send', 'event', 'Form', 'error', '{formID}', '{errorKey}');
</script>
<!-- END error -->
...
<!-- END_MODULE Form -->
{% set form = module('V2_Form') %}
{% if form.error %}
<script type="text/javascript">
ga('send', 'event', 'Form', 'error', '{{ form.error.formID }}', '{{ form.error.fields|join(',') }}');
</script>
{% endif %}
フォームのエラー箇所を収集する事により、顧客がどこで悩んだりつまづいているのかが分かってきます。この情報をフォーム改善に役立てましょう。