JavaScriptでメール送信を行える「EmailJS」の利用方法
お問い合わせフォーム等の記入内容をメールで送信する際、通常はPHP等サーバサイドの言語で対応することになる。これをJavaScriptで何とかないかと調べたところ「EmailJS」というサービスを利用することで対応できるらしい。設定方法やソースコード等を以下にメモ。
目次
EmailJS
公式サイト
利用料金
こちらのページによると「200リクエスト / 月」までは無料で利用可。それ以上となると有料になる点に注意。
事前準備
アカウント作成及びログイン
こちらのページよりアカウント作成を行っておきダッシュボードにログインする。
Email サービス連携
こちらのページより利用するEmailサービスと連携設定を行う。
ちなみにGmailを選択し「Connect Account」ボタンをクリックするとGoogleへのログインが促されるのでログインし、元のページに戻ったら「Create Service」ボタンをクリックすると連携が完了する。
尚、連携が完了すると「Service ID」が発行されるのでメモしておく。
テンプレート作成
こちらのページよりテンプレートを作成する。作成後、「Template ID」が発行されるのでメモしておく。
Public Keyの取得
こちらのページの「API keys」内に「Public key」が表示されている筈なのでメモしておく。
フォームの作成
ドキュメントを参考の上、以下ソースコードをアップロードしておく。尚、【Public Key】【Email ServicesのID】【Email TemplatesのID】はメモしたものに書き換えること。
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<form id="contact-form">
<input type="hidden" name="contact_number">
<label>Name</label>
<input type="text" name="user_name">
<label>Email</label>
<input type="email" name="user_email">
<label>Message</label>
<textarea name="message"></textarea>
<input type="submit" value="Send">
</form>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init({
publicKey: "【Public Key】",
});
})();
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
emailjs.sendForm('【Email ServicesのID】', '【Email TemplatesのID】', this).then(function() {
console.log('SUCCESS!');
}, function(error) {
console.log('FAILED...', error);
});
});
}
</script>
</body>
</html>
メール受信について
メールの受信についてはダッシュボードのこのページで確認できる。
所感
無料枠は「200リクエスト / 月」と若干制限が厳しいものの、ASP等のPHP利用不可の環境だと選択肢の一つとしてありかも。
関連記事
-
-
Flashを用いずJavaScriptでコピー&カット機能を実装する方法
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...
-
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
-
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法
CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...