React（Gatsby）でNetlifyのFormsが認識されない原因と解決方法

NetlifyのForms

Netlifyには数行のコードを追加するだけで利用可能なForms機能があります。

本サイトでもコンタクトページなどでこのForms機能を使っています。

FormsはNetlifyの管理画面から確認できますが、先日ブログ記事ページに小さな無料連絡フォームを追加した時、これが認識されませんでした。

原因は非常に初歩的なミスだったのですが、ここではその原因と解決策を紹介します。

ReactサイトでNetlify Formsが認識されない時の対策

現在、各ブログ記事には下のような連絡フォームが設置されています。

「連絡フォーム」という紫のボタンを押すとフォームが表示されるようになっていますが、この機能を実装してNetlifyにアップしてみると、フォームがなぜか認識されません。

実は私は過去にも、このようなNetlifyのFormsが認識されない問題にあたったことがあります。

それはReactについて書いた「はじめてつくるReactアプリ」という本の見本アプリに、連絡フォームをつけた時です。

この見本アプリはReactのcreate-react-appで作っていたのですが、調べてみると原因はこのサイトがSPAというところにあって、HTMLが最初の段階では存在していないためフォーム部分が認識されないのでした。

（いま出てきたSPAについて詳しくは下の記事を参考にしてください。）

create-react-appに追加したフォームがNetlifyに認識されない時の対策は、publicフォルダ内のindex.htmlに下のコードを追加することです。

// index.html

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>

これはこちらの記事で紹介されていた方法です。

Gatsbyサイトで認識されないNetlify Forms

さて話は戻って、当サイトはcreate-react-appではなくGatsbyを使っているので、上のようなコードの追加は必要ありません。

これまで本サイトに追加したいくつかのFormsはうまく動いているのに、なぜか今回はうまくいきません。

ネットで調べてみたものの解決策は見つからず、どうしようかと思っていると、「そういえば今回のフォームは『連絡フォーム』というボタンを押して初めて表示されるな」と思い出しました。

認識されない原因と解決策

このフォームの表示には下のようにuseStateが使われています。

const [showForm, setShowForm] = useState(false)

サイト上の「連絡フォーム」というボタンを押すと、showFormが更新されてtrueとなり、フォームが表示されるのですが、つまりサイトが表示された時の初回レンダー時にはこのフォームが存在していないのです。

これがNetlifyに認識されない原因でした。

なので初期stateはtrueとし、useEffectを使ってコンポーネントがマウントされた際にfalseとしてフォームの表示をオフにするコードを追加しました。

const [showForm, setShowForm] = useState(true)

useEffect(() => {
    setShowForm(false)
}, [])

非常に初歩的なミスでしたが、これで無事NetlifyにFormsが認識されるようになりました。