티스토리 뷰
1. email.js 사이트 접속 후 로그인
Send email directly from your code | EmailJS
No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!
www.emailjs.com
2. Service ID (초기 셋팅 시 Add New Service 버튼 클릭해서 생성하기.)
2. USER_ID
3. Template ID
4. 템플릿 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서버없이 이메일 전송하기 (EMAIL.JS)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
<script type="text/javascript">
(function () {
emailjs.init("USER_ID");
})();
</script>
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body {
padding: 24px;
}
input, textarea, button {
margin: 4px 0;
padding: 8px;
}
</style>
<body>
<div>
<input type="text" placeholder="name" name="name" required /><br />
<input type="text" placeholder="Email ID" name="email" required /><br />
<textarea placeholder="Message" name="message"" required></textarea><br />
<button onclick="sendMail()">send</button>
</div>
</body>
<script>
function sendMail() {
var params = {
from_name: document.querySelector("input[name='name']").value,
email_id: document.querySelector("input[name='email']").value,
message: document.querySelector("textarea[name='message']").value
};
emailjs.send("SERVICE_ID", "TEMPLATE_ID", params).then(function (res) {
alert("이메일 발송이 완료되었습니다." + res.status);
})
}
</script>
</html>
참고 사이트:
'Javascript' 카테고리의 다른 글
| [JS] $(function() {}) vs (function() {})() (0) | 2024.12.03 |
|---|---|
| $(window).scrollTop() 이해하기 (0) | 2023.08.21 |
| [기초개념] 가변(mutable) / 불변(immutable) 데이터 : 참조관계 (0) | 2021.10.13 |
| async, await 에 대하여... (0) | 2021.04.05 |
| [기초개념] let, const, var 차이점 (0) | 2021.03.30 |
댓글
공지사항
최근에 올라온 글