モノクロタイム

I'm from the future!

【Netlify+ReactApp】create-react-appで作ったWebアプリでNetlifyのForm機能を使う

こんにちは、れいじです。

NetlifyというHerokuみたいなPaaSサービスがあるのですけれども、これが中々よろしいサービスでして最近色々と弄ってみてます。

www.netlify.com

無料枠でも

  • 月300デプロイまで可能
  • カスタムドメイン設定可能
  • 簡易CI/CD

などなど。アクセス数に関しても(大バズする程でなければ)全然大丈夫。確か12万アクセスまで大丈夫だった気がする

その中でも目立つのがFormという機能でして、例えばショップページを運営している場合だとお問い合わせフォームや商品に関する感想を受け付けるフォームが簡単に実装できます。

qiita.com

私はWebページを作る時は専らReactなりVueなりを使っているので、今回作ろうとしたページもReactで作るつもりでした。皆おなじみcreate-react-appです。

…………Form動かねえ~~~~~~~~!!!

滅茶苦茶悩んでなんとか実装出来たのでサンプルコードと共に置いておきます。

利用技術+αは

  • React(create-react-app)
  • Material-UI

です。

第1の躓き:補助用formタグはpublic/index.htmlに書く

も~~~~~これですこいつが全ての元凶。いや私の頭が悪いだけかもしれん

そもそもNetlifyのForm機能を使うためにライブラリを導入しなければならないとかそういうのは一切なく、form要素にnetlify属性を付与してやればNetlifyのBotがその値を読み取ってFormと連携してくれるよっていうのが強力なポイントなのですけれども、JSXを使っている場合だと上手く動かないらしいです。(Botが検出できるのはHTML要素だけであって、JSによって生成されたHTML要素はクロールできない)

この問題を解決するために以下の公式のドキュメントには、任意のhtmlファイルにnetlify属性を付与したformタグを書いておく必要があるらしいです。

www.netlify.com

上で述べたように、JSで生成されるHTML要素(コンポーネント)はbotがクロールできないので、こいつをReact,Component内だったりfunction Componentの中に書いても動作しないんですよね。

で、create-react-appコマンドで作ったWebアプリでこいつが書けそうなhtmlファイルはindex.htmlしかありません

つまりこんなかんじ

これでNeilifyのBotが「オッこのページにはNetlifyのFormと連携する要素があるっぽいぞ!」と把握することができます

第2の躓き:補助用formタグの中で仕える要素はinputかtextarea

Material-UIとかいい感じのコンポーネントライブラリを使っていると色々と忘れがちだと思うんですけど、コンポーネント側でどんなFormやInputを使っていようと、index.htmlに追記する補助タグの中身はinputタグかtextareaタグじゃないと動作しないようです。

例えば連携するフォームが以下のようなものでも、index.html側に書くものは基本的なフォーム系タグで構成されていなければNetlify側で掴む事ができません。いや当然といえば当然なんですが本当HTML5のタグ忘れるよ……Reactとか使ってるとさ……

gist.github.com

第3の躓き:inputタグを忘れない

<input type="hidden" name="form-name" value="message" />

これ!!これね!!

index.htmlを読み込んだ時に見つけたフォームと紐付けるための大事なやつだから忘れちゃだめなやつです!公式フォーラムで「Form動かねえ~」って質問してる人のうち9割くらいがこのinputタグ書いてないとかそんな感じだったと思います

Netlify form not submitting, or showing page not found error - Support - Netlify Community

[Support Guide] Form problems, form debugging, 404 when submitting - Support Guides - Netlify Community

これを書かないとそもそもNetlifyのForm機能に値が送信されないので気を付けてください。

まとめ

というわけでなんとか実装できました

f:id:yomoyamareiji:20200823120603p:plain

Formikとか使ってたらもっとややこしそう(こなみかん)

github.com

全然関係ないけどNetlifyのフォーラムには運営側の人が結構常駐していて、こういうTipsの共有をかなり嬉しがるっぽいです。英訳してフォーラムに投稿しちゃおうかな~(英語力皆無)

ではでは!!