Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ryunakae

SmtpJS v3でフロントからメール送信機能を実装

Last updated at Posted at 2021-05-31

自分のブログにも載せました！
SmtpJS v3でフロントからメール送信機能を実装
こっちの方がサンプルページもあって親切です。

##実装例 :　資料請求フォーム
SmtpJSを使ったサンプルとして今回作ってみるのが、資料請求フォームです。

機能としては以下の通り

  • メールアドレスなどの入力フォーム (インプット)
  • メール送信のトリーガー (ボタン)
  • 必須事項(今回はメールアドレス)の入力を確認 (エラーメッセージ)
  • 送信完了のお知らせ (アラート)

###土台作り (HTML, CSS)
まずはHTML, CSSで資料請求フォームの土台を作ります。

index.html
<body>
  <h1>資料請求フォーム</h1>
  <div class="form-group">
    <label for="corp_name">会社名</label>
    <input type="text" name="corp_name" id="corp_name" placeholder="例）株式会社〇〇">
  </div>
  <div class="form-group">
    <label for="full_name">氏名</label>
    <input type="text" name="name" id="name" placeholder="例）ドラゴン太郎">
  </div>
  <div class="form-group">
    <label for="email">メールアドレス<span class="badge">必須</span></label>
    <input type="text" name="email" id="email" placeholder="例）〇〇〇@email.com">
    <div class="alert-msg hidden" id="email_msg">メールアドレスを入力してください</div>
  </div>
  <div class="form-group-bottun">
    <button type="submit" class="button" id="send_Doc">
      このメールアドレスに資料を送信
    </button>
  </div>
</body>
style.css
body {
  max-width: 375px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.form-group {
  margin: 12px;
}

.form-group label {
  display: block;
  padding: 8px;
}

.form-group input {
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 30px;
}

.alert-msg {
  font-size: 12px;
  width: 280px;
  max-width: 80vw;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
  line-height: 1.5;
  padding: 5px 10px;
  margin: 5px auto;
}

.hidden {
  display: none;
}

.shown {
  display: block;
}

.badge {
  display: inline-block;
  font-size: 10px;
  margin: 0 10px;
  padding: 0 8px;
  vertical-align: 2px;
  line-height: 14px;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
}

.form-group-bottun {
  padding: 15px 30px;
}

###SmtpJSの導入

SmtpJSこちらの公式HPを参考に、
bodyの閉じタグの直前にsmtp.jsのスクリプトを挿入
その下にscript.jsを追加してjsファイルを作成

index.html
~ ~ ~
  </div>
+ <script src="https://smtpjs.com/v3/smtp.js"></script>
+ <script src="./script.js"></script>
</body>

script.jsにsendDoc()の関数を定義して公式HPにあるコードを中に入れます。

script.js
const sendDoc = () => {
  Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
  }).then(
    message => alert(message)
  );
}

###メールサーバ(SMTPサーバー)を立てる
ご自身でサーバーがある場合はそちらを使っていただければいいですが、もしサーバーが無い場合でも、SmtpJSの公式ページで紹介されているElastic Emailというメールサーバーサービスが１日100通までなら無料で使えます。
SmtpJSのページにある以下のボタンからElastic Emailのページに飛べます。

Elastic EmailではGoogleアカウントでサインアップできます。
サインアップして左下の「My Account」をクリック

「create SMTP Credentials →」をクリック

User Nameに自分のメールアドレスを入れて「Create」
以下のようなモーダルが出現するので、パスワードを安全な場所に控えておきましょう。

ここに表示されされ情報をsendDoc()に入れていきましょう。
Hostにsmtp.elasticemail.com、Usernameに設定したメールアドレス、Passwordに保管したパスワードを入れます。ついでにFromの送信元もUsernameと同じメールアドレスにしておきます。

script.js
const sendDoc = () => {
  Email.send({
+   Host : "smtp.elasticemail.com",
+   Username : "xxxxxx@gmail.com",
+   Password : "xxxxxxxxxxxxxxxxx",
    To : 'them@website.com',
+   From : "xxxxxx@gmail.com",
    Subject : "This is the subject",
    Body : "And this is the body"
  }).then(
    message => alert(message)
  );
}

###送信ボタンにイベントを設定
ボタンのクリックでsendDoc()の関数を発火させます。

script.js
~ ~ ~
+ const btn = document.getElementById('send_Doc');
+ btn.addEventListener('click', function() {
+   sendDoc(email,text)
+ }, false)

###フォームに入力された内容をメールに反映させる
sendDoc()に送信先のメールアドレスとメールの本文を渡せるようにする。ついでに件名も変えておく。

script.js
const sendDoc = (email, text) => {
  Email.send({
    Host : "smtp.elasticemail.com",
    Username : "xxxxxx@gmail.com",
    Password : "xxxxxxxxxxxxxxxxx",
+   To : email,
    From : "xxxxxx@gmail.com",
+   Subject : "資料請求",
+   Body : text,
  }).then(
    message => alert(message)
  );
}
~ ~ ~

送信ボタンをクリックした時にフォームの内容を取得してsendDoc()に渡す。

script.js
~ ~ ~
btn.addEventListener('click', function() {
+   const email = document.getElementById("email").value
+   const corp_name = document.getElementById("corp_name").value
+   const name = document.getElementById("name").value

+   const text = corp_name + '　' +  name + '様<br>'
+                + '資料請求ありがとうございます。<br><br><br>'
+                + '========================<br>'
+                + '　株式会社〇〇<br>'
+                + '　〒100-0001　東京都千代田区千代田1-1<br>'
+                + '========================'

+   sendDoc(email,text)
+ }, false)

###メールアドレスの入力を必須に
メールアドレスの欄が空だった時の処理を追加します。

script.js
~ ~ ~
btn.addEventListener('click', function() {
  const email = document.getElementById("email").value
+ if (email === '') {
+   const emailMsg = document.getElementById("email_msg");
+   emailMsg.classList.add('shown');
+   return;
+ }
  const corp_name = document.getElementById("corp_name").value
~ ~ ~

これでメールアドレスが空でボタンを押した時に以下のような表示が出ます。

###メールにPDFを添付
下記のようにAttachmentsの項目を追加し、PDFを置いてるURLを入れてあげると、そのPDFがメールで送られます。今回はダミーのPDFを使ってます。

script.js
const sendDoc = (email, text) => {
  Email.send({
    Host : "smtp.elasticemail.com",
    Username : "xxxxxx@gmail.com",
    Password : "xxxxxxxxxxxxxxxxx",
    To : email,
    From : "xxxxxx@gmail.com",
    Subject : "資料請求",
    Body : text,
+   Attachments : [
+   {
+     name : "資料.pdf",
+     path : "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+   }]
  }).then(
    message => alert(message)
  );
}
~ ~ ~

###デプロイとセキュリティ対策
ここまでで、ローカル環境で実装の動作確認を行える状態になりました。
最後にSmtpJSのページにもある通り、SecureTokenを発行してjs内のパスワードのベタ張を回避しましょう。
image.png

##コードの完成形

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>資料請求フォーム</title>
</head>
<body>
  <h1>資料請求フォーム</h1>
  <div class="form-group">
    <label for="corp_name">会社名</label>
    <input type="text" name="corp_name" id="corp_name" placeholder="例）株式会社〇〇">
  </div>
  <div class="form-group">
    <label for="full_name">氏名</label>
    <input type="text" name="name" id="name" placeholder="例）ドラゴン太郎">
  </div>
  <div class="form-group">
    <label for="email">メールアドレス<span class="badge">必須</span></label>
    <input type="text" name="email" id="email" placeholder="例）〇〇〇@email.com">
    <div class="alert-msg hidden" id="email_msg">メールアドレスを入力してください</div>
  </div>
  <div class="form-group-bottun">
    <button type="submit" class="button" id="send_Doc">
      このメールアドレスに資料を送信
    </button>
  </div>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
  <script src="./script.js"></script>
</body>
</html>
style.css
body {
  max-width: 375px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.form-group {
  margin: 12px;
}

.form-group label {
  display: block;
  padding: 8px;
}

.form-group input {
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 30px;
}

.alert-msg {
  font-size: 12px;
  width: 280px;
  max-width: 80vw;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
  line-height: 1.5;
  padding: 5px 10px;
  margin: 5px auto;
}

.hidden {
  display: none;
}

.shown {
  display: block;
}

.badge {
  display: inline-block;
  font-size: 10px;
  margin: 0 10px;
  padding: 0 8px;
  vertical-align: 2px;
  line-height: 14px;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
}

.form-group-bottun {
  padding: 15px 30px;
}
script.js
const sendDoc = (email, text) => {
  Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : email,
    From : "xxxxxx@gmail.com",
    Subject : "資料請求",
    Body : text,
    Attachments : [
    {
      name : "資料.pdf",
      path : "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
    }]
  }).then(
    message => alert(message)
  );
}

const btn = document.getElementById('send_Doc');

btn.addEventListener('click', function() {
  const email = document.getElementById("email").value
  if (email === '') {
    const emailMsg = document.getElementById("email_msg");
    emailMsg.classList.add('shown');
    return;
  }
  const corp_name = document.getElementById("corp_name").value
  const name = document.getElementById("name").value

  const text = corp_name + '　' +  name + '様<br>'
               + '資料請求ありがとうございます。<br><br><br>'
               + '========================<br>'
               + '　株式会社〇〇<br>'
               + '　〒100-0001　東京都千代田区千代田1-1<br>'
               + '========================'

  sendDoc(email,text)
}, false)

以上

##参考ページ
フロントJavaScriptからメール送信できるSmtpJS (v3)
SmtpJS.com

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?