Twilio SendGridとNode.jsを使用してメール問い合わせフォームを構築

const sg = require("@sendgrid/mail");

exports.handler = async function(context, event, callback) {
}

exports.handler = async function(context, event, callback) {
  sg.setApiKey(context.SENDGRID_API_KEY);
  const msg = {
    to: context.TO_EMAIL_ADDRESS,
    from: { email: context.FROM_EMAIL_ADDRESS, name: "Your contact form" },
    subject: "New email",
    text: "This is a brand new email.",
  };
}

exports.handler = async function(context, event, callback) {
  sg.setApiKey(context.SENDGRID_API_KEY);
  const msg = {
    to: context.TO_EMAIL_ADDRESS,
    from: { email: context.FROM_EMAIL_ADDRESS, name: "Your contact form" },
    subject: "New email",
    text: "This is a brand new email.",
  };
  try {
    await sg.send(msg);
    return callback(null, "Email sent!");
  } catch (error) {
    console.error(error);
    return callback(error);
  }
}

  const msg = {
    to: context.TO_EMAIL_ADDRESS,
    from: { email: context.FROM_EMAIL_ADDRESS, name: "Your contact form" },
    replyTo: event.from,
    subject: `[contactform] ${event.subject}`,
    text: `New email from ${event.from}.\n\n${event.content}`,
  };

  const response = new Twilio.Response();
  response.appendHeader("Content-Type", "application/json");
  try {
    await sg.send(msg);

exports.handler = async function(context, event, callback) {
  sg.setApiKey(context.SENDGRID_API_KEY);
  const msg = {
    to: context.TO_EMAIL_ADDRESS,
    from: { email: context.FROM_EMAIL_ADDRESS, name: "Your contact form" },
    replyTo: event.from,
    subject: `[contactform] ${event.subject}`,
    text: `New email from ${event.from}.\n\n${event.content}`,
  };
  try {
    await sg.send(msg);
    response.setStatusCode(200);
    response.setBody({ success: true });
    return callback(null, response);
  } catch (error) {
    console.error(error);
    let { message } = error;
    if (error.response) {
      console.error(error.response.body);
      message = error.response.body.errors[0];  
    }

    response.setStatusCode(400);
    response.setBody({ success: false, error: message }); 
    return callback(null, errorResponse(response, message));
  }
}

const form = document.getElementById("contact-form");
const fromInput = document.getElementById("from");
const subjectInput = document.getElementById("subject");
const contentInput = document.getElementById("content");
const sendButton = document.getElementById("submit-button");
const status = document.getElementById("status");

function setStatus(message, klass) {
  status.textContent = message;
  status.classList.add(klass);
  status.removeAttribute("hidden");
}
function hideStatus() {
  status.setAttribute("hidden", "hidden");
  status.className = "status";
  status.textContent = "";
}

// Listen for the submit event of the form and handle it [フォーム上のsubmitイベントを監視&処理]
form.addEventListener("submit", async (event) => {
  // Stop the form from actually submitting [フォームの送信処理を停止]
  event.preventDefault();
  // Disable the submit button to avoid double submissions [Sendボタンをグレーアウトし、submitイベントの重複発生を防止]
  sendButton.setAttribute("disabled", "disabled");
  // Hide any status message as we are now dealing with a new submission [以前のステータスメッセージをクリアし、新規submitイベントの処理開始に備える]
  hideStatus();
  try {
    // Submit the data to our function, using the action and method from the form element itself. [フォームのscript要素から情報要素をメール送信用のコードに渡す]
    const response = await fetch(form.getAttribute("action"), {
      method: form.getAttribute("method"),
      // Collect the data from the form inputs and serialize the data as JSON [フォーム入力から情報要素を取り出し、JSON形式にシリアライズする]
      body: JSON.stringify({
        from: fromInput.value,
        subject: subjectInput.value,
        content: contentInput.value,
      }),
      // Set the content type of our request to application/json so the function knows how to parse the data [コンテンツタイプをapplication/jsonにセット]
      headers: {
        "Content-Type": "application/json",
      },
    });
    if (response.ok) {
      // If the response was a success, clear the form inputs and set a success message in the status [レスポンスが成功であれば、フォーム内容をクリアし、ステータスとして成功を表示]
      fromInput.value = "";
      subjectInput.value = "";
      contentInput.value = "";
      setStatus("Message sent successfully. Thank you!", "success");
      // After 5 seconds, hide the success message. [ステータス表示部の成功の記載を5秒後に消去]
      setTimeout(hideStatus, 5000);
    } else {
      // If the request returns an error response, read the error message from the response and set it as a failure message in the status [レスポンスが失敗であれば、エラー情報を読み出し、ステータスとしてエラー情報を表示]
      const data = await response.json();
      console.log(data);
      setStatus(data.error, "error");
    }
    // The request is over, so enable the submit button again [リクエスト処理が一旦終了なので、Sendボタンのグレーアウトを解除]
    sendButton.removeAttribute("disabled");
  } catch (error) {
    // If the request failed, set a generic error message in the status [リクエスト処理が失敗に終わったので、ステータスとして失敗の旨を表示]
    setStatus(
      "There was an error and the message could not be sent. Sorry.",
      "error"
    );
    console.log(error);
    // The request is over, so enable the submit button again [リクエスト処理が一旦終了なので、Sendボタンのグレーアウトを解除]
    sendButton.removeAttribute("disabled");
  }
});
);