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利用不可の環境だと選択肢の一つとしてありかも。
関連記事
-
-
highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる
highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違 ...
-
-
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...
-
-
JavaScriptで後から追加した要素にイベントを割り当てる方法と挙動の違いについて
jQueryで後から追加した要素に対してイベントを割り当てる場合、いつもと異なる ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
aタグにてhref属性の「javascript:void(0);」の代替手段について
aタグにJavaScriptやjQueryでイベントを割り当てたい場合、href ...