23. October 27, 2020

EmailJS로 Contact me 연결하기

 

보통 자기 개인사이트에 컨택트 칸을 남겨놓는 경우가 많은데 자신의 개인정보를 무분별?하게 노출하지 않는대신 이렇게 상대방이 자신의 정보를 넘겨서 연락을 하면 그 때 자기 계정의 이메일로 들어오게 할 수 있다.

 

 

 

어떻게?

 

EmailJS로!

 

 

http://www.emailjs.com/

Send email from Javascript - no server code required | EmailJS

 

emailJS는 자바스크립트 API로 웹에서 바로 메일을 보낼 수 있도록 지원하는데 월 200건 까지는 무료이니 이정도면 나한테는 충분했다.

이 이상을 사용하거나, 첨부파일이 필요한 경우는 유료이니 참고.

 

 

 

1. 회원가입

 

 

2. 본인이 사용하는 메일 계정이 있는 서비스 클릭.. *네이버없음*

나는 gmail 선택함

 

 

3. name 과 service ID 적는칸 나오는데 각자 설정해주면 됨

 

 

4. Email Service를 다 만들었으면 이제 템플릿을 만들 차례!

*자기가 짜놓은 태그에 맞춰서 수정을 해줘야 함 or 이 코드대로 자기 html/javascript 코드를 수정해주든지*

 

예)html body 부분이 이렇게 되있을 경우

<div class="col-md-6">
  	<input type="text" id="name" name="name" placeholder="Full Name" class="form-control px-0 mb-4">
</div>
<div class="col-md-6">
	<input type="email" id="email" name="email" placeholder="Email Address" class="form-control px-0 mb-4">
</div>
<div class="col-12">
	<textarea name="message" id="message" class="form-control px-0 mb-4"
                placeholder="Type Message Here"></textarea>
</div>
<div class="col-lg-6 col-10 mx-auto">
	<button class="btn btn-primary w-100" name="submit" value="sendEmail">send</button>
</div>

이렇게 맞췄다. 내 이름은 어차피 필요없고. 상대방 이름, 메일주소, 내용만 나오면 되므로... 

 

 

5. 유저번호, 서비스 ID, template ID 가져오기 및 자바 스크립트 코드짜기

<script>
   // contact
     $(document).ready(function() {
		emailjs.init("자신의 유저번호");
        $('button[name=submit]').click(function(){

          var templateParams = {
                name: $('input[name=name]').val(),
                email : $('input[name=email]').val(),
                message : $('textarea[name=message]').val()
           				};


         emailjs.send('service ID', 'template ID', templateParams) //templateParams: 보낼내용이 담긴 객체
         	    .then(function(response) {
         	       console.log('SUCCESS!', response.status, response.text);
         	    }, function(error) {
         	       console.log('FAILED...', error);
         	    });

        });
	  });
  </script>

 

1) 유저번호는 -> Integration 에  하단에 제공된다.

 

2) 서비스아이디는 -> 3번에서 설정한 ID 

3) 템플릿아이디는 -> 아까만든 템플릿 들어가보면 아이디가 이렇게 적혀져 나와있음

 

 

 

확인해보면 잘 된다.