Nuxt.js + Netlify でform機能がまともに動かない

Nuxt.js + Netlifyで無料サイトを作っていたら、 Netlifyのフォーム機能が正常に動きませんでした。

だいぶハマりました、、、、

その、解決策です。

Nuxt.js と Netlify はそれぞれ以下です。

Nuxt.js

ja.nuxtjs.org

Netlify

www.netlify.com

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'を指定したりしていますが、おまけ程度です。

関連記事

JavaScript フレームワーク入門

いまから始めるWebフロントエンド開発