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利用不可の環境だと選択肢の一つとしてありかも。
関連記事
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法
Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
JavaScriptで数値のカンマ区切り化とカンマ区切りの解除
JavaScriptで数値を3桁ごとにカンマ区切り化したい。また、それとは逆にカ ...