ライセンス購入ダウンロードへHomeドキュメントチュートリアルHTMLとCSSだけでサイトを制作するフォームに項目を追加するレベル9フォームに項目を追加するフォームフォームID目標お問い合わせフォームに「年齢」という項目を追加しましょう。複雑な条件付けが必要なフォームの入力項目についても、カスタムフィールドメーカーを利用して作成することができます。今回は入力欄の種類について、セレクトボックスで実装していきましょう。作成モードはデフォルトの「カスタムフィールド」のまま、以下のように入力してソースを生成します。</tr></table>この作業で生成された入力用ソースは上記になります。一般的なカスタムフィールドを設置する際はソースの生成は以上になりますが、フォームを作成する場合はこの限りではありません。場合によっては、入力を必須にしたい項目や最大文字数などを設定したい項目が出てくるかと思います。そのような時は、オプション機能を利用することで入力情報を精査することができます。「選択項目」の下部に表示されている「オプション」をクリックすると、入力チェック項目について指定するボックスが表示されます。今回は試しに「必須(required)」を指定してみましょう。)を指定するためのものです。今回は入力チェックに「必須」を設定したので空欄にしておきます。クリックすると、下記のようなソースが表示されます。class="acms-admin-text-error">年齢を選択してください。タグ内末尾に下記のバリデーターが追記されていることがわかりますね。このバリデーターによって入力チェックが行われます。-->では、生成した入力用ソースをテンプレートに追記していきましょう。フォルダで管理されています。以下はそれぞれのテンプレートの説明です。/contact/formstep.htmlページの表示状況に合わせて、フォームの上部に「1.内容の入力」「2.内容の確認」「3.送信完了」の見出しを表示するためのテンプレートです。ページの表示状況input.htmlページの表示状況が「1.内容の入力」の時に表示するテンプレートです。新規項目の入力ソースについてはこのテンプレートに追記します。confirm.htmlページの表示状況が「2.内容の確認」の時に表示するテンプレートです。新規項目の出力ソースについてはこのテンプレートに追記します。総括するテンプレートです。該当のファイルを開いて先ほどの入力用ソースを追記しましょう。テンプレート内の一番最後にコピー&ペーストしてください。class="acms-admin-text-error">年齢を選択してください。</tr></table>お問い合わせフォームに年齢の項目が追加されました。ボタンをクリックすると、バリデーターの挙動を確認することができます。先ほどカスタムフィールドメーカーで入力した「年齢を選択してください」が注意文として表示されたら成功です。最後に仕上げとして既存のフォームに習ってスタイルを整えていきましょう。構造や変数などは保持したまま、タグやクラスを書き換えると以下のようになります。タグ内に移動してください。</li>以上で入力欄の作成は完了です。追加した項目を入力内容確認画面に表示するさて、年齢の入力欄を設置したところで、一度フォームから記入事項を送信してみましょう。ボタンをクリックすると、入力内容の確認画面が表示されます。現状では、新規追加項目の「年齢」は表示されていません。出力用ソースを記述する必要があります。class="contact-form-control">{description}</td></tr>該当テンプレートを開くと、上記の方式でそれぞれの項目の入力事項を出力していることがわかります。記述自体が短く編集しやすい形になっているので、今回はこのソースを型としてコピー&ペーストし、年齢の出力用ソースを作成していきましょう。内の一番下に設置します。class="contact-form-control">{age}</td></tr></table>保存をしたら再度フォームから記入事項を送信してみましょう。セレクトボックスで選択した項目が確認画面に表示されていれば成功です。送信するメールの本文に追加した項目を表示するサイト内に新設するカスタムフィールドならば以上で作業は終了ですが、フォームのカスタマイズでは送信するメールへの記載も必要になります。現状では、送信されるメールには年齢は表示されていません。一般メール内容レベル5「お問い合わせフォームの設定を最適化する」でも記載した通り、フォームのメールの管理はフォーム設定画面で行います。ボタンをクリックする下図のようにそれぞれの件名・本文について管理画面で設定していれば、画面内より「一般メール設定」と「管理者宛メール設定」の2箇所を編集します。編集場所がどちらの場合でも追記する内容は変わりません。メール内で「ご住所」を表示している下に「年齢」の記述を追加しましょう。{age}[raw]設定を保存したら、再びフォームよりメールを送信しましょう。以下のように年齢について表示されていれば、チュートリアルの課題は達成です。使用する方法を用意しています。双方の主な違いは処理タイミングです。オプションから指定する場合は、サーバー側でエラー検出しているため「送信内容の確認へ」ボタンをクリックした後にエラー判定をしています。JavaScriptを利用したバリデーター機能を使うとブラウザ側で処理できるため、入力していたテキストボックスからカーソルが外れたタイミングでエラー判定することができます。サーバーにかかる負荷を軽減することもできます。developerをご覧ください。