同じフォームからの送信をセレクトメニューやラジオボタンの選択で複数の送信先に分ける方法

フォームにセレクトメニューやラジオボタンの選択肢があって、その選択によって送信先を分けたいというケースはよくありますよね。そういった場合にどこを変更すれば良いのかを 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" data-validator="id">
    <option value=""<!-- BEGIN_IF [{id}/em] --> selected="selected"<!-- END_IF -->>選択してください</option>
    <option value="contactFormA"{id:selected#contactFormA}>ご質問</option>
    <option value="contactFormB"{id:selected#contactFormB}>ご要望</option>
    <option value="contactFormC"{id:selected#contactFormC}>資料請求</option>
    <option value="contactFormD"{id:selected#contactFormD}>その他</option>
  </select>
  <input type="hidden" name="id:v#required" id="id-v-required">

  <div role="alert" aria-live="assertive">
    <div data-validator-label="id-v-required" class="validator-result-{id:v#required}">
      <p class="form-error-text"><span class="acms-icon acms-icon-news" aria-hidden="true"></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がない状態になってしまいます。

ここまでの作業でフォームIDを分岐することができました。送信テストをするとセレクトメニューの選択に応じてそれぞれ異なるフォーム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" のカスタムフィールドを追加することによってさまざまな値を送信することができることを覚えておくと他の実装にも役立ちます。


これで、確認画面とメールテンプレートでセレクトメニューのラベルを出すことができるようになりました。JavaScript で id に入れる値を操作するほうが向いている場合もありますが、このような簡単な実装方法もあるというご紹介でした。


この記事をシェアする

この記事を書いた人

有限会社 アップルップル

笠谷亜貴子

このブログでは a-blog cms の実装に関することを中心に、CSS、JavaScriptなどフロントエンド周辺のことを書いていきます。

おすすめ記事

この記事のハッシュタグ から関連する記事を表示しています。

他の方法で記事を探す

2022年12月

年間カレンダーへ
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31