サーバー利用なしのSPAでEmailJSを使ってコンタクトフォームを作成する

SPAでメールを送る

こんにちは、Soyです。

Vue.jsを使用してサーバー利用なしのSPAを作成しています。

しかしサーバー利用なしの場合、メールの送受信ができません。つまり、コンタクトフォームの設置に難ありなのです。

でも大丈夫!

JavaScriptだけで作ったホームページにコンタクトフォームを設置するには、SmtpJSEmailJSなどのツールを使用すれば簡単です。

今回は、EmailJSを使ってVueでコンタクトフォームを作成する方法と各種設定について解説します。

開発ツール

Vue.js
Vue CLI
Vue Router

EmailJSの登録からメールのテンプレート作成まで

EmailJSは、メールの送受信数が200/月まで無料です。その後も年払いの場合は1,000通で$4月、5,000通で$12/月と比較的手頃なプランが充実しています。

EmailJSのプラン

アカウント作成

アカウント登録画面

アカウントを登録しましょう。

メールサービス登録

メールサービス選択画面

次に使用したいメールサービスを選択し、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>

これで完了です。簡単でしたね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)