벌써 마지막 글입니다 정독하느라 고생하셨어요!
템플릿도 만들고, 메일 서버도 연결했으니 이제 전송하는 방법만 알아보면 되겠네요!
지난번 html 파일을 열어보면 위의 이미지처럼 나옵니다.
자 이제 emailJS의 템플릿에 들어가서 보면 여기서의 to_name, from_name, message_html
이렇게 세개가 필요하네요.
html 코드에 있는 input의 name을 받아오기 때문에 동일하게 해줍니다.
<form id="contact-form">
<!-- 아래 input은 보낼 시 꼭 필요함 -->
<input type="hidden" name="contact_number">
<label>Name</label>
<input type="text" name="to_name">
<label>From Name</label>
<input type="text" name="from_name">
<label>Message</label>
<textarea name="contact"></textarea>
<input type="submit" value="Send">
</form>이렇게 저는 코드를 수정했습니다.
이렇게 셋팅을 마치고 전송버튼을 누르면
템플릿에 적어놨던 To email로 메일이 전송되었을거예요!
다시한번 더 코드를 봅시다.
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<script type="text/javascript" src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
<script type="text/javascript">
(function(){
// emailJS 유저 ID
emailjs.init("<YOUR USER ID>");
})();
</script>
<script type="text/javascript">
window.onload = function() {
// form id, #contact-form 안에 있는 것들 전송
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
this.contact_number.value = Math.random() * 100000 | 0;
// 서비스 id, 이메일 템플릿
emailjs.sendForm('contact_service', 'contact_template', this);
});
}
</script>
</head>
<body>
<form id="contact-form">
<!-- 아래 input은 보낼 시 꼭 필요함 -->
<input type="hidden" name="contact_number">
<label>Name</label>
<input type="text" name="to_name">
<label>From Name</label>
<input type="text" name="from_name">
<label>Message</label>
<textarea name="contact"></textarea>
<input type="submit" value="Send">
</form>
</body>
</html>
만약에 전송이 안되었다면,
document.getElementById('contact-form')의 아이디와
<form id="contact-form">의 아이디가 일치하는지 확인해주세요.
그럼 이상 emailJS로 메일 보내기였습니다 :)
'BLOG > JavaScript' 카테고리의 다른 글
| IE9 이하에서 placeholder 보이게하기 2가지 라이브러리 (0) | 2019.06.26 |
|---|---|
| input 비밀번호 보기/숨기기 (눈모양) (0) | 2019.06.24 |
| email input 영어/숫자만 이메일에 유효한 특수문자 입력받게 하기 (0) | 2019.06.24 |
| emailJS로 서버없이 메일전송 만들기2 (2) | 2019.06.19 |
| emailJS로 서버없이 메일전송 만들기1 (0) | 2019.06.19 |
