言っておくけどNetlifyはいいぞ。
使用したもの
- Vue.js
- Vuetify
- Veevalidation
- Netlify
Netlify formを使う。
導入は簡単で、<form>タグに決まった属性を追加するだけ。
この辺りのことは色んな方が記事にしてくださっているので詳しくは書きません。
参考にしたのは下記ページ。
普通なら静的ページならこれで完結。超簡単。
Vueを使ったページのなら下記のページがとても参考になりました。（今回はこちらの方法を使わせていただきました）
Vue.js+axiosでNetlifyのFormsを使ってハマった話
本題：用意しておいたthanksページに飛ばない
Form要素にaction属性を付けて、値をオリジナルthanksページのパスにすればいいよ
ドキュメントにそう書いてあリました。だからそうした。
結果飛ばない。なんでじゃ！！
ちなみにその時のディレクトリ構成は下記のようになっていました。
src
|
public
|--index.html
component
|-Form.vue
views
|--contact
|--index.vue
|--thanks.vue
/src/views/contact/index.vueには/src/component/Form.vueがimportされていた状態です。
その/src/component/Form.vueには下記のように記述しました。
<v-form v-model="valid" data-netlify="true" ref="form" method="POST" action="/contact/thanks">
vuetifyではこのv-formが<form>になりますのでaction属性を付けて作成しておいたthanksページに飛ぶように設定しました。そしてデプロイ。
しかし。Netlify Formのデフォルトで用意されているthankyouページに飛ばされてしまう・・・なぜ！！
そうならないようにaction属性に設定しているんでしょうが！！
色々試したり調べたりしたけどこれといった解決方法は見つからず・・・いや！！絶対に何か方法はあるはず。
Netlifyは静的ページホスティングに強い・・・逆にコンパイルされるようなページには弱いのでは・・・
なので下記のようにしました。
src
|
public
|--index.html
|--thanks.html//←静的thanksページを追加で作ってみた
component
|-Form.vue
views
|--contact
|--index.vue
|--thanks.vue
そして先ほど紹介したページ（Vue.js+axiosでNetlifyのFormsを使ってハマった話）にでてきたコードにaction属性を加え、デプロイ。
<form name="contact" netlify netlify-honeypot="bot-field" hidden action="/thanks.html">
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
設置していたお問い合わせフォームからテストでメールを飛ばしてみたら！！！
デフォルトじゃない先ほど作ったthanks.htmlがデデデで出てきた〜〜〜〜！！！
コンパイルされてできた<form>タグにaction属性を付けてthanksページに飛ばそうとしてもダメだったのね。
びっくりしたけど、いやそうだよね、と。元々そういうものだったよねNetlify Form。
だがthanksページがしょぼい
だって動作を確かめるためだけに作ったhtmlだもの・・・<p>タグしかありません。
どうにかVueやVuetifyを使って、他ページと統一された綺麗なthanks.htmlが作りたい・・・
なんとか、なんとか・・・・
CDNでthanks.htmlにぜーーーーんぶ読み込んじゃえばいいじゃん！！
フォントもvueもveutifyもアイコンもCDN！！
結果的には意図した見た目のthanks.htmlができてとりあえずは完成。
だが果たしてこれは正解なのか
いやそんなことないと思う。結果的にSPAじゃなくなってるじゃん。
せめて、public/index.htmlと同じところにthanks.htmlが書き出されるようにしたい。
せめて、public/index.htmlと同じところにthanks.htmlが書き出されるようにしたい。
やり方が分かったのでそれは後ほどまた記事にします。
書きました。