2Bbear's knowledge workshop

5. HTML로 이메일 보내는 기능 추가하기

중단한 프로젝트/WebGameProject(중단)2019. 1. 2. 11:46

이번에는 이메일을 보내는 기능을 추가해봅시다.


전달 받는 사람은 바로 사이트 게시자인 나일테고 보내는 사람은 불특정 다수가 될테니


보여지면 안되는 것

- 내 이메일


보여져야 하는 것

- 보내는 사람의 이메일

- 내용

- 보내는 날짜


============================================================

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how

서버없이 구글 api 이메일을 보내는 샘플

============================================================


기본적으로 server가 있어야하며 스팸방지 기능도 넣어야하고....구글 api에서 키도 받아와야하고...그런데 더 쉬운 방법이 있는거 같고....


백엔드 서버 없이 그냥 이메일을 보내는 것이 있다는 것 같은데. 나는 백엔드 서버를 이용해서 이메일을 보내고 싶은데.


그렇게 보내지 않아도 일단 기능적으로 실행 할 수 있는 정적 HTML email 보내는 방법이 있습니다.

참고 : 

https://kutar37.tistory.com/entry/%EC%A0%95%EC%A0%81-HTML-form%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-%EB%A9%94%EC%9D%BC%EB%B3%B4%EB%82%B4%EA%B8%B0-Google-Apps-Mail


1. html 코드

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="contact form example">

  <title>Contact Form Example</title>

</head>


<body>

  <h2 class="content-head is-center">Contact Us!</h2>

  <aside>

       <p>

           We would <em>love</em> to hear from you! </p>

           <p>Please use the <b><em>Contact Form</em></b>

           to send us a message.

       </p>

   </aside>


<!-- START HERE -->

   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

   <!-- Style The Contact Form How Ever You Prefer -->

   <link rel="stylesheet" href="style.css">


  <form class="gform pure-form pure-form-stacked" method="POST" data-email="example@email.net"

  action="여기에 스프레드 시트를 통해 얻은 주소를 넣어주세요">

    <!-- change the form action to your script url -->


    <div class="form-elements">

      <fieldset class="pure-group">

        <label for="name">Name: </label>

        <input id="name" name="name" placeholder="What your Mom calls you" />

      </fieldset>


      <fieldset class="pure-group">

        <label for="message">Message: </label>

        <textarea id="message" name="message" rows="10"

        placeholder="Tell us what's on your mind..."></textarea>

      </fieldset>


      <fieldset class="pure-group">

        <label for="email"><em>Your</em> Email Address:</label>

        <input id="email" name="email" type="email" value=""

        required placeholder="your.name@email.com"/>

        <span class="email-invalid" style="display:none">

          Must be a valid email address</span>

      </fieldset>


      <fieldset class="pure-group">

        <label for="color">Favourite Color: </label>

        <input id="color" name="color" placeholder="green" />

      </fieldset>


      <button class="button-success pure-button button-xlarge">

        <i class="fa fa-paper-plane"></i>&nbsp;Send</button>

    </div>


    <!-- Customise the Thankyou Message People See when they submit the form: -->

    <div class="thankyou_message" style="display:none;">

      <h2><em>Thanks</em> for contacting us!

        We will get back to you soon!</h2>

    </div>


  </form>


  <!-- Submit the Form to Google Using "AJAX" -->

  <script data-cfasync="false" type="text/javascript"

  src="form-submission-handler.js"></script>

<!-- END -->


</body>

</html>

 


위 참고 주소를 통해 따라하면 이메일을 받아 볼 수 있다. 



2. 이제 내 프로젝트에 넣어보자.


<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="EUC-KR">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>Jungho's Game - Brain Paralyzer</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>


    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            slidesOrientation : 'vertical',

            arrowsNavAutoHide : true,

            navigateByClick : false,

            imageAlignCenter: true,

            transitionSpeed : 3000,

            autoPlay: {

                enabled: false,

                pauseOnHover : true,

                delay : 5000

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

            #backgorun-page{

           

            width:100%;

            height: 100%;

            background: #141e39;}

            

            #content-slider,

            #content-slider,

#content-slider .rsOverflow,

#content-slider .rsSlide,

#content-slider .rsVideoFrameHolder,

#content-slider .rsThumbs { background: #141e39;}


#slide-3{}

.button-sendmail{ font-size:400px;}

#slide-4-out{

  text-align: center;

  }

  #slide-4-in{

    width: 70%;

  height: 70%;

  margin: 40px auto;

  background: red;

  }


   

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="backgorun-page">

    <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height: 950px; width: 100%;" >

      

      <div>

      <img class="rsIgm" src="img\GameIntro.jpg" alt="" style="width:100%">

      

      </div>

      <div>

<img class="rsIgm" src="img\CreatorIntro.jpg" alt="" style="width:100%">

</div>

      <div id="slide-3" >slide3

     

      </div>

     

    </div>

    <div>

      <h2 class="content-head is-center">Contact Us!</h2>

  <aside>

       <p>

           We would <em>love</em> to hear from you! </p>

           <p>Please use the <b><em>Contact Form</em></b>

           to send us a message.

       </p>

   </aside>

<!-- START HERE -->

   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

   <!-- Style The Contact Form How Ever You Prefer -->

   <link rel="stylesheet" href="learn-to-send-email-via-google-script-html-no-server-master\style.css">

  <form class="gform pure-form pure-form-stacked" method="POST" data-email="example@email.net"

  action="으잌 이건 안보여줄꺼지롱">

    <!-- change the form action to your script url -->

    <div class="form-elements">

      <fieldset class="pure-group">

        <label for="name">Name: </label>

        <input id="name" name="name" placeholder="What your Mom calls you" />

      </fieldset>

      <fieldset class="pure-group">

        <label for="message">Message: </label>

        <textarea id="message" name="message" rows="10"

        placeholder="Tell us what's on your mind..."></textarea>

      </fieldset>

      <fieldset class="pure-group">

        <label for="email"><em>Your</em> Email Address:</label>

        <input id="email" name="email" type="email" value=""

        required placeholder="your.name@email.com"/>

        <span class="email-invalid" style="display:none">

          Must be a valid email address</span>

      </fieldset>

      <fieldset class="pure-group">

        <label for="color">Favourite Color: </label>

        <input id="color" name="color" placeholder="green" />

      </fieldset>

      <button class="button-success pure-button button-xlarge">

        <i class="fa fa-paper-plane"></i>&nbsp;Send</button>

    </div>

    <!-- Customise the Thankyou Message People See when they submit the form: -->

    <div class="thankyou_message" style="display:none;">

      <h2><em>Thanks</em> for contacting us!

        We will get back to you soon!</h2>

    </div>

  </form>

  <!-- Submit the Form to Google Using "AJAX" -->

  <script data-cfasync="false" type="text/javascript"

  src="form-submission-handler.js"></script>

<!-- END -->

     </div>

    </div>

    

  </body>

</html> 


억지로 집어 넣었는데 안 이뻐..




'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글

7. web에 올라갈 간단한 게임을 만들자.-Coin편  (1) 2019.01.06
6. 디자인 수정..다시 홈페이지 만들기.  (0) 2019.01.05
4. royalslider 슬라이드에 이미지 집어넣기  (0) 2019.01.02
3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기  (0) 2019.01.02
2. 웹페이지 디자인/기획  (0) 2019.01.01

티스토리툴바