Netlify functionを使ってフォームが送信されたときに送信したユーザーのメールアドレスに自動返信する。

自社サイトを構築するときに、いままではWordpressのプラグインを使っていたので
フォームを送信したときに自動的に送信した人のメールアドレスに返信するシステムを作っていた。
JAMstackだとサーバーも何もないのでそのような動的な動きを作るにはどうすればいいか悩んだ。

netlify function

これを使うことでAWS Lambdaと同様の動きをnetlify上で起こすことができる。
今回使用するのはsubmission-createdという名前を使うことでFORMが送信されたときをトリガーとして動作させることができる。
他にも様々なことをトリガーとしてどうさせることができるので用途に応じてチョイスするのが良いだろう。

使う内容としてはnodemailerを使う
https://nodemailer.com/about/

submission-created.js

require('dotenv').config();

const nodemailer = require('nodemailer');

exports.handler = function(event, context, callback) {
  const { name, email, message } = JSON.parse(event.body).payload.data

  console.log(user);

  let transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {
      type:"OAuth2",
      user:"GmailのID",
      clientId:"取得したClientID",
      clientSecret:"取得したコード",
      refreshToken:"（リフレッシュトークン）",
      accessToken: "（アクセストークン)"   
    },
  });


  console.log(event.body);

  let mailOptions = {
    from: `"表示する名前"<使用するgmailアドレス>`,
    to: `${email}`,
    subject: 'ありがとうございます。フォームを送信いたしました',
    html: `${name}様　メッセージを送信しました。`,
  };

  transporter.sendMail(mailOptions, function(error, info) {
    if (error) {
      callback(error);
    } else {
      callback(null, {
        statusCode: 200,
        body: 'Ok',
      });
    }
  });
};

送信例

Netlifyはサーバーレスの味方

フォームを作ることに関してはまた別に書こうとは思うが
かんたんな動的動作についてはサーバーレスでもなんとかなるのでコストダウンにつながるのではないかとは思われる。