Vue.js+axiosでNetlifyのFormsを使ってハマった話

Netlifyとは

ホスティングサービスです。Firebaseなども流行っていますが、
今回はwebホスティングサービスが目的だったためNetlifyにのせました。
Githubと連携してRepositoryをそのままdeployできるのが魅力的です。
https://www.netlify.com/

NetlifyのForms

フォームのバック側の処理をしてくれます。
なので側だけ作れば簡単にフォーム機能がつかえるものです。
Slackやメールに通知するのも簡単なのでとても便利です。
https://www.netlify.com/docs/form-handling/

Formsの機能の使い方

最初に読ませていただいたのは、こちら。

Forms機能を利用するのは非常に簡単で、

タグ内にnetlifyと記述するだけです。

<form name="contact" method="POST" netlify>
  <!-- 省略 -->
</form>

そうホントにこれだけで、フォーム機能がつかえます。楽ちんです！

がしかし、

Formsの機能を使ったページだということをNetlifyに認識してもらう必要があってそこでハマりました。

Formsの機能をを使ったページだとNetlifyに認識してもらう必要がある

参考にさせていただいたのはこちら、そしてこちら。
vue-routerなどで実装するSPAでは、静的にこちらをおいてあげなければNetlifyに認識されないということでした。

なるほど。。

つまり、public/index.htmlなどに、

index.html

    <!-- A little help for the Netlify post-processing bots -->
    <form name="contact" netlify netlify-honeypot="bot-field" hidden>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <textarea name="message"></textarea>
    </form>

をおいてあげれば解決できました〜！🎉🎉🎉 ひえぇ〜

hidden要素でおけとNetlifyのblogにガイドがちゃんとかいてありました〜TT
https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/

そのほか、フォームのデータをpostするときはform-nameというものを一緒に送ってあげる必要があるのでそこも注意です。
https://www.netlify.com/docs/form-handling/#ajax-form-submissions

【まとめ】Vue.js+axiosでNetlifyのFormsを使うのに必要なこと

長く書きましたので、つまりまとめると以下2点。

• public/index.htmlなど静的にhidden要素でNetlifyに認識してもらうためのタグをおく。
• データをpostするときにform-nameも一緒に送ってあげる。

以上！

---

参考：
https://qiita.com/NaokiIshimura/items/bce2f0b865ec1bc16a53
https://qiita.com/nanaki14/items/007eae905d6305f75f6a
https://qiita.com/tatane616/items/f646e84fe4cdd9eac0de
https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/
https://www.netlify.com/docs/form-handling/#ajax-form-submissions
https://www.netlify.com/docs/form-handling/

私の拙いコードで作ったポートフォリオ：
https://mainichi-chocolate.tokyo
現在WIPですよ＾０＾