Nuxt.js + Netlify でform機能がまともに動かない
Nuxt.js + Netlifyで無料サイトを作っていたら、 Netlifyのフォーム機能が正常に動きませんでした。
だいぶハマりました、、、、
その、解決策です。
Nuxt.js と Netlify はそれぞれ以下です。
Nuxt.js
Netlify
Netlifyのドキュメントを読むと
ドキュメントはこちら https://www.netlify.com/docs/form-handling/
Netlifyのドキュメントに書いてある、formのサンプルは以下です。
<form name="contact" netlify-honeypot="bot-field" action="thank-you" netlify> <p class="hidden"> <label>Don’t fill this out: <input name="bot-field"></label> </p> <p> <label>Email: <input type="text" name="name"></label> </p> <p> <label>Message: <textarea name="message"></textarea></label> </p> <p> <button type=”submit”>Send</button> </p> </form>
これをそのまま使うと失敗します。 middlema + Netlifyの時は問題無く使えたので、Nuxt.jsとの組み合わせで失敗するのではないかと思います。
変更後のコード
変更後がこちら
<form name="contact" netlify-honeypot="bot-field" action="thank-you" data-netlify="true" method="post"> <input type="hidden" name="form-name" value="contact" /> <p class="hidden" style="display: none;"> <label>Don’t fill this out: <input name="bot-field"></label> </p> <p> <label>Email: <input type="text" name="name"></label> </p> <p> <label>Message: <textarea name="message"></textarea></label> </p> <p> <button type=”submit”>Send</button> </p> </form>
解決策
一番のポイントがこれです。
<input type="hidden" name="form-name" value="contact" />
form-nameも一緒にサブミットして上げることです。 ドキュメントを読む限りでは、 formタグのname属性に名前を指定すればOK的な話になっているんですが、 input hiddenで form-nameを送信して上げないとどうやらダメみたいです。
あと、method='post'を指定したりしていますが、おまけ程度です。
関連記事
- 作者: 掌田津耶乃
- 出版社/メーカー: 秀和システム
- 発売日: 2016/09/16
- メディア: 単行本
- この商品を含むブログを見る
- 作者: 松田承一
- 発売日: 2016/08/25
- メディア: Kindle版
- この商品を含むブログを見る