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利用不可の環境だと選択肢の一つとしてありかも。
関連記事
-
textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法
textareaのheight以上に文字を(複数行)入力しても当然heightの ...
-
3Dデータ(objファイル)をブラウザ上で表示する方法(JSC3D)
3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...
-
バニラJS対応(jQuery非依存)の通知(トースト)系ライブラリ「Notyf」の利用方法
以前に通知(トースト)系ライブラリ「Toastr」の利用方法をメモしたが、こちら ...
-
Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...
-
JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法
JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...