문의하기

html/index.html

@@ -11,7 +11,7 @@
  <!-- <meta property="og:image" content=""> -->
  <meta property="og:type" content="website">
 <!-- 파비콘 -->
-<link rel="shortcut icon" href="images/favicon.png"> 
+<link rel="shortcut icon" href="images/favicon.png">
  <!-- css -->
 <link rel="stylesheet" href="css/reset.css">
 <link rel="stylesheet" href="css/fullpage.css">
@@ -32,25 +32,27 @@
 <script src="js/swiper.js"></script>
 <script src="js/swiper.min.js"></script>
 <script src="js/swiper-bundle.js"></script>
+<!-- 이메일 전송 라이브러리 -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
 
 <title>PAL Networks</title>
 
 
 </head>
-<script type="text/javascript">   
+<script type="text/javascript">
 
     $(document).ready(function() {
-    
+
       $("#header").load("include/header.html");
       $("#footer").load("include/footer.html");
-      
+
     });
   </script>
 <style>
 body,html{
     overflow-y: hidden !important;
     position: relative;
-}  
+}
 @media screen and(max-width:1024px) {
   body,html{overflow:auto!important;height:100%;}
 }
@@ -71,7 +73,7 @@ body,html{
       <div class="inner">
         <h2 class="wow fadeInUp" data-wow-duration="2s">가치를 존중하며 신뢰를 바탕으로 실천하는 기업</h2>
         <span class="wow fadeInUp big" data-wow-duration="3s">PAL Networks</span>
-        <span class="wow fadeInUp sm" data-wow-duration="4s">항공·전문 IT산업분야의 소프트웨어 개발 전문 기업</span>   
+        <span class="wow fadeInUp sm" data-wow-duration="4s">항공·전문 IT산업분야의 소프트웨어 개발 전문 기업</span>
       </div>
       <div class="wow fadeIn scroll-animation" data-wow-duration="4s">
         <a href="#works" class="scroll-box">
@@ -119,7 +121,7 @@ body,html{
           팔네트웍스는 현재의 항공 플랫폼을 제공하고<br/>
           미래의 항공플랫폼인 UAM/PAV를 준비합니다.
         </h4>
-        <ul class="wow fadeInUp"> 
+        <ul class="wow fadeInUp">
           <li class="box">
             <a href="#none">
               <div class="list-box">
@@ -139,7 +141,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -160,7 +162,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -181,7 +183,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -203,7 +205,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -224,7 +226,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -245,7 +247,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
         </ul>
       </div>
@@ -469,17 +471,17 @@ body,html{
   </div>
 </div>
 <div id="mo-main">
-  <div class="swiper-container"> 
+  <div class="swiper-container">
-    <div class="swiper-wrapper"> 
+    <div class="swiper-wrapper">
       <div class="swiper-slide slide-box">
         <div class="section main-bn bg01">
           <div class="inner">
             <h2 class="wow fadeInUp" data-wow-duration="2s">가치를 존중하며 신뢰를 바탕으로 실천하는 기업</h2>
             <span class="wow fadeInUp big" data-wow-duration="3s">PAL Networks</span>
-            <span class="wow fadeInUp sm" data-wow-duration="4s">항공·전문 IT산업분야의 소프트웨어 개발 전문 기업</span>   
+            <span class="wow fadeInUp sm" data-wow-duration="4s">항공·전문 IT산업분야의 소프트웨어 개발 전문 기업</span>
           </div>
         </div>
-      </div> 
+      </div>
       <div class="swiper-slide slide-box">
         <div class="section main-bn bg02">
           <div class="inner">
@@ -490,7 +492,7 @@ body,html{
             </p>
           </div>
         </div>
-      </div> 
+      </div>
       <div class="swiper-slide slide-box">
         <div class="section main-bn bg03">
           <div class="inner">
@@ -502,13 +504,13 @@ body,html{
           </div>
         </div>
       </div>
-    </div> 
+    </div>
       <!-- <div class="swiper-pagination"></div> -->
-    
+
       <!-- If we need navigation buttons -->
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
-  
+
     </div><!--//슬라이드 끝-->
 
     <div class="section main-bn bg04">
@@ -517,7 +519,7 @@ body,html{
           팔네트웍스는 현재의 항공 플랫폼을 제공하고<br/>
           미래의 항공플랫폼인 UAM/PAV를 준비합니다.
         </h4>
-        <ul class="wow fadeInUp"> 
+        <ul class="wow fadeInUp">
           <li class="box">
             <a href="#none">
               <div class="list-box">
@@ -537,7 +539,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -558,7 +560,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -579,7 +581,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -601,7 +603,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -622,7 +624,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
           <li class="box">
             <a href="#none">
@@ -643,7 +645,7 @@ body,html{
                   </span>
                 </div>
               </div>
-            </a>            
+            </a>
           </li>
         </ul>
       </div>
@@ -659,6 +661,94 @@ body,html{
 
 <footer id="footer" class=""></footer>
 <!--//footer-->
+<script>
+  // onload
+  (function () {
+    var id = '8qhK01665Wbh5q4Oz';
+    // 이메일 라이브러리 초기화
+    emailjs.init(id);
+    // 문의하기 버튼 클릭 이벤트
+    $('#btnSubmit').click(function (e) {
+      e.preventDefault();
+      var data = getFormData();
+      if (!validation(data)) return;
+      sendEmail(data);
+    });
+
+    // 취소하기 버튼 클릭 이벤트
+    $('#btnCancel').click(function (e) {
+      e.preventDefault();
+      if (!confirm('입력하신내용을 삭제하시겠습니까?')) return;
+      $('#formMsg')[0].reset();
+    });
+
+    function sendEmail(params) {
+      emailjs.send('palnet_service', 'palnet_template', params, id)
+        .then(function (res) {
+          console.log(res)
+          alert('정상적으로 문의가 되었습니다.\n입력하신 이메일로 회신드립니다.');
+          $('#formMsg')[0].reset();
+        }, function (err) {
+          console.log(err)
+          alert('알수없는 오류로 실패되었습니다.');
+        });
+    }
+  })();
+
+  // form 데이터 가져오기(Object 형태)
+  function getFormData() {
+    // form data
+    var arr = $('#formMsg').serializeArray();
+    var r = {};
+    arr.forEach(function (obj, i) {
+      r[obj.name] = obj.value;
+    });
+    // add checkbox value
+    $('#formMsg input[type=checkbox]').map(function () {
+      r[this.name] = this.checked;
+    })
+    return r;
+  };
+
+  // 검증
+  function validation(data) {
+    if (!data) data = {};
+    // 약관 동의
+    if (data.agreePrivacy != true) {
+      alert('동의해주세요.')
+      return false;
+    }
+    // 필수값 검증
+    // 이름
+    if (!data.wrName) {
+      alert('이름을 입력해주세요.')
+      $('input[name=wrName]').focus();
+      return false;
+    }
+    // 이메일
+    console.log(data.wrEmail)
+    if (!data.wrEmail) {
+      alert('이메일을 입력해주세요.')
+      $('input[name=wrEmail]').focus();
+      return false;
+    }
+    // 내용
+    if (!data.wrTitle) {
+      alert('제목을 입력해주세요.')
+      $('textarea[name=wrTitle]').focus();
+      return false;
+    }
+    // 내용
+    if (!data.wrContent) {
+      alert('내용을 입력해주세요.')
+      $('textarea[name=wrContent]').focus();
+      return false;
+    }
+
+
+    return true;
+  };
+</script>
 </body>
 
 </html>

html/message.html

@@ -306,6 +306,7 @@
         .then(function (res) {
           console.log(res)
           alert('정상적으로 문의가 되었습니다.\n입력하신 이메일로 회신드립니다.');
+          $('#formMsg')[0].reset();
         }, function (err) {
           console.log(err)
           alert('알수없는 오류로 실패되었습니다.');