안녕하세요!
이 글은 지난 글인 "내 홈페이지 만들기"의 확장 버전입니다~
제가 홈페이지 만들기 과제를 진행하면서 가장 정성을 쏟아서 구현한 기능이면서 이 홈페이지의 가장 뿌듯한 부분인데요~?
아래는 제가 만든 홈페이지 중 일부입니다.
템플릿 자체에서 구현되어있는 폼 형식인데 템플릿에서는 이 틀만 제공해줄 뿐 submit 기능은 직접 구현해야합니다!
이 기능을 구현하고 싶어서 구글링을 했고 제가 참고한 사이트는 아래 남깁니다!
정적 HTML form태그에서 메일보내기 : Google Apps Mail
html에서 mailto를 사용하면, 구현은 물론 간단합니다만 outlook과 같은 쓸데없는 프로그램을 실행해 사용자에게 불편을 초래합니다. 아래와 같이 서버 없는 순수 HTML과 자바스크립트로 메일보내기
kutar37.tistory.com
위의 블로그에서 시키는대로 제 구글 스프레드 시트에 사본을 만들어 생성했습니다!
이 방법을 사용하게 되면 send message 버튼을 통해 submit 하게되면 제가 스프레드 시트에 설정해놓은 이메일로 메일이 전송됩니다.
한마디로 요약하자면 제가 저한테 보내는거죠! 스프레드 시트를 저장한 제 구글계정이 메일의 발신자가 되는 것이고 수신자는 스프레드 시트 코드에 추가한 이메일 주소가 됩니다.
생각을 해보면 우리가 로그인을 해서 해당 사이트의 메일 서버를 공유..?하지 않는 이상 위의 input 란에 입력한 이메일 주소를 발신자로 해서 보내긴 어렵죠...ㅎ 본 방법이 최선인 것 같습니다!
아래는 홈페이지를 통해 전송한 메일의 모습입니다.
각각의 input창에 입력한 내용들이 key:value 형식으로 print 됩니다.
메일 제목이 From my homepage 잖아요? 이건 제가 수정한 제목이고 원래 default 제목은 아래처럼 Contact form submitted 이었어요!
수정하고 싶어서 구글 스프레드 시트에 올려놓은 코드를 수정했습니다!
노랗게 형광펜 표시한 부분을 수정해주시면 돼요!
처음에 구글 스프레드 시트만 form 태그의 action 속성에 넣으면 submit 했을 때 json형식으로 보낸 내용에 대한 화면이 출력됩니다! 제가 링크 걸어놓은 블로그의 10번에 적혀있듯이 </body> 태그 앞에 (body 태그를 닫기 전에) 아래의 javascript 코드를 추가하시면 됩니다! (저는 밑에까지 안읽어봤다가 삽질했어여,,^^)
<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>
깃허브에 올리신 javascript 기능만 사용할 거라면 저렇게 링크를 걸어도 되지만,
저 js 파일대로 하게되면 메일을 한번 submit하면 send 버튼이 비활성화가 되더라구요..!
다시 홈페이지를 reload하지 않으면 버튼 활성화가 안되길래 저는 저 js 파일의 코드를 다 뜯어봐서 수정했습니다!
그래서 수정하려면 저 코드를 깃허브에서 복사해서 내 로컬에 만들어야해요..ㅎㅎ
제가 수정한 부분은 회색 화살표로 표시된 저거 한줄이에요! 저 줄을 주석처리하면 됩니다..ㅋㅋㅋ
이렇게 간단한걸 저는 1-2시간... 걸려서... 찾았어여... 저 js 코드에 이런 기능을 해놨을 줄이야...ㅎ
보니까 맨 아래에 disableAllButtons라는 함수를 구현해놓으셨더라구요..
저 함수를 호출하면 버튼을 다 비활성화 한다능...ㅎ
그래서 간단하게 저 함수를 주석처리 했읍니다 ㅋㅋㅋ
그리구 또 하나 제가 노력한 부분은!!
3개의 input창 중 어느 하나 제대로 채워지지 않으면 메일이 전송 안되게 하는 것 입니다!
각각의 input 태그에 required 속성을 추가했습니다! 그러면 아래 보시는 것처럼 안채우고 send message 버튼을 클릭하게 되면 submit이 안되고 경고 메세지가 뜹니다!
email 부분에는 type에 email 속성을 넣어주면 됩니다!
그런데 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을 막는거죠!
흐름을 말씀드리자면!
위의 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 값이 사라진다면 메일을 보낼 수 없으니까요~!
휴,, 이 아이디어를 떠올리기까지.. 수많은 시간이 들었습니다ㅠㅠ 이거 해결하느라구 애먹었어요..
어려분들께 도움이 되었으면 좋겠네요 ㅠㅠㅠ 흡,,
제가 블로그에 올린 글 중에서 이번 글이 가장 정성을 쏟고, 가장 길게 적은 것 같네요 ㅋㅋㅋ
아무튼 여러분들께 유용한 글이 되기를 바라면서 이번 글 포스팅을 마칩니다~! :)
'Study > 서버 Server' 카테고리의 다른 글
| 아마존 AWS EC2에서 Mysql 소스설치 / 삽질 / Mysql 소스설치 / 개발자 마인드 / 컴공생의 마인드 / 인스턴스 상태 확인 (0) | 2020.10.28 |
|---|---|
| 내 홈페이지 만들기 - 개발자 포트폴리오 (0) | 2020.10.10 |
| HTML, CSS, JavaScript - 웹페이지 만들기 (0) | 2020.09.27 |
| 서버(Server)란? - 클라이언트와 서버, 백엔드언어, DBMS의 관계 (0) | 2020.09.20 |
최근댓글