こんにちは、れいじです。
NetlifyというHerokuみたいなPaaSサービスがあるのですけれども、これが中々よろしいサービスでして最近色々と弄ってみてます。
無料枠でも
- 月300デプロイまで可能
- カスタムドメイン設定可能
- 簡易CI/CD
などなど。アクセス数に関しても(大バズする程でなければ)全然大丈夫。確か12万アクセスまで大丈夫だった気がする
その中でも目立つのがFormという機能でして、例えばショップページを運営している場合だとお問い合わせフォームや商品に関する感想を受け付けるフォームが簡単に実装できます。
私は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タグを書いておく必要があるらしいです。
上で述べたように、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とか使ってるとさ……
第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 Support Forums
これを書かないとそもそもNetlifyのForm機能に値が送信されないので気を付けてください。
まとめ
というわけでなんとか実装できました
Formikとか使ってたらもっとややこしそう(こなみかん)
全然関係ないけどNetlifyのフォーラムには運営側の人が結構常駐していて、こういうTipsの共有をかなり嬉しがるっぽいです。英訳してフォーラムに投稿しちゃおうかな～(英語力皆無)
ではでは！！
