메일폼 보낼때 사용
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<!--
1.이름
2.연락처
3.텍스트 내용
4.정규직, 프리랜서
그리고 전송
-->
<form id="myform" method="post">
<fieldset>
<legend>폼 양식</legend>
<label>폼 라벨</label>
<input type="text" name="reply_to" />
<label>메시지 보내는사람</label>
<input type="text" name="from_name" />
<label>이메일 메시지 타이틀</label>
<input type="text" name="to_name" />
<label>메시지 내용</label>
<input type="text" name="message_html" />
<br><br>
<input type="submit" value="Submit" class="btn">
<!-- <button>
Send
</button> -->
</fieldset>
</form>
<!-- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<script src="js/lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js"></script>
<script type="text/javascript">
(function(){
emailjs.init("개인키값입력");
})();
</script>
<script>
var root = $( window ); //추후 변경될 내용
var myForm = $( "#myform" );
myForm.on( "submit" , formSubmitClick );
function formSubmitClick( event )
{
event.preventDefault();
var service_id = "default_service";
var template_id = "template_bifmba63";
myForm.find(".btn").attr( "value", "Sending...");
emailjs.sendForm(service_id,template_id,myForm[0])
//성공
.then(function(){
console.log( myForm.find("button").text("Send") );
alert("이메일을 성공적으로 완료하였습니다.");
myForm.find(".btn").attr( "value", "Submit" );
},
//실패
function(err) {
alert("Send email failed!\r\n Response:\n " + JSON.stringify(err));
myForm.find(".btn").attr( "value", "Submit");
});
return false;
};
</script>'javascript > sample' 카테고리의 다른 글
| 룰렛 이벤트 (1) | 2019.02.25 |
|---|---|
| swiper 프로그래스바 슬라이드 (0) | 2019.01.07 |
| 초성으로 맞추는 단어 퍼즐 (0) | 2018.12.26 |
| 모바일 터치 드래그 슬라이드 (0) | 2018.11.13 |
| 제이쿼리 메뉴 (0) | 2018.11.13 |