勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでメール送信を行える「EmailJS」の利用方法

  JavaScript

お問い合わせフォーム等の記入内容をメールで送信する際、通常はPHP等サーバサイドの言語で対応することになる。これをJavaScriptで何とかないかと調べたところ「EmailJS」というサービスを利用することで対応できるらしい。設定方法やソースコード等を以下にメモ。

 

EmailJS

公式サイト

https://www.emailjs.com/

利用料金

こちらのページによると「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】はメモしたものに書き換えること。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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

  関連記事

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法

JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...

バニラJavaScriptのDOMContentLoadedとは？

jQuery等を用いない素のJSで書かれたプログラムを触る機会があり、そのソース ...

S