勉強したことのメモ

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】はメモしたものに書き換えること。

<!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

  関連記事

Leafletのマップ状況をブラウザに保存し、再表示時に復元する「Leaflet.RestoreView」の利用方法

Leafletのマップ状況をブラウザ(cookie等)に保存し、ページリロード時 ...

サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法

サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...

jQuery Nice Selectを特定ページのみ無効にする方法

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...

sweetalert2を閉じた後、指定位置にスクロールしようとしても元の位置に戻る現象を解決する方法

sweetalert2で表示したウィンドウを閉じた後、指定位置にスクロールさせた ...

ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...