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

blog-hero-imgNetlifyのFormsは簡単なミスの修正ですぐに動くようになります。

pen-icon2021.12.02

Profile Pic

この記事の筆者:三好アキ(ウェブエンジニア)


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など8冊を販売中。本に関するインタビュー記事はこちら。



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が認識されるようになりました。

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談