html 메일보내기 기능

포트폴리오를 만들다가 연락처를 적어야하는 상황이 왔다.
모든 정보를 다 까는건 불편해서 이메일만 공개를 하려고 했는데, 왜인지 form 태그로 정말 어떤 양식을 만들어서 올리는게 낫지 않을까 싶어 열심히 디자인해서 나에게 간단한 메시지를 보낼 수 있는 메일폼을 작성하였다.

<form>
<span class="sender">보내는 사람 <input type="email" placeholder="이메일 주소" required></span><br>
<span class="message">내용 <input type="textarea" required></span>
<button type="submit">전송</button>
</form>

대략 이런 간단한 디자인이었는데 문제는 서버 없이도 내 포트폴리오 사이트에 방문한 사람이 나에게 메일을 보낼 수 있어야 한다는 것이었다.

구글에 html 메일 등으로 검색해서 찾아봤는데 다행히 정적 html로 메일 보내기 등의 제목으로 html에서도 충분히 서버 없이 메일을 보낼 수 있는 코드들이 나와 있었다.

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

Google 스프레드시트 - 스프레드시트를 작성하고 수정할 수 있으며 무료입니다.

accounts.google.com
구글 스프레드시트를 이용해서 html 상에서 메일을 보낼 수 있게 하는 거였는데, 블로그들 참고하면서 따라해보면 쉽게 전송할 수 있다.

그런데 나는 좀 원하는 방향과 다르게 출력되는 디자인때문에 골머리를 썩었다.
작동은 잘 되는데 이상하게 내용과 보내는사람을 다 채웠음에도 불구하고 정작 내가 시험삼아 보내본 메일을 보면 다 빈칸으로 떴다.

php고 뭐고 잘 알지 못해서 구글을 수없이 뒤져봤지만 결국 해결책을 못찾던 찰나에
전송버튼을 누르고 나면 결과값으로


{"result":"success","data":"{}"}


이렇게 나온다는 걸 깨닫고 뭔가...데이터라고 하는 거가 내 쪽에서 제대로 입력이 안 되었음을 알 수 있었다.


<form>
<span class="sender">보내는 사람 <input type="email" placeholder="이메일 주소" name="email" id="email"required></span><br>
<span class="message">내용 <input type="textarea" name="message" id="message" required></span>
<button type="submit">전송</button>
</form>
그래서 무식하게 id도 넣고 네임도 넣고 다 넣어보니


{"result":"success","data":"{\"message\":[\"ㅇㄴㄹ\"],\"email\":[\"dsf@sdf\"]}"}


이렇게 데이터 값이 입력되는 것을 알 수 있었다!
((사실 아직도 이유를 잘 모름))

어찌됐든 메일은 잘 가지니까...... 꺄륵

중간에 구글스프레드시트 스크립트에서 설정할거 다 하고 저장하고 웹으로 배포할때 최신버전 선택하라고 했는데 내쪽에서는 알려주는거랑 같은 옵션이 안보여서 그냥 기본값으로 설정했는데도 아주 잘됐당.


++) 그냥 메일 주소를 적고 a태그로 감싼 경우에
<a href="mailto:메일주소"></a>
mailto를 쓰면 바로 기본 메일 앱이 열리면서 내 메일주소로 메일을 보낼 수 있는 환경이 만들어진다.
문제는 윈도우에서 이 a태그를 눌렀을 때 막 아웃룩 켜지고 난리도 아니라는 점...
불편하지만 나는 이 부분은 잘 모르기에.. 아는 체하고 큰 코 다치는 것보다 그냥 최선을 다 해서 구현을 했다는 것만으로 만족하려 한다..



#html메일 #구글스프레드시트html #정적html메일