入力側に追加するときの記述について
フォームの入力フォームはフォームステップ：初期（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）を設けない構成にすることが可能です。
<!-- 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 に資料請求するかどうかの項目を追加します。以下のソースを追加してください。
<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タグにカスタムフィールドの変数が書いてないとデータは保持されません。
<!-- ○ データが保持される -->
<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を追加してください。
<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}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
