勉強したことのメモ

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-tag-filter-button」プラグインの利用方法

以前にLeafletでマーカーをグループ化し、チェックボックスの状態により表示非 ...

JavaScriptで特定の要素にマウスオーバーした際、ツールチップを表示させる「Tippy.js」ライブラリの利用方法

JavaScriptで特定の要素にマウスオーバーした際、ちょっとした説明文等を書 ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...