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

ishigaki

こんにちは、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>
option 要素に含まれるテキストがラベルとして出ている状態

ラベルの表示を変更する

このままでは通知の可読性が悪いため、 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 を使用している方々の参考にしていただけるとありがたいです。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。