blog-hero-img

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

pen-icon2021.12.02

この記事は約3分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録

NetlifyのForms

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

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

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

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

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

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

free-contact-form

「連絡フォーム」という紫のボタンを押すとフォームが表示されるようになっていますが、この機能を実装して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が認識されるようになりました。

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)