이메일 받은 편지함으로 연락처 양식 메시지 보내기

귀하의 웹사이트에 일반 이메일을 배치하는 것은 좋지 않은 관행이므로(인터넷을 샅샅이 뒤지는 모든 스팸봇에게 찬사를 보냅니다) 문의 양식은 사용자로부터 귀중한 메시지를 받을 때 가장 좋은 방법입니다. 스팸 이메일 및 기타 불쾌한 경험을 피하는 데 도움이 될 뿐만 아니라 메시지 전송을 단순화하고 그렇게 하는 데 사용할 수 있는 모든 가능한 양식 필드가 풍부하기 때문에 사용자가 보낼 수 있는 메시지 종류를 맞춤화할 수 있는 기능을 제공합니다.

이 게시물에서는 Mailjet을 사용하여 이메일 받은 편지함 내 웹사이트에서 연락처 양식 메시지를 받는 방법을 보여드리겠습니다. 나는 그러한 설정이 서버 없는 설정에서 더 바람직할 것이라고 가정하고 이것이 이 게시물이 적응할 형식이 될 것입니다.

계속하기 전에 Mailjet 계정 생성부터 시작하여 확인하십시오.

환경 설정

코드로 손을 더럽히기 전에 Mailjet을 시작하고 보낸 사람 주소를 추가하고 Mailjet의 NodeJs 래퍼 내에서 사용할 키를 설정하여 이메일을 보낼 준비를 합니다.

Mailjet 발신자 주소 추가

Mailjet 계정으로 이동하여 오른쪽 탐색 드롭다운에서 계정 설정을 엽니다.


'발신자 및 도메인' 카드에서 '발신자 도메인 또는 주소 추가'를 클릭합니다.


이미 소유하고 있는 이메일 계정을 추가하여 발신자 이메일 추가를 진행하고 메시지가 표시되는 지침을 확인하고 설정을 완료합니다. Mailjet은 존재하지 않는 이메일 주소에서 이메일을 보낼 수 없도록 설정했습니다.

Maijet API 키 받기

Mailjet 계정으로 이동하여 오른쪽 탐색 드롭다운에서 계정 설정을 엽니다.


'REST API' 카드에서 '마스터 API 키 및 하위 API 키 관리'를 클릭합니다.

SECRET KEY와 API KEY라는 두 개의 키를 제공하는 '마스터 API 키'를 생성합니다.

양식 메시지를 이메일로 보내기

메시지를 보내려면 Javascript 부분에서 작업할 데이터를 제공하는 필수 연락처 양식을 만들어야 합니다. 창의력을 발휘하고 설정하세요.

자바스크립트

우리는 사용자 입력 삭제를 처리하고 있으므로 이는 좋은 보안 관행이므로 익숙한 사용자 입력 삭제 방법을 설정할 수 있습니다. 좋은 시작은 DOMPurify 일 수 있습니다.

로컬 시스템의 .env 파일을 사용하여 공개 리포지토리에서 종료되는 비밀 API 키와 같은 사고를 피하는 것이 좋습니다.

전용 방법을 사용하여 서버리스 기능 내에서 환경 변수에 액세스할 수 있는 Netlify와 같은 process.env 전역 변수에서 키를 가장 많이 제공하고 노출하는 각 프로덕션 환경에서 API 키를 설정합니다.

로컬 및 프로덕션 환경 모두에서 환경 키에 액세스하려면 dotenv NodeJs 모듈을 설치하고 사용하십시오.

$ npm install dotenv

javascsript 환경에서 Mailjet으로 이메일을 보낼 수 있는 방법 중 하나는 공식 npm 모듈node-mailjet을 사용하여 설치하는 것입니다.

$ npm install node-mailjet

연락처 양식이 다음과 같이 이메일로 보낼 senderName, senderEmail 및 senderMessage와 함께 작동하도록 세 가지 변수를 제공하는 세 개의 입력 필드로 구성되어 있다고 가정합니다.

require('dotenv').config();
const mailjet = require('node-mailjet').connect(process.env.MAILJET_API_KEY, process.env.MAILJET_API_SECRET)

try {
  mailjet
    .post("send", {'version': 'v3.1'})
    .request({
      "Messages":[
        {
          "From": {
            "Email": `${senderEmail}`,
            "Name": `Some Website (mywebsite.com)`
          },
          "To": [
            {
              "Email": "[email protected]",
              "Name": "My Name"
            }
          ],
          "Subject": "Contact Form Message From mywebsite.com.",
          "TextPart": `Name: ${senderName} \n Email: ${senderEmail} \n \n `,
          "HTMLPart": `Customer Name: ${senderName}<br> Customer 
Email: ${senderEmail}<br> <p>${sendermessage}</p>`
        }
      ]
    })
} catch(e) {
  // Deal With Error
  console.log(e)
}

연락처 양식을 처리하는 또 다른 좋은 방법은 보낸 사람에게 방금 보낸 메시지의 상태를 알리는 것입니다. 간단하고 독창적인 알림을 통해 메시지가 수신되었으며 오류가 있는 경우 메시지를 다시 보내거나 다시 보낼 수 있음을 알립니다. 양식을 단조롭고 생명이 없는 상태로 두지 마십시오.

이것이 이 튜토리얼의 전부입니다. 계속해서 연락처 양식을 망가뜨리십시오.