HTML form 태그에서 구글로 메일 보내는 방법 : 구글 앱 스크립트

웹 프로그램을 시작한 지는 이제 3-4개월 정도 된다. 혼자서 독학하다가 막히는 부분은 구글링으로 찾아보곤 하는데, HTML Form 태그에서 문자 메시지 보내는 방법을 찾아보다 보니 문자서비스 제공 업체에 연결해야 하는 방법 밖에 없는 관계로 Form 태그에서 구글로 메일 보내는 방법을 알게 되어 포스팅하게 됐다.

 

설정 방법

1. 구글 스프레드시트 복사

https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy

Google Sheets: 로그인

구글 계정에 로그인된 상태에서 위 링크를 클릭 하면 화면에 사본 만들기 클릭

 

2. 스크립트 수정

생성한 사본을 열면 엑셀 화면과 같이 나타나는데, 상단 메뉴에 확장프로그램 -> Apps Script 클릭.

script.gs 파일이 열리고, 스크립트 내용을 수정하자.

첫 번째 스크립트 코드 상단에 var TO_ADDRESS = "dkgskgdgk@examples.com"; 와 같은 코드가 있다.

여기에 메일을 받고자 하는 e-mail 주소를 입력한다.

두 번째 스크립트 코드 중앙쯤에 보면, 아래와 같은 코드가 있다. 여기 subject 항목에 메일 제목을 입력해 주면 되겠다.

if (sendEmailTo) {

      MailApp.sendEmail({

        to: String(sendEmailTo),

        subject: "contact 어쩌고 하는 제목이름",

 

3. 스크립트 배포

script.gs 수정이 완료되면, 별도의 저장 버튼은 없으니 찾지 말고, 오른쪽 상단에 배포 버튼을 클릭하여 새 배포를 실행 한다.

 

4. 인증번호 홈페이지에 등록

새 배포를 실행하면, 새 배포에 설명 입력, 배포를 클릭 하면, 구글 계정 인증을 하고, 웹 앱의 URL 주소를 화면에 출력 해주면, 복사해 두자.

 

5. 웹 코드 페이지에  구글 스크립트 등록

 

아래 폼과 같은 html의 form 태그 action 속성에 조금전에 복사한 웹 앱 주소를 기록하고, html 하단에 scripts 태그를 추가 하자.

 

html form 태그에서 주요하게 봐야할 부분은 form class의 "gform" 값과, 각각의 input id=의 id 값이 구글 스프레드시트의 항목 값과 일치 해야 한다.

 

기본적으로 내가 사용하는 구글 스레드시트는 1행이 id 라고 보면 된다. A1 값이 Timestamp 이고, B1 값이 name C1 값이 message, D1 값이 phone 이다. 그외 필요한 경우. 수정하거나 추가해서 사용하면 된다.

 

<div class="row gx-4 gx-lg-5 justify-content-center mb-5">
                    <div class="col-lg-6">
                        <!-- Google html apps script -->
                        <form class="gform" id="gform" method="POST" action="https://script.google.com/macros/s/{API 값}"> 
                            <!-- Name input-->
                            <div class="form-floating mb-3">
                                <input class="form-control" id="name" name="name" type="text" placeholder="Enter your name..." data-sb-validations="required" required />
                                <label for="name">성명</label>
                                <div class="invalid-feedback" >고객님 성함을 입력해 주세요.</div>
                            </div>
                            <!-- Email address input-->
                            <!--
                            <div class="form-floating mb-3">
                                <input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
                                <label for="email">Email address</label>
                                <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                                <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                            </div>
                            -->
                            <!-- Phone number input-->
                            <div class="form-floating mb-3">
                                <input class="form-control" id="phone" name="phone" type="tel" placeholder="010-1234-5678" data-sb-validations="required" required />
                                <label for="phone">연락처</label>
                                <div class="invalid-feedback" >전화번호를 입력해주세요.</div>
                            </div>
                            <!-- Message input-->
                            <div class="form-floating mb-3">
                                <textarea class="form-control" id="message" name="message"  type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
                                <label for="message">상담내용</label>
                                <div class="invalid-feedback" >궁금하신 내용을 입력해주세요.</div>
                            </div>
                            <br />
                            <!-- Submit Buttion -->
                            <div class="d-grid"><button class="btn btn-primary btn-xl" id="submitButton" type="submit" onclick="checkCheckbox()"><span class="stag">신청</span></button></div>
                       </form>

위 코드블럭 내용을 보면, 앱 스크립트 배포하면서 확인한 URL 주소를 <form class="gform" id="gform" method="POST" action= 이후에 나오는 https 주소부분에 기입하자.

마지막으로 하단에 <script data-cfasync="false" type="text/javascript" src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script> 를 추가해 주자.

<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

작동 방식은 웹페이지에서 각각의 항목을 입력하고, 전송을 클릭하게 되면, 구글 스프레드시트에 입력한 값들과 전송시간에 기록이 되고, 지정한 e-mail 주소에 지정한 제목으로 메일을 전송한다. 내용에 name, message phone 내용이 전달 되게 된다.