Netlify Forms のメール通知の内容をカスタマイズする

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

最近 Netlify Forms のメール通知の本文内にある入力欄ラベルをカスタマイズする機会があったため、今回はメール通知の仕様とそのカスタマイズ方法について書きたいと思います。

Netlify Forms については以前書いたこちらの記事をご覧ください。

Netlify Forms のメール通知について

Netlify Forms でサイトにフォームを設置すると、Netlify 管理画面のSite settings > Forms > Form notifications からフォームのメール通知をオンにすることができます。

これはフォームが送信された際に内容が Netlify に登録したメールアドレスに自動的に送信されるというものです。

ラベルの仕様

メール本文にはデフォルトで入力欄ごとのラベル＋送信内容のセットが入っています。これは for 属性で結び付けられた label 要素とフォームパーツが一つのセットとして認識されています。

このラベルには、フォーム側の label 要素が内包している要素の全てのテキストが出ます。

一例として、 label 要素に select 要素が内包されている時は、 select に入っている option 要素の内容が全てラベルとして通知に入ります。

<form data-netlify="true" method="POST">
  <label htmlFor="selectForm">
    セレクトフォームのラベル
    <strong>必須</strong>
    <select name="selectForm" id="selectForm">
      <option value="セレクトフォームの項目1">セレクトフォームの項目1</option>
      <option value="セレクトフォームの項目2">セレクトフォームの項目2</option>
      <option value="セレクトフォームの項目3">セレクトフォームの項目3</option>
    </select>
  </label>
</form>

ラベルの表示を変更する

このままでは通知の可読性が悪いため、 label 要素から select 要素を除外することで通知メールのラベルから option 要素のテキストを除くことができます。

<form data-netlify="true" method="POST">
  <label htmlFor="selectForm">
    セレクトフォームのラベル
    <strong>必須</strong>
  </label>
  <select name="selectForm" id="selectForm">
    <option value="セレクトフォームラベル1">セレクトフォームラベル1</option>
    <option value="セレクトフォームラベル2">セレクトフォームラベル2</option>
    <option value="セレクトフォームラベル3">セレクトフォームラベル3</option>
  </select>
</form>

select 要素の場合に限らず、通知メールのラベルには label 要素に入っている全てのテキストが出る仕様のため、ラベルを変更する場合は label 要素の中身を変更する必要があります。

まとめ

今回は Netlify Forms のメール通知のカスタマイズ方法についてまとめました。

Netlify Forms を使用している方々の参考にしていただけるとありがたいです。