위의 코드는 다음과 같이 작동합니다. ( 보기 좋게 띄어쓰기를 했으니, 코드를 적을때는 이러시면 안됩니다.)
예제3 : 제목 및 내용, 참조, 숨은참조와 함께 메일보내기
위의 예제를 실행시키면 다음과 같이 나타날 것 입니다. (Window10)
마무리
이번 기회에 HTML의 메일 보내는 방법에 대해 알 수 있어서 좋은 경험을 한 것 같습니다. 메일 보내는 방식을 JavaScript를 통해 해결할 것 이라고 생각했었는데 HTML을 이용한다는 점에서 정말 놀랐습니다.
내 홈페이지에 이메일 보내기 기능 넣기! | form태그에서 이메일 전송 기능 구현하기 | 서버없이! html과 javascript로만! | 내 html에 추가하기 | html 이메일 보내기 기능 | 웹페이지에 이메일 기능 넣..
728×90
반응형
안녕하세요!
이 글은 지난 글인 “내 홈페이지 만들기”의 확장 버전입니다~
제가 홈페이지 만들기 과제를 진행하면서 가장 정성을 쏟아서 구현한 기능이면서 이 홈페이지의 가장 뿌듯한 부분인데요~?
아래는 제가 만든 홈페이지 중 일부입니다.
템플릿 자체에서 구현되어있는 폼 형식인데 템플릿에서는 이 틀만 제공해줄 뿐 submit 기능은 직접 구현해야합니다!
이메일 보내기 화면
이 기능을 구현하고 싶어서 구글링을 했고 제가 참고한 사이트는 아래 남깁니다!
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 << 여기에요!
위의 블로그에서 시키는대로 제 구글 스프레드 시트에 사본을 만들어 생성했습니다!
이 방법을 사용하게 되면 send message 버튼을 통해 submit 하게되면 제가 스프레드 시트에 설정해놓은 이메일로 메일이 전송됩니다.
한마디로 요약하자면 제가 저한테 보내는거죠! 스프레드 시트를 저장한 제 구글계정이 메일의 발신자가 되는 것이고 수신자는 스프레드 시트 코드에 추가한 이메일 주소가 됩니다.
생각을 해보면 우리가 로그인을 해서 해당 사이트의 메일 서버를 공유..?하지 않는 이상 위의 input 란에 입력한 이메일 주소를 발신자로 해서 보내긴 어렵죠...ㅎ 본 방법이 최선인 것 같습니다!
아래는 홈페이지를 통해 전송한 메일의 모습입니다.
각각의 input창에 입력한 내용들이 key:value 형식으로 print 됩니다.
홈페이지를 통해 전송한 메일
메일 제목이 From my homepage 잖아요? 이건 제가 수정한 제목이고 원래 default 제목은 아래처럼 Contact form submitted 이었어요!
default 메일 제목
수정하고 싶어서 구글 스프레드 시트에 올려놓은 코드를 수정했습니다!
노랗게 형광펜 표시한 부분을 수정해주시면 돼요!
이메일 제목을 원하는 걸로 수정
처음에 구글 스프레드 시트만 form 태그의 action 속성에 넣으면 submit 했을 때 json형식으로 보낸 내용에 대한 화면이 출력됩니다! 제가 링크 걸어놓은 블로그의 10번에 적혀있듯이
태그 앞에 (body 태그를 닫기 전에) 아래의 javascript 코드를 추가하시면 됩니다! (저는 밑에까지 안읽어봤다가 삽질했어여,,^^)
깃허브에 올리신 javascript 기능만 사용할 거라면 저렇게 링크를 걸어도 되지만,
저 js 파일대로 하게되면 메일을 한번 submit하면 send 버튼이 비활성화가 되더라구요..!
다시 홈페이지를 reload하지 않으면 버튼 활성화가 안되길래 저는 저 js 파일의 코드를 다 뜯어봐서 수정했습니다!
그래서 수정하려면 저 코드를 깃허브에서 복사해서 내 로컬에 만들어야해요..ㅎㅎ
제가 수정한 부분은 회색 화살표로 표시된 저거 한줄이에요! 저 줄을 주석처리하면 됩니다..ㅋㅋㅋ
이렇게 간단한걸 저는 1-2시간… 걸려서… 찾았어여… 저 js 코드에 이런 기능을 해놨을 줄이야…ㅎ
화살표 부분 주석 처리!
보니까 맨 아래에 disableAllButtons라는 함수를 구현해놓으셨더라구요..
저 함수를 호출하면 버튼을 다 비활성화 한다능…ㅎ
그래서 간단하게 저 함수를 주석처리 했읍니다 ㅋㅋㅋ
그리구 또 하나 제가 노력한 부분은!!
3개의 input창 중 어느 하나 제대로 채워지지 않으면 메일이 전송 안되게 하는 것 입니다!
각각의 input 태그에 required 속성을 추가했습니다! 그러면 아래 보시는 것처럼 안채우고 send message 버튼을 클릭하게 되면 submit이 안되고 경고 메세지가 뜹니다!
email 부분에는 type에 email 속성을 넣어주면 됩니다!
require 속성을 통해 구현한 모습
그런데 type에 email 속성만으로는 “id@h” 이런식으로 @ 뒤에 어떤 문자만 와도 email 형식이 맞다고 인정해주기 때문에 저는 더 까다롭게 체크하고 싶었습니다! 이 부분은 자바스크립트를 통해 구현했습니다!
carami.tistory.com/40 << 이메일 타입 검사 코드는 이 블로그에서 가져왔습니다!
이메일 형식 엄격하게 체크하는 함수
혹시라도 코드가 필요하신 분들은 이걸 복사해서 사용하세요! 🙂
function check() { var email = document.getElementById("email").value; if (email != "") { var exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/; if (exptext.test(email) == false) { //이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우 alert("입력한 메일형식이 올바르지 않습니다."); document.formtag.email.focus(); return false; } } return true; }
사실 이 글을 올리기 전까지만 해도 저는 제 방식이 맞는 건줄 알았는데 아니더라구요,,,ㅠㅠ
그래서 깨달은 바를 전해드리려고 합니다..ㅋㅋ (블로그의 순기능)
깨달은 방법 + 제 실수를 고친 방법 !
이렇게 두가지가 있습니다!ㅋㅋ
일단 위의 사진에 있는 코드에서 주석 부분은 무시해주세요..! (제 실수 부분입니다 ㅋㅋㅋㅋ)
첫번째 방법은 form 태그의 submit 기능을 check 함수의 리턴 값으로 조절하는거에요!
onclick이 일어났을 때 check 함수의 리턴 값이 true이면 submit을 하고 false면 submit을 막는거죠!
button에 submit 조절하는 속성 추가
흐름을 말씀드리자면!
위의 check 함수 코드를 보시면 exptext를 통해 이메일 형식이 올바른지 확인 합니다!
참고로 email 값이 아무것도 안적혀있다면 어차피 type 체크 때 걸러지니까 굳이 여기서까지 체크해줄 필욘 없어요!
이메일 형식이 올바르지 않다면 email에 해당하는 input 창에 focus를 주고 false를 리턴합니다.
그렇게 되면 submit이 막히게 돼서 메일 전송이 안될거에요!
이렇게 구현하지 않으면 타입 검사를 통해 alert 창이 떠서 경고는 뜨지만 자동 submit이 돼버려서 메일이 전송된답니다..ㅠㅠ
두번째 방법은 action 태그 값을 경우에 따라 변경해줌으로써 메일 전송 action이 일어나는 것을 막는 방법 입니다!
function check() { document.getElementsById("form태그의 id").action = "여러분의 구글 스프레드 시트 url"; var email = document.getElementById("email").value; if (email != "") { var exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/; if (exptext.test(email) == false) { //이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우 alert("입력한 메일형식이 올바르지 않습니다."); document.formtag.email.focus(); document.getElementById("form태그의 id").action = " "; } } }
이렇게 구현하게 된다면 button에서 onclick=check() 이렇게만 해줘도 되겠죠?
이 방법은 이메일 형식이 틀리다면 해당 form 태그의 action 값을 없애버리는 겁니다! action 값이 사라진다면 메일을 보낼 수 없으니까요~!
휴,, 이 아이디어를 떠올리기까지.. 수많은 시간이 들었습니다ㅠㅠ 이거 해결하느라구 애먹었어요..
어려분들께 도움이 되었으면 좋겠네요 ㅠㅠㅠ 흡,,
제가 블로그에 올린 글 중에서 이번 글이 가장 정성을 쏟고, 가장 길게 적은 것 같네요 ㅋㅋㅋ
아무튼 여러분들께 유용한 글이 되기를 바라면서 이번 글 포스팅을 마칩니다~! 🙂
제휴 마케팅 "애드릭스" 하는 법! 아래 링크 클릭 후 가입 > 10,000 포인트 지급
http://appu.kr/?i=12301335
※이 포스팅은 애드릭스 수익이 발생할 수 있습니다.
728×90
반응형
다른 주소나 별칭으로 이메일 보내기
직장 또는 학교에서 Google 앱을 최대한 활용하고 싶으신가요? 무료 체험판에 가입 Google Workspace하세요.
다른 이메일 주소가 있는 경우 이러한 주소를 사용하여 메일을 보낼 수 있습니다. 예를 들면 다음과 같습니다. Yahoo, Outlook 또는 기타 Gmail 외 주소
다른 Gmail 주소 도움말: 최대 99개의 다른 이메일 주소에서 이메일을 보낼 수 있습니다.
1단계: 이메일 주소 추가
컴퓨터에서 Gmail을 엽니다. 오른쪽 상단에서 설정 모든 설정 보기를 클릭합니다. 계정 및 가져오기 또는 계정 탭을 클릭합니다. ‘다른 주소에서 메일 보내기’ 섹션에서 다른 이메일 주소 추가를 클릭합니다. 이름과 발신 주소로 사용하려는 주소를 입력합니다. 다음 단계 확인 메일 보내기 를 클릭합니다. 학교 또는 직장용 계정이면 SMTP 서버(예: smtp.gmail.com 또는 smtp.yourschool.edu)와 계정의 사용자 이름 및 비밀번호를 입력합니다. 계정 추가를 클릭합니다.
2단계: 주소 확인
추가한 계정에 로그인합니다. Gmail에서 받은 확인 메시지를 엽니다. 링크를 클릭합니다.
3단계: ‘보낸사람’ 주소 변경
메시지에서 ‘보낸사람’ 행을 클릭합니다.
(표시되지 않는 경우 수신자의 이메일 주소 옆에 있는 공백을 클릭합니다.) 발신 주소로 사용하려는 주소를 선택합니다.
확인 이메일을 찾을 수 없음 스팸이나 대량 메일 폴더에 [email protected]에서 받은 메시지가 있는지 확인합니다.
직장 또는 학교 계정을 추가하려면 관리자에게 도메인 별칭 및 이메일 별칭을 설정하도록 요청합니다.
수신자에게 내 Gmail 주소가 표시됨 수신자가 Outlook 또는 기타 메일 서비스를 사용 중인 경우 ‘보낸사람: 사용자 이름@gmail.com이 다른 이름@다른 도메인.com 대신 보냄’과 같이 표시될 수 있습니다. 다음 경우에도 수신자에게 원래 @gmail.com 주소가 표시될 수 있습니다. 부재중 응답 설정
자동 응답으로 필터 만들기
편지함이 가득 차고 수신자가 알림을 받음
이메일 주소 또는 별칭 삭제하기 별칭을 통해 이메일을 전송하고 싶지 않거나 별칭이 잘못된 경우, 이메일 또는 별칭을 삭제할 수 있습니다. 잘못된 별칭으로 이메일을 보내면 반송 이메일이 전송됩니다. 컴퓨터에서 Gmail을 엽니다. 오른쪽 상단에서 설정 모든 설정 보기를 클릭합니다. 계정 및 가져오기 탭 또는계정 탭을 클릭합니다. ‘다른 주소에서 메일 보내기’ 섹션에서 삭제할 이메일 주소 옆에 있는 삭제를 클릭합니다. 도움말: 유효한 이메일 주소에서 반송 이메일을 받고 다시 확인해야 하는 경우 ‘다른 주소에서 메일 보내기’에 등록된 이메일 주소를 삭제한 다음 다시 추가해야 합니다.
항상 다른 주소에서 전송
항상 다른 주소로 메일을 발송하려면 기본 ‘보낸사람’ 및 ‘답장’ 주소를 모두 변경해야 합니다. ‘보낸사람’ 주소만 변경하면 기본적으로 답장이 원래 Gmail 주소로 전송됩니다.
기본 ‘보낸사람’ 주소 변경 항상 다른 주소 또는 별칭에서 이메일을 보내려면 다음 단계를 따르세요. 컴퓨터에서 Gmail을 엽니다. 오른쪽 상단에서 설정 모든 설정 보기를 클릭합니다. 계정 및 가져오기 또는 계정 탭을 클릭합니다. 사용하려는 주소 오른쪽의 ‘다른 주소에서 메일 보내기’ 섹션에서 기본으로 설정을 클릭합니다.
기본 ‘답장’ 주소 변경 메일을 보내면 기본적으로 답장이 원래 Gmail 주소로 전송됩니다. 다른 주소를 선택하려면 다음 단계를 따르세요. 컴퓨터에서 Gmail을 엽니다. 오른쪽 상단에서 설정 모든 설정 보기를 클릭합니다. 계정 및 가져오기 또는 계정 탭을 클릭합니다. ‘다른 주소에서 메일 보내기’ 섹션에서 내 이메일 주소 옆의 정보 수정을 클릭합니다. ‘답장’ 주소를 다르게 지정을 클릭합니다. 답장 주소를 추가합니다. 필요한 경우 다음 단계 를 클릭합니다. 변경사항 저장을 클릭합니다.
‘서버에 연결할 수 없습니다’, ‘TLS 협상 실패’ 오류
다음 오류 메시지 중 하나가 표시되면 다른 포트 번호와 인증 유형을 선택해야 할 수도 있습니다. 정확한 발신 메일 서버를 제공업체로 사용했는지 확인하세요. 정확하게 설정하려면 타사 이메일 제공업체에 문의해야 할 수도 있습니다.
보안 연결 선택 다른 메일 서비스에 문의하여 권장 포트 번호, 인증 유형 또는 발신 메일 서버를 확인합니다. 타사 제공업체가 유효한 인증서가 있는 SSL 또는 TLS를 지원하는지 확인합니다. 몇 가지 일반적인 조합은 다음과 같습니다. SSL 포트 465
SSL 포트 465 TLS 포트 25 또는 587
다른 메일 서비스가 SSL 또는 TLS를 지원하지 않음 보안(암호화된) 연결을 통해 이메일을 보내는 것이 좋습니다. 하지만 다른 메일 서비스에서 이러한 보안 연결을 지원하지 않거나 유효한 인증서를 사용하지 않으면 포트 25를 선택한 다음 표시되는 보안되지 않은 연결을 선택하세요. 이렇게 하면 정보가 보호 목적으로 암호화되지 않습니다.
Gmail 별칭 사용
Gmail 별칭을 사용하여 필터링 이메일을 간편하게 분류하려면 사용자 이름 뒤에 카테고리를 추가합니다. 예를 들어 다음 별칭으로 보내는 메시지는 모두 [email protected]으로 전송됩니다. janedoe +school @gmail.com
@gmail.com janedoe +notes @gmail.com
@gmail.com [email protected] 1단계: 별칭 선택 이메일을 분류하고자 하는 방법을 고려하여 카테고리별로 별칭을 선택하세요. 예를 들면 다음과 같습니다. 직장 이메일로 사용자 이름 +work @gmail.com 사용
@gmail.com 사용 뉴스레터 구독용으로 사용자 이름 +news @gmail.com 사용
@gmail.com 사용 온라인 소매업체용 계정을 만들려면 사용자 이름[email protected] 사용 2단계: 메시지 필터링 다음과 같은 자동 작업을 위한 필터를 만드세요. 라벨 또는 별표 추가
다른 계정에 전달
보관처리 또는 삭제
Gmail을 사용하여 웹 메일에서 이메일을 보내는 방법
전자 메일은 의심 할 여지없이 매우 중요한 통신 수단이며 개인 사용자와 회사 모두에서 사용합니다. 가장 인기있는 옵션 중 하나가 Gmail이지만 우리가 원하는대로 사용할 수있는 많은 옵션이 있습니다. 이 기사에서는 전자 메일을 보낼 수 있도록 구성하는 방법에 대해 설명합니다. 이메일 우리 웹 사이트의 계정 .
웹 사이트에 필수적인 이메일
중요한 것처럼 의사 소통 수단 비즈니스 또는 개인 수준에서 모든 웹 페이지에도 중요합니다. 사용자가 의심, 질문, 의견을 보낼 수있는 방법입니다. 모든 웹 사이트에서 방문자가 액세스 할 수 있어야합니다.
가지고 이메일 계정이 연결됨 일반적으로 웹 호스트가이 서비스를 무료로 제공하기 때문에 당사 웹 사이트에 우리가 계약 한 자체 웹 도메인을 사용할 수 있습니다. 그러나 우리는 네트워크에있는 많은 다른 공급자를 사용할 수도 있습니다.
이제 해당 계정을 관리하기 위해 많은 옵션이 있습니다. Gmail을 의심 할 여지없이 오늘날 인터넷에서 가장 인기있는 서비스 중 하나이며 이러한 이유로 많은 사용자가 이메일이 다른 제공 업체에 등록되어 있음에도 불구하고이 서비스를 사용하기로 결정합니다. 웹 페이지의 경우처럼.
다행히 Gmail을 사용하면 원하는 계정을 구성하고 추가 할 수 있습니다. 개인 계정과 Google 제공 업체에서 액세스 할 수있는 웹 페이지를 갖고 싶은 사람들에게는 빠르고 매우 흥미로운 프로세스입니다.
Gmail의 다른 계정에서 이메일을 보내고받는 방법
우리는 가능성이 있습니다 Gmail 구성 다른 주소에서 이메일을주고받을 수 있습니다. 이러한 방식으로 당사 웹 사이트에 이메일 계정이 설정되어 있으면 Google 서비스에서 직접 사용할 수 있습니다.
이를 위해 우리가해야 할 일은 Gmail을 올바르게 구성하는 것입니다. 간단한 프로세스이며 설정하는 데 많은 시간이 걸리지 않습니다.
우선 우리가해야 할 일은 기록 데이터와 함께 Gmail로. Google 계정의 이메일과 비밀번호를 입력하고 안으로 들어가면 오른쪽 상단에 나타나는 설정으로 이동하여 모든 설정보기로 들어갑니다. 여기에 일련의 옵션이 표시되고 관심있는 옵션은 계정 및 가져 오기 탭입니다.
거기에 우리는 “다른 이름으로 보내기” . 여기에서 다른 이메일 주소 추가를 클릭해야합니다. 이름 (또는 해당 계정에 부여 할 이름)과 이메일을 입력해야하는 팝업 창이 자동으로 열립니다.
주기 전에 계정을 추가 해당 SMTP 서버와 포트를 넣을 수 있습니다. 또한 TLS를 통한 보안 연결 (권장, SSL을 통한 보안 연결 또는 보안 연결없이 보안 연결을 원하는지 여부를 선택할 수 있습니다. 계정의 비밀번호도 입력해야합니다.
다음 단계는 계정 확인 . 우리 웹 사이트의 이메일로 코드를 받게되며,이 코드를 Gmail의 창에 넣어 실제로 우리 계정인지 확인해야합니다.
그 순간부터 우리는 Gmail에서 웹 사이트의 이메일 계정을 사용할 수 있고 이메일을주고받을 수 있습니다. 기본적으로 첫 번째 계정으로 활성화되어 있지 않으며 기본 계정의 이메일에 계속 회신 할 것입니다. 언제든지 변경할 수 있습니다.
우리가 원할 때 새 주소에서 이메일 보내기 추가 한 다음 작성을 클릭하고 보낸 사람 필드에서 클릭하여 다른 주소로 변경합니다. 간단한 과정입니다.
간단히 말해서 이것은 Google에서 다른 이메일 계정을 구성하기 위해 수행해야하는 프로세스입니다. Google 메일 플랫폼에서 열도록 웹 사이트 이메일을 구성 할 수 있습니다. 우리가 언급 한 단계를 따르기 만하면 여기에서 한 계정 또는 다른 계정으로 쉽게 이메일을 보낼 수 있습니다.
웹용 Outlook에서 전자 메일 만들기 및 보내기
전자 메일 만들기 및 보내기는 모든 전자 메일 앱의 기초가 되며 웹용 Outlook을 사용 하면 어디서 든 모든 장치에 연결 된 상태를 유지할 수 있습니다. Gmail에서 Outlook으로 전환 하는 경우 Outlook의 중요 받은 편지함 또는 OneDrive를 사용 하 여 파일을 공유 하는 방법 등 몇 가지 차이점을 고려해 야 할 수 있습니다. 자세한 내용은 아래 내용을 참조 하세요.
html 메일보내기 기능
반응형
포트폴리오를 만들다가 연락처를 적어야하는 상황이 왔다.
모든 정보를 다 까는건 불편해서 이메일만 공개를 하려고 했는데, 왜인지 form 태그로 정말 어떤 양식을 만들어서 올리는게 낫지 않을까 싶어 열심히 디자인해서 나에게 간단한 메시지를 보낼 수 있는 메일폼을 작성하였다.
대략 이런 간단한 디자인이었는데 문제는 서버 없이도 내 포트폴리오 사이트에 방문한 사람이 나에게 메일을 보낼 수 있어야 한다는 것이었다.
구글에 html 메일 등으로 검색해서 찾아봤는데 다행히 정적 html로 메일 보내기 등의 제목으로 html에서도 충분히 서버 없이 메일을 보낼 수 있는 코드들이 나와 있었다.
중간에 구글스프레드시트 스크립트에서 설정할거 다 하고 저장하고 웹으로 배포할때 최신버전 선택하라고 했는데 내쪽에서는 알려주는거랑 같은 옵션이 안보여서 그냥 기본값으로 설정했는데도 아주 잘됐당.
++) 그냥 메일 주소를 적고 a태그로 감싼 경우에
mailto를 쓰면 바로 기본 메일 앱이 열리면서 내 메일주소로 메일을 보낼 수 있는 환경이 만들어진다.
문제는 윈도우에서 이 a태그를 눌렀을 때 막 아웃룩 켜지고 난리도 아니라는 점…
불편하지만 나는 이 부분은 잘 모르기에.. 아는 체하고 큰 코 다치는 것보다 그냥 최선을 다 해서 구현을 했다는 것만으로 만족하려 한다..
#html메일 #구글스프레드시트html #정적html메일
반응형
정적 HTML form태그에서 메일보내기 : Google Apps Mail
html에서 mailto를 사용하면, 구현은 물론 간단합니다만 outlook과 같은 쓸데없는 프로그램을 실행해 사용자에게 불편을 초래합니다.
아래와 같이 서버 없는 순수 HTML과 자바스크립트로 메일보내기를 구현할 수 있습니다.
사용자는 계정에 로그인하고 메일을 보내는 귀찮음 대신 웹페이지의 양식대로만 입력해 쉽고 빠르게 메일을 보낼 수 있습니다.
아래 문서는 https://github.com/dwyl/html-form-send-email-via-google-script-without-server 를 번역한 것입니다.
이곳에서도 보실 수 있습니다. 오역 및 오타는 댓글로 남겨주세요.
Google Apps Mail을 사용해 정적 HTML Form에서 메일을 보내세요!
백엔드 서버 없이 HTML Form을 사용하여, “Contact Us” 메시지를 보내는 스텝-바이-스텝 예제 입니다.
PHP, Python, Ruby, Java, Node.js 등은 필요없습니다.
작동 예제는 이곳에서 : https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/
경고: Google의 API는 하루에 보낼 수 있는 메일 수에 제한이 있습니다. Google 계정에 따라 다를 수 있습니다, 이곳에서 본인의 한도를 확인하세요. 데이터가 항상 스프레드시트에 추가되고 메일로 전송되므로 가능하면 Part 3을 통해 이 튜토리얼을 고대로 구현하는 것을 추천합니다.
우리는 서버가 없거나 원하지 않을 때 “정적” HTML 페이지에서 email을 보내는 방법이 필요했습니다.
핵심 이점들
배포/유지/지불을 위한 백엔드 서버가 필요없습니다.
완전한 사용자 정의 가능 : 모든 측면에서 커스터마이징이 가능합니다!
모든 측면에서 커스터마이징이 가능합니다! 어디에서나 허용 목록에 포함된 Google Mail 을 통해 보내는 Email (높은 전송 성공률)
을 통해 보내는 Email (높은 전송 성공률) 어떤 데이터든 쉽게 볼 수 있는 스프레드시트 에 수집/저장 합니다. (코딩을 전혀 모르는 사람과 공유해야하는 경우도 완벽합니다.)
쉽지만 유지보수가 필요한 서버를 이용해 이메일을 보내는 대신, 사용자를 대신하여 Google로 메일을 보내고 Google 스프레드시트를 사용해 데이터를 추적하세요!
당신은 데이터 전송 위치를 신경 쓰지 않고 귀하의 받은편지함 (지저분한… 웩!)에서 제출된 데이터를 관리하려는 경우 http://formspree.io/와 같은 “무료” 서비스를 사용할 수도 있습니다. 또는 … 몇 분을 투자하여 데이터를 비공개로 관리 할 수 있습니다. 선택은 여러분 몫입니다.
1. Sample Spreadsheet를 복사하세요.
당신의 Google 계정에 로그인하고 “사본 만들기”를 클릭합니다.
아래와 같이 나와야 됩니다:
참고 : 복사본 이름을 원하는대로 변경해도 결과에 영향을 미치지 않습니다.
2. 스크립트 편집기를 여세요.
“도구” > “스크립트 편집기…”를 눌러 편집기를 여세요.
필요한 스크립트의 스냅샷은 다음과 같습니다 : google-script-just-email.js
3. 스크립트에서 TO_ADDRESS 를 설정합니다.
경고: 만약 당신이 주석처리를 제거하지 않고 To_ADDRESS 값으로 당신의 이메일을 설정하지 않으면, 웹 skill을 가진 사람이 당신의 form과 Email을 보내는 데이터를 수정하여 임의의 이메일로 보낼 수 있습니다.
이 위험은 그리 높지 않을 수 있습니다. 이 위험을 감수하면서 당신의 HTML Form 내에서 메일 변수를 data-email 속성으로 설정하는 편의성을 원한다면 이 주석처리된 변수를 내버려둘 수 있습니다. 이렇게 하면 2-6단계를 거치지 않고도 HTML form에서 이메일을 보낼 주소를 쉽게 변경할 수 있습니다. 이 기능을 사용하려면 제공된 .js 파일을 Part2, 10단계에서 사용해야 합니다.
만약 이 잠재적인 위험을 원하지 않으면, TO_ADDRESS 의 주석을 제거하세요. 그리고 form태그에서 submit할 때 데이터를 받을 이메일을 변수의 값으로 넣으세요.
4. 스크립트의 새로운 버전 저장
“버전 관리 …” 를 클릭해세요.
그리고 새로운 버전을 만듭니다. 이름은 원하는대로 지정하세요.
5. 업데이트된 스크립트를 웹 앱으로 배포
배포 할 최신 프로젝트 버전을 선택합니다.
⚠️ 참고: ‘웹에 액세스할 수 있는 사용자’ 드롭다운에서 누구나, 익명 사용자 포함 옵션을 선택해야 합니다. 다른걸 선택하면 form 응답이 스프레드시트에 추가되지 않을 것입니다. ⚠️
6. 이메일을 보내기 위해 스크립트를 인증합니다.
웹 앱 URL을 클립보드 혹은 메모장에 복사하시고 “확인”버튼을 누르세요.
7. 기본 HTML Form 만들기
이 레포지토리의 index.html 템플릿을 사용하여, 기본 form 형식을 가진 html 파일을 만드세요.
