Gatsby.jsのサイトにNetlifyのformsを導入する

シンプルなお問い合わせフォームをGatsby.jsの静的サイトに導入してみました。

<form
  name="contact"
  method="post"
  data-netlify-honeypot="bot-field"
  data-netlify="true"
  autocomplete="off"
  action="/thanks"
>
  <input type="hidden" name="form-name" value="contact" />
  <p hidden>
    <label>
      Don’t fill this out if you're human:
      <input name="bot-field" />
    </label>
  </p>
  <div>
    <label>名前</label>
    <input id="name" type="text" name="name" />
  </div>
  <div>
    <label>メール</label>
    <input id="email" type="email" name="email" />
  </div>
  <div>
    <label>メッセージ</label>
    <textarea id="message" name="message"></textarea>
  </div>
  <div>
    <button type="submit">送信</button>
  </div>
</form>

formタグの中にaction="/path-to-thanks-page"と記載することで、送信ボタンを押したあと自動的に用意したページに遷移することが出来ます。

これだけで簡単にフォームが生成できるのすごいですね。