問い合わせフォームも簡単に作れる。そう、Netlifyならね。

Netlify Formが便利

Form Handling - Forms | Netlify

フォームのコーディングをしたらformタグに data-netlify="true" を追加するだけでフォームが作れてしまう。

<form name="contact" method="POST" data-netlify="true">
  <label>Name</label>
  <input type="text" name="name">
  <label>Email</label>
  <input type="email" name="email">
  <label>Message</label>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

サンクスページへの遷移も可能

actionで指定すれば問い合わせ完了後にサンクスページを表示することも可能。

<form name="contact" method="POST" action="/thanks.html" data-netlify="true">

nuxt generateで問題発生

しかし残念ながらnuxt generateの場合はこのままでは動かなかった。

本来であればformタグの下にNetlifyによって以下の一行が挿入される。

<input type="hidden" name="form-name" value="contact">

しかしgenerateされたHTMLを確認すると、その1行が無くなっている。

どうやらNuxt.jsとNetlifyの仕様同士がケンカしてしまっているらしい。

自分で書いてしまう

Netlifyが挿入してくれる行を、自分で書いておくことで上記の問題は解決した。

<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact">
  <label>Name</label>
  <input type="text" name="name">
  <label>Email</label>
  <input type="email" name="email">
  <label>Message</label>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Gatsbyとかの場合でもそうする必要があるようなので、多分これで合ってるはず。

How to Integrate Netlify’s Form Handling in a React App
「Form Handling with Static Site Generators」の部分を参照。