フォームにセレクトメニューやラジオボタンの選択肢があって、その選択によって送信先を分けたいというケースはよくありますよね。そういった場合にどこを変更すれば良いのかを UTSUWA テーマ（Figma / GitHub）のフォームテンプレートを例に説明します。

1. 管理画面からフォームIDを作成する

送信先を振り分けるのに必要なフォームIDを管理画面から作成し、それぞれに送信先メールアドレスを設定します。例としてここでは contactFormA, contactFormB, contactFormC, contactFormD の4つのフォームIDを作成することにします。「フォームIDをどう設定したら良いのか分からない」という方は、もともと設定されている contactForm を参考にしてみてください。

2. テンプレートからフォームIDの記述を削除する

/themes/utsuwa/contact/form/main.html を開いて、

<input type="hidden" name="id" value="contactForm">

を削除してください。「step」「step#reapply」「step#confirm」の各ブロックに1箇所ずつ、計3箇所あります。

3. セレクトメニューの value をフォームIDに紐付ける

/themes/utsuwa/contact/form/input.html を開き、セレクトメニューが含まれている div を次のように書き換えます。

<div class="form-control">
  <select id="id" class="form-select" name="id">
    <option value=""> selected="selected"<!-- END_IF -->&gt;選択してください</option>
    <option value="contactFormA">ご質問</option>
    <option value="contactFormB">ご要望</option>
    <option value="contactFormC">資料請求</option>
    <option value="contactFormD">その他</option>
  </select>
  <input type="hidden" name="id:v#required" id="id-v-required">

  <div>
    <div class="validator-result-{id:v#required}">
      <p class="form-error-text"><span class="acms-icon acms-icon-news"></span>お問い合わせ種類を選択してください。</p>
    </div>
  </div>
</div>

• <input type="hidden" name="field[]" value="description"> を削除する
• 「description」を「id」に置換する
• option タグの value の値と selected# の後の値をフォームIDに合わせて書き換える

の3つの作業をやっています。特に最初の作業が必要であることに注意してください。もともとのdescription と違って id はカスタムフィールドではありません。この1行を削除しないままだとフォームIDが field[] に入り、フォームIDがない状態になってしまいます。

4. 確認画面でセレクトメニューのラベル（ご質問、ご要望、資料請求、その他）を表示する

/themes/utsuwa/contact/form/confirm.html の {description} を次のように書き換えます。

<!-- BEGIN_IF [{id}/eq/contactFormA] -->ご質問
<!-- ELSE_IF [{id}/eq/contactFormB] -->ご要望
<!-- ELSE_IF [{id}/eq/contactFormC] -->資料請求
<!-- ELSE -->その他
<!-- END_IF -->

5. メールテンプレートで {description} を出すために、カスタムフィールドに値を入れる

/themes/utsuwa/contact/form/main.html の step#confirm にある「送信する」ボタンが含まれる form の中に、

<!-- BEGIN_IF [{id}/eq/contactFormA] -->
<input type="hidden" name="description" value="ご質問">
<!-- ELSE_IF [{id}/eq/contactFormB] -->
<input type="hidden" name="description" value="ご要望">
<!-- ELSE_IF [{id}/eq/contactFormC] -->
<input type="hidden" name="description" value="資料請求">
<!-- ELSE -->
<input type="hidden" name="description" value="その他">
<!-- END_IF -->
<input type="hidden" name="field[]" value="description">

と追加して、{description} にセレクトメニューのラベルが入るようにします。カスタムフィールド名は何でもかまわないのですが、{description} にしておけばもともとのメールテンプレートそのままで内容を表示できます。

このように、送信ボタンと同じ form の中に type="hidden" のカスタムフィールドを追加することによってさまざまな値を送信することができることを覚えておくと他の実装にも役立ちます。