Vue.jsを使用してサーバー利用なしのSPAを作成しています。
しかしサーバー利用なしの場合、メールの送受信ができません。つまり、コンタクトフォームの設置に難ありなのです。
でも大丈夫！
JavaScriptだけで作ったホームページにコンタクトフォームを設置するには、SmtpJSやEmailJSなどのツールを使用すれば簡単です。
今回は、EmailJSを使ってVueでコンタクトフォームを作成する方法と各種設定について解説します。
開発ツール
Vue.js
Vue CLI
Vue Router
EmailJSの登録からメールのテンプレート作成まで
EmailJSは、メールの送受信数が200/月まで無料です。その後も年払いの場合は1,000通で$4月、5,000通で$12/月と比較的手頃なプランが充実しています。
アカウント作成
アカウントを登録しましょう。
メールサービス登録
次に使用したいメールサービスを選択し、EmailJSと繋げます。私はGmailを選択しました。
Connect accountをクリックすると、Gmailが「許可しますか？」と聞いてくるので許可し、Add serviceをクリックします。
このservice IDは、Vueのコンタクトフォームで使います。あとで変更することも可能です。
メールのテンプレートを作成する
左のメニューからEmail Templatesを選択し、テンプレートを作成していきます。無料プランの場合は、テンプレートは2つまで作成できます。
既存のサンプルを編集してもいいし、新しく作成しても良いでしょう。このときのTemplate IDもVueで使います。
メールテンプレートの作成はとても簡単です。inputタグのname値を{{ }}で囲むだけ！
例えば下記のようなシンプルなコンタクトフォームなら、
<form>
<label>お名前</label>
<input type="text" name="name">
<label>メールアドレス</label>
<input type="email" name="email">
<label>内容</label>
<textarea name="inquiry"></textarea>
<input type="submit" value="送信">
</form>こんな感じで実装します。
Auto Reply機能では、問い合わせをしてきた人にも自動返信でメッセージを送ることができます。こちらも設定しておきましょう。
Vueでコンタクトフォームとメール送信機能を実装する
まずは、npmでemailjs-comをインストールします。
$ npm install emailjs-com --save次にコンタクトフォームのコンポーネントを作成しましょう。
Contact.vue
今回はVue CLIを使用しているので.vueファイルで作っています。
<template>
<form @submit.prevent="onSubmit">
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="inquiry"></textarea>
<input type="submit" value="送信" />
</form>
</template>
<script>
import emailjs from "emailjs-com"; //emailjsを読み込む
export default {
methods: {
onSubmit: function(e) {
// バリデーションなどは省略
emailjs
.sendForm(
"SERVICE_ID", // 今回はgmail
"TEMPLATE_ID", // 今回はtemplate_1234567
e.target,
"USER_ID" // Account → API keys にあるUser ID
)
.then(
result => {
console.log("SUCCESS!", result.status, result.text);
},
error => {
console.log("FAILED...", error);
}
);
}
}
}
};
</script>これで完了です。簡単でしたね！
