문의하기 메일보내기 기능 - gmail사용

웹사이트 에서 문의하기를 통해 메일을 보내는 기능을 구현해보겠다.

 

먼저 구글 계정이 한개 필요하다.

 

참고자료

https://github.com/SaintSilver/html-form-send-email-via-google-script-without-server/blob/master/README.ko.md#3-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-to_address-%EB%A5%BC-%EC%84%A4%EC%A0%95%ED%95%A9%EB%8B%88%EB%8B%A4

 

 

1. Sample Spreadsheet를 복사

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

계정에 로그인 하고 해당 링크로 들어가서 "사본만들기" 클릭

 

 

그럼 아래와 같이 나온다.

 

 

2. 스크립트 편집기

도움말에서 script 검색 후 Apps Script실행

 

혹은 확장프로그램에서 바로 확인할 수 있다.

 

3. 스크립트에서 TO_ADDRESS 를 설정합니다.

TO_ADDRESS 란에 문의한 내용이 도착하게 될 메일 주소를 입력한다.

 

추가로 doPost로 변경해준다음 반드시 저장!

4. 스크립트의 새로운 버전 저장

다시 이전 페이지로 돌아와서 버전 이름을 지정 해준다.

 

 

5. 업데이트된 스크립트를 웹 앱으로 배포

script를 수정했던 페이지에서 새 배포 클릭

 

액세스 권한이 있는 사용자는 모든 사용사 옵션을 선택해야 정상적으로 form 응답이 스프레드시트로 추가된다.

배포된 웹 앱 URL을 복사해보자

 

이제 html form으로 넘어가보자.

form 태그의 id는 gform이 되어야 하고, action="웹앱URL"을 입력해주고 method="post" 이다.

전송받고자 하는 input 태그에는 name값을 부여해줘야 한다.

(name으로 지정한 이름이 스프레드시트 컬럼네임으로 등록된다.)

현재 작업중인 웹사이트 일부

 

테스트 해보자

 

문의사항 입력 후 문의하기 버튼 클릭

구글 스프레드시트 확인

구글 지메일 확인

 

성공!

 

 

※ 추가 팁 ※

메일의 제목은 script태그 내에 doPost 함수 안에 subject에서 지정해줄 수 있다.