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利用不可の環境だと選択肢の一つとしてありかも。
関連記事
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
jQueryでループを抜けようと(breakしようと)するとエラーになる際の対応方法
jQueryでループを抜けようと(breakしようと)すると「Uncaught ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
-
JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法
文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...
-
-
JavaScriptでURLのクエリを取得する２
直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...