Netlify FormsをつかってGatsbyにお問い合わせフォームを追加するまで

いままでは、お問い合わせフォームを作成するのに、そのためだけにWordPressを入れてコンタクトフォームプラグインを使ったり、PHPのスクリプトを用意したりと、なかなか手間がかかって大変でした。

Netlify Formsの存在を知ってからは、静的サイトに簡易的なフォームを付けるだけであれば、本当にカンタンにフォームを設置できるのでNetlify Forms重宝しています！

ところが、静的サイトジェネレータのGatsbyにNetlify Formsのお問い合わせフォームを設置しようとしたら、思いのほか苦戦しましたので、注意点を記事にまとめたいと思います。

Netlify Formsとは

https://www.netlify.com/
Netlifyは静的サイトのホスティングサーバーでフリーミアムな料金体系なので、ちょっとした使い方であれば無料でいろいろと試せるのがいいところです。
その中に Forms というサービスがあって、HTMLの <form>タグの属性に netlify を追加することで、そのフォームが動くようにしてくれるというものです。

以下は公式ドキュメントのサンプルです。

<form name="contact" method="POST" netlify>
  <p>
    <label>Your Name: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

詳しい使い方は、こちらにあります。
https://www.netlify.com/docs/form-handling/

Netlifyで静的サイトをホスティングするなら、メールフォームはこれでいいですね！

無料枠では月に100件、アップロードデータサイズ10MBまで使えます。
https://www.netlify.com/pricing/

Gatsbyについて

GatsbyはReactベースの静的サイトジェネレータで、パフォーマンスにも優れ、今人気の静的サイトジェネレータの一つです。
https://www.gatsbyjs.org/

Gatsbyで苦戦したところ

ドキュメントどおりなのにうまくいかない！？

ドキュメントを参考に<form name="contact" method="POST" netlify> としてみましたが、動きません。

pages/contact.js

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const ContactPage = () => (
  <Layout>
    <h1>Contact Form</h1>
    <p>メールフォーム送信テスト</p>
    <form name="contact" method="POST" netlify>
      <div className="form-group">
        <label>お名前<abbr title="required">*</abbr>
        <input type="text" className="form-control" id="name" name="name" placeholder="お名前" maxlength="30" minlength="2" required autocomplete="name" />
        </label>
      </div>
      <div className="form-group">
        <label>メールアドレス<abbr title="required">*</abbr>
        <input type="email" className="form-control" id="email" name="email" placeholder="" pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required autocomplete="email" />
        </label>
      </div>
      <div className="form-group">
        <label>お問い合わせ内容<abbr title="required">*</abbr>
        <textarea className="form-control" id="contact" name="content" rows="8" required></textarea>
        </label>
      </div>

      <div className="form-group">
      <button type="submit">送信</button>
      </div>
    </form>
    <Link to="/">home</Link>
  </Layout>
)

export default ContactPage

その後、フォームの内容をサンプルのものと同じにしてみたり、
ビルド後にnettlify属性が消えるので、data-netlify="true"としてみたり、
<input type="hidden" name="form-name" />を入れてみたり、
いろいろと試したのですが、なかなかフォームは動いてくれませんでした。

もともと静的なサイトであれば、Netlifyが自動的に<input type="hidden" name="form-name" value="contact" />を挿入しているようなのですが、静的サイトジェネレータであるGatsbyの場合、これが自動的に生成されないのが原因のようです。

解決！！

これで無事に解決しました！
ポイントは <form> タグに name="contact" data-netlify="true" を指定すること。
<input type="hidden" name="form-name" value="contact" /> を入れることでした。
formのnameの値とinputのvalueの値を一致させないといけないようです。

pages/contact.js

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const ContactPage = () => (
  <Layout>
    <h1>Contact Form</h1>
    <p>メールフォーム送信テスト</p>
    <form 
      name="contact" 
      method="POST" 
      data-netlify="true"
      data-netlify-honeypot="bot-field"
    >
    <input type="hidden" name="form-name" value="contact" />
    <input type="hidden" name="bot-field" />

      <div className="form-group">
        <label>お名前<abbr title="required">*</abbr>
        <input type="text" className="form-control" id="name" name="name" placeholder="お名前" maxlength="30" minlength="2" required autocomplete="name" />
        </label>
      </div>
      <div className="form-group">
        <label>メールアドレス<abbr title="required">*</abbr>
        <input type="email" className="form-control" id="email" name="email" placeholder="" pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required autocomplete="email" />
        </label>
      </div>
      <div className="form-group">
        <label>お問い合わせ内容<abbr title="required">*</abbr>
        <textarea className="form-control" id="contact" name="content" rows="8" required></textarea>
        </label>
      </div>

      <div className="form-group">
      <button type="submit">送信</button>
      </div>
    </form>
    <Link to="/">home</Link>
  </Layout>
)

export default ContactPage

（ちなみにform タグ属性のdata-netlify や data-netlify-honeypot はケバブケースでも問題ないみたいです。キャメルケースだとハイフンがなくなってしまいました。）

data-netlify-honeypot="bot-field"はいろいろと試している過程で入れたもので、ボット対策の機能みたいです。

他にも<form action="thanks">とすると、送信完了後にThanksページにリダイレクトすることもできるようです。

まとめ

静的サイトで、確認画面や自動返信メールのいらないメールフォームをサクッと使いたいときには便利ですね！