自分のブログにも載せました！
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内のパスワードのベタ張を回避しましょう。

##コードの完成形

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