🔖
Hugoで作っている静的WebサイトをNetlifyにデプロイしたらメールフォームが動かなかったので直した
要約
Netlify に push した時、Netlify が Hugo を用いて静的 Web サイトをビルドする。この時、Hugo の minify オプションが有効なため、HTML が minify される。minify された後、form 内の属性値のダブルクオーテーションが削除され、Netlify の bot がフォームを検知していなかった。Hugo の config ファイルから minify の設定をして、ダブルクオーテーションが削除されないようにした。
現象
Netlify 上にホストしている Hugo で作っている静的 Web サイトに、Netlify の機能を使ってメールフォームを設置した。メールフォームから送信ボタンを押しても、Netlify の管理画面にメールが届いていなかった。
原因
<form name="contact" method="POST" data-netlify="true"></form>
または
<form name="contact" method="POST" netlify></form>
というように form を書くと、Netlify の bot がフォームを検知して、デプロイ前に HTML を書き換える。この処理には、name 属性値が必要となる。ところが、Hugo が HTML を minify する際、 name="contact" の部分を name=contact というように書き換えていた。そのため、Netlify の bot がフォームを検知できなかった。
対策
Hugo のドキュメントから、config 内で minify を設定する方法を見つけた。
ドキュメントの設定をすべて config に書き写し、 [minify.tdewolff.html] の keepQuotes を keepQuotes = true に書き換え、Netlify に push した。
Discussion