EmailJS는 서버 구축없이 자바스크립트만을 이용해 이메일 전송 폼을 만들고 이용할 수 있게 도와줍니다.
무료 이용자는 다음의 제한이 있습니다.
- 월 200건 요청 가능
- 사용가능한 이메일 템플릿 2개
- 최대 50Kb 요청
- contacts history 제한
하지만!? 포트폴리오 페이지 등에 사용되는 Contact Me 같은 페이지에 사용하기엔 차고 넘치는 기능이기에 매우 추천할만 한거 같습니다.
#1 사용 준비 과정
(1) 회원가입
우선 회원 가입은 필수입니다.
(2) 로그인을 하게되면 Email Services 페이지가 나오는데, + Add New Service 를 눌러 연결할 이메일 서비스를 선택합니다.
네이버 같은건 없으니 Gmail을 사용하는게 가장 편리할 것입니다.
(3) 이메일 계정과 연결(Connct Account)한 후 Create Service를 눌러 이메일 서비스 연동을 완료 합니다.
(4) 다음은 왼쪽 목록에서 Email Templates 탭으로 이동합니다.
(5) + Create New Templete 를 눌러 이메일을 어떠한 형식으로 받을 것인지 양식을 지정합니다.
이 부분은 나중에 얼마든지 수정이 가능하기때문에 지금은 크게 신경쓰지 않아도 됩니다.
오른쪽 위에 있는 To Email이 이메일을 받을 주소인데 현재는 이곳만 신경써주시면 됩니다.
내용을 가져오는 형식은 변수명처럼 중괄호 2개 안에 변수명{{message}}을 넣어주게 되면 해당 이름을 가진 name 속성값이 그 자리에 들어가는 형식입니다.
ex) input에 name="message"라고 지정해준 부분의 내용이 {{message}}에 들어온다고 보면 됩니다.
#2 사용 방법
다른 라이브러리나 API 를 사용하듯 Docs 페이지를 보면 친절하게 안내해주지만, 영어기에 이곳에서 쉽게 한번더 설명해 봅니다.
EmailJS Docs - Creating a contact form >
공식적으로 제공해주는 다음 양식을 그대로 가져다 쓰면 되는데...
직접 수정해줘야 할곳은 크게 3곳입니다.
Public_Key, 서비스_ID, 이메일템플릿_ID를 자신의 계정을 확인하며, 변경해주면 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
// Account 탭에서 PUBLIC_KEY 확인 가능.
emailjs.init('사용자의_PUBLIC_KEY');
})();
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
// contact_number 변수에 대해 5자리 숫자를 생성합니다.
this.contact_number.value = Math.random() * 100000 | 0;
// Email Services에서 서비스 ID 확인 가능.
// Email Templete에서 Email Templates ID 확인 가능.
emailjs.sendForm('서비스_ID_입력', '이메일_템플릿_ID', this)
.then(function() {
console.log('SUCCESS!');
}, function(error) {
console.log('FAILED...', error);
});
});
}
</script>
</head>
<body>
<form id="contact-form">
<input type="hidden" name="contact_number">
<label>Name</label>
<input type="text" name="user_name">
<label>Email</label>
<input type="email" name="user_email">
<label>Message</label>
<textarea name="message"></textarea>
<input type="submit" value="Send">
</form>
</body>
</html>
HTML은 당연하게도 꼭 위와 같이 사용할 필요는 없고 name 값에 맞춰 적당히 수정하여 사용하면 됩니다.
뭔가 감이 잘 안온다...싶으면 Email Templete 탭에서 조금전에 만들었던 양식을 눌러보면 오른쪽에 Play Ground와 Test It 버튼이 활성화가 되어 있을 겁니다. 이걸 이용해 확인하며 자신의 HTML을 조금씩 수정하시면 됩니다.
PlayGround Code Sample
<form id="form">
<div class="field">
<label for="user_name">user_name</label>
<input type="text" name="user_name" id="user_name">
</div>
<div class="field">
<label for="user_email">user_email</label>
<input type="text" name="user_email" id="user_email">
</div>
<div class="field">
<label for="from_title">from_title</label>
<input type="text" name="from_title" id="from_title">
</div>
<div class="field">
<label for="message">message</label>
<input type="text" name="message" id="message">
</div>
<div class="field">
<label for="from_name">from_name</label>
<input type="text" name="from_name" id="from_name">
</div>
<input type="submit" id="button" value="Send Email" >
</form>
대략 이런 페이지에 편리하게 사용할수 있음.