入力項目の追加

入力側に追加するときの記述について

フォームの入力フォームはフォームステップ：初期（step）とフォームステップ：修正・エラー（step#reapply）の2カ所に記述されています。フォームの項目を追加するにはこの2つのステップに追加してください。フォームの項目はカスタムフィールドで作られています。カスタムフィールドについてはカスタムフィールドのページをご覧ください。

例えばsiteテーマでは /themes/site/contact/form/input.html にフォームの項目が記述されています。siteテーマのフォームステップ：初期（step）とフォームステップ：修正・エラー（step#reapply）は input.html とインクルードしているため項目を追加するときはこのファイルを編集すれば2ステップに反映されます。以下は siteテーマが /themes/site2014/contact/form/input.html を読み込んでいるソースの一部です。

Twigテンプレート例では入力画面と再入力画面を分けず、エラーがある場合も入力画面（step）内にメッセージを表示します。

なお、標準テンプレートでもTwigテンプレート例と同様に、再入力画面（step#reapply）を設けない構成にすることが可能です。

標準テンプレート
twig

<!-- BEGIN step -->
<form action="?step=reapply" method="post" class="js-unload_alert js-validator h-adr" enctype="multipart/form-data">
  @include("/contact/form/input.html")

  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="contactForm" />
  <button type="submit" name="ACMS_POST_Form_Confirm">内容の確認へ</button>
</form>
<!-- END step -->

<!-- BEGIN step#reapply -->
<form action="?step=reapply" method="post" class="js-unload_alert js-validator h-adr" enctype="multipart/form-data">
  @include("/contact/form/input.html")

  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="contactForm" />
  <button type="submit" name="ACMS_POST_Form_Confirm">
    内容の確認へ
  </button>
</form>
<!-- END step#reapply -->

{% if form.step == 'step' %}
  <form
    id="contactForm"
    action=""
    method="post"
    enctype="multipart/form-data"
    class="js-validator js-unload_alert"
  >
    {{ include('/contact/form/input.twig', form.fields) }}

    <input type="hidden" name="step" value="confirm" />
    <input type="hidden" name="error" value="step" />
    <input type="hidden" name="id" value="contactForm" />
    <button type="submit" name="ACMS_POST_Form_Confirm">
      内容の確認へ
    </button>
  </form>
{% endif %}

siteテーマを使ってフォームの項目を追加してみましょう。 /themes/site/contact/form/input.html に資料請求するかどうかの項目を追加します。以下のソースを追加してください。

標準テンプレート
twig

<tr>
  <th>資料請求</th>
  <td>
    <label class="acms-form-radio">
    <input type="radio" name="request" value="資料請求する"{request:checked#資料請求する} /><i class="acms-ico-radio"></i>資料請求する</label>

    <label class="acms-form-radio">
    <input type="radio" name="request" value="資料請求しない"{request:checked#資料請求しない} /><i class="acms-ico-radio"></i>資料請求しない</label>

    <input type="hidden" name="field[]" value="request" />
  </td>
</tr>

<tr>
  <th>資料請求</th>
  <td>
    <label class="acms-form-radio">
    <input type="radio" name="request" value="資料請求する" {{ request.array|checked('資料請求する') }} /><i class="acms-ico-radio"></i>資料請求する</label>

    <label class="acms-form-radio">
    <input type="radio" name="request" value="資料請求しない" {{ request.array|checked('資料請求しない') }} /><i class="acms-ico-radio"></i>資料請求しない</label>

    <input type="hidden" name="field[]" value="request" />
  </td>
</tr>

siteテーマのお問い合わせフォームに資料請求を追加するかどうかのフォームを追加できました。

selected / checked の出力

セレクトボックスやラジオボタン、チェックボックスでは、確認画面やバリデーションエラー発生後に入力済みの値を保持するため、selected や checked 属性を出力する必要があります。

a-blog cms では、現在の入力値と比較して一致した場合のみ selected または checked 属性を出力する仕組みが用意されています。

標準テンプレート

標準テンプレートでは、以下の変数を利用できます。

用途	記述例
チェックボックス・ラジオボタン	`{[フィールド名]:checked#[値]}`
セレクトボックス	`{[フィールド名]:selected#[値]}`

入力値と指定した値が一致した場合のみ、それぞれ checked または selected が出力されます。

<input type="radio" name="gender" value="male" {gender:checked#male}>
<input type="radio" name="gender" value="female" {gender:checked#female}>

<select name="pref">
  <option value="tokyo" {pref:selected#tokyo}>東京都</option>
  <option value="osaka" {pref:selected#osaka}>大阪府</option>
</select>

また、複数選択のチェックボックスにも利用できます。

<input type="checkbox" name="hobby[]" value="sports" {hobby:checked#sports}>
<input type="checkbox" name="hobby[]" value="music" {hobby:checked#music}>

Twigテンプレート

Twigテンプレートでは、checked フィルターおよび selected フィルターを利用できます。

単一値の場合は .value、複数選択のチェックボックスの場合は .array を利用します。

単一値の場合でも .array による含有判定でチェックできるため、特に区別せず .array を利用しても問題ありません。

	記述例
単一値の selected	`{{ field.value \| selected('value') }}`
複数値の selected	`{{ field.array \| selected('value') }}`
単一値の checked	`{{ field.value \| checked('value') }}`
複数値の checked	`{{ field.array \| checked('value') }}`

入力値と指定した値が一致した場合のみ、それぞれ selected または checked が出力されます。

<input type="radio" name="gender" value="male" {{ gender.value | checked('male') }}>
<input type="radio" name="gender" value="female" {{ gender.value | checked('female') }}>

<select name="pref">
  <option value="tokyo" {{ pref.value | selected('tokyo') }}>東京都</option>
  <option value="osaka" {{ pref.value | selected('osaka') }}>大阪府</option>
</select>

複数選択のチェックボックスでは .array を利用します。

<input type="checkbox" name="hobby[]" value="sports" {{ hobby.array | checked('sports') }}>
<input type="checkbox" name="hobby[]" value="music" {{ hobby.array | checked('music') }}>

Twigでは、checked および selected 校正オプション（フィルター）を利用して属性を出力します。指定した値が対象の変数と一致する場合、または配列に含まれる場合に checked または selected が出力され、それ以外の場合は何も出力されません。

a-blog cmsのフォームでは修正画面に戻っても入力したデータが保持されています。inputタグにカスタムフィールドの変数が書いてないとデータは保持されません。

標準テンプレート
twig

<!-- ○ データが保持される -->
<input type="radio" name="request" value="on"{request:checked#on} /><i class="acms-ico-radio"></i>資料請求する</label>

<!-- × データが保持されない -->
<input type="radio" name="request" value="on" /><i class="acms-ico-radio"></i>資料請求する</label>

<!-- ○ データが保持される -->
<input type="radio" name="request" value="on" {{ request.array|checked('on') }} /><i class="acms-ico-radio"></i>資料請求する</label>

<!-- × データが保持されない -->
<input type="radio" name="request" value="on" /><i class="acms-ico-radio"></i>資料請求する</label>

出力側に追加するときの記述について

確認画面（step#confirm）と完了画面（step#result）で追加した項目を出力する用のソースを追加します。今度はsiteテーマのお問い合わせフォームの /themes/site/contact/form/confirm.html に以下のHTMLを追加してください。

標準テンプレート
twig

<tr>
  <th>資料請求</th>
  <td>
    {request}
  </td>
</tr>

<tr>
  <th>資料請求</th>
  <td>
    {{ request.value }}
  </td>
</tr>

確認画面にいくと資料請求の項目が追加されています。

メールのテンプレートに追加

項目を追加したらメールのテンプレートにも追加が必要です。フォームには管理者宛と一般宛の本文のメールテンプレートが2つあります。この2つに項目を追加してください。

siteテーマでは以下が管理者宛と一般宛の本文のメールテンプレートになります。
/themes/site/contact/form/body.txt
/themes/site/contact/form/adminbody.txt

adminbody.txtのテンプレートに資料請求の項目を追加した例になります。

{name} 様 よりお問い合わせがありました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

受付日時：%{Y}年%{n}月%{j}日 %{H}:%{i}:%{s}

■お問い合わせ

会社名　　　　： {company}
お名前　　　　： {name}
メールアドレス： {email}
お電話番号　　： {phone}
ご住所　　　　： 〒{zip}　{pref_code}　{address}

資料請求： {request}

お問い合わせ種類： {description}
お問い合わせ内容：
{inquiry}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

入力項目の追加

入力側に追加するときの記述について

selected / checked の出力

標準テンプレート

Twigテンプレート

出力側に追加するときの記述について

メールのテンプレートに追加

イントロダクション

入門

コア概念

フロントエンド開発

機能ガイド

リファレンス

アップデート

拡張・カスタマイズ

ツール