簡単にお問い合わせフォームをVueで実装したい！
(プログラミングはまだまだ勉強中の身でして、内容に誤りがあるかもしれません。コメントでご教授頂けるとありがたいです...)
Vue.jsでWebサイトを作成してる中で、ポートフォリオ用などに、
サーバーレスで簡易的にフォーム機能を実装したいと思い、今回は、NetlifyのNetlifyFormsとういう機能を使用しました。
Netlifyとは？
静的ウェブサイトのためのホスティングサービスとサーバーレスのバックエンドサービスを提供。
GitHubとの連携で、自動デプロイも行ってくれる便利なWebサービスです。
前提
今回は、送信ボタンを押しても、バリデーションチェックのみ走り、実際にはどこにもデータが送信されない状態のcontact-formを使用しています。
- Vue.jsでサイト(Form)を作成済み
- contact-formにバリデーション機能を実装済み
- Vue Routerはインストール済み(Vue CLI使用)
- Netlifyでデプロイ設定済み
Vue.js＋Netlifyで自動デプロイの方法
手順
1, HTMLのフォームを作成 (NetlifyFormsはHTMLのフォームを認識し、作動する為)
public/index.html
<body ontouchstart="">
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
//追記
<form
name="contact"
data-netlify="true"
data-netlify-honeypot="bot-field"
hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
//ここまで
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
2,Vue.jsのフォームに追加設定
! formの属性にname, method, data-netlify, data-netlify-honeypot,
そして hidden input field を設定
- data-netlify-honeypotとhidden inputはスパム防止の設定です。
- hidden inputタグのnameは必ず”form-name”にして、そのvalue = formタグのname
(ここでは”contact”)になるようにします。 - @submit.preventはデフォルトの更新機能をなくします。参考
Contact.vue
<form
class="contact-form"
@submit.prevent="handleSubmit"
novalidate="true"
name="contact"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<div class="errors" v-if="errors.length">
<ul>
<li v-for="error in errors" v-bind:key="error">{{ error }}</li>
</ul>
</div>
<div class="flex-row">
<input
type="text"
name="name"
placeholder="お名前"
v-model="form.name"
/>
</div>
<div class="flex-row">
<input
type="email"
name="email"
placeholder="メールアドレス"
v-model="form.email"
/>
</div>
<div class="flex-row">
<textarea
type="text"
name="message"
placeholder="本文"
v-model="form.message"
></textarea>
</div>
<button class="btn">送信</button>
</form>
3, ローカルdataの設定
後にformをスプレッド構文で展開した配列をフォームの内容として渡す。
data() {
return {
errors: [],
form: {
name: null,
email: null,
message: null,
},
};
},
4, メソッドの設定
javascriptオブジェクトであるformをencod( )で、HTTPリクエストに沿った形式に変換してからPOSTリクエストで送信
encode(data) {
return Object.keys(data)
.map(
(key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
)
.join("&");
},
handleSubmit() {
this.checkForm(); //別にバリデーション関数を用意
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: this.encode({
"form-name": "contact",
...this.form, //name, email, messageが入っている
}),
})
.then(() => {
this.$router.push("thanks");//成功時
})
.catch(() => {
this.$router.push("404");//失敗時
});
},
5, Routerと成功時、失敗時のそれぞれの遷移先のページを用意
コードは省略します。
6, Netlifyのマイページより、送信されたお問い合わせフォームを確認
サイト内の設定のForm notificationsから管理者宛の通知(emailやslackなど)を設定できます。
参考