0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Netlify form、用意したThanksページに飛ばしてくれ頼む。

Last updated at Posted at 2021-10-01

言っておくけどNetlifyはいいぞ。

使用したもの

  • Vue.js
  • Vuetify
  • Veevalidation
  • Netlify

Netlify formを使う。

導入は簡単で、<form>タグに決まった属性を追加するだけ。
この辺りのことは色んな方が記事にしてくださっているので詳しくは書きません。
参考にしたのは下記ページ。

Forms機能を利用して問い合わせフォームを作成する

普通なら静的ページならこれで完結。超簡単。
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が書き出されるようにしたい。

やり方が分かったのでそれは後ほどまた記事にします。
書きました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?