Do it 웹사이트 따라 만들기 - 구글 API로 Contact Us 폼 처리하기

# 10-1. 구글 앱스 메일로 가상 서버 만들기

• 구글에서 제공하며, 우리가 만든 폼을 처리해주기 위한 API이다.
• HTML 파일 안에서 <a> 태그에 mailto 속성으로 메일을 보낼 수 있다.

1. 자신의 구글 계정으로 로그인한 후 docs.google.com/spreadsheets/u/1/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy                  를 복사해 브라우저 창에 붙여 넣고 이동한다.
2. 엑셀 시트 상단 메뉴에서 도구 -> 스크립트 편집기를 선택한다.(지금은 확장 프로그램 -> add script로 변경)
3. 스크립트 파일이 나오면 주석을 삭제하고 박스로 메일 자리에 본인 메일 주소를 입력한다.
4. 상단 메뉴의 파일 -> 버전 관리를 선택하여 텍스트 입력창에 사용할 스크립트의 제목을 설정한 후 새 버전 저장 버튼을 클릭한다.
5. 메일 주소와 버전을 확인한 후 확인 버튼을 클릭한다.
6. 게시 -> 웹 앱으로 배포를 선택후 업데이트 버튼을 클릭한다.(지금은 바로 배포 버튼을 누르기)
7. 인증이 필요하다는 팝업창이 나타나면 고급(advanced) 클릭 후 앱을 사용할 수 있도록 허용을 클릭한다.
8. 현재 스크립트가 업데이트되면 현재 웹 앱 URL이 나온다. 해당 링크를 복사한다.

 

1. html 파일의 <form> 태그의 action 속성값에 앞 과정에서 복사한 URL을 지정한다.
2. 이제 부라우저에서 화면을 열어 폼 입력 후 문의하기 버튼을 눌러 폼을 전송한다.
3. 내용이 전송되면 화면에 성공 여부를 알려주는 메시지가 나타난다.

성공~~

---

# 10-2. 문의 내용 접수 완료 팝업창 만들기

1. <div> 태그에 thankyou_message로 클래스를 지정 후 내용이 들어갈 <section> 태그를 작성한다.
2. <h1>과 <p> 태그를 사용해 문구를 작성한다.
3. 팝업창을 닫을 버튼을 <div> 태그로 만들고 이전의 .commbtn.gray 클래스를 사용하여 close 클래스를 추가한다.

css 적용 전

1. .thankyou_message 클래스 영역을 화면 전체로 팝업창의 영역을 지정한다. position과 top, left, 배경색을 지정한다. z-index:999로 지정하여 화면 최사단으로 올린다.
2. 팝업창 본문내용을 css로 지정한다. 
3. 팝업창의 border-radius를 5px로 지정하고, background 이미지도 지정한다.
4. 폼이 전송되기 전까지는 보이지 않도록 display 속성값을 none으로 지정한다.

.thankyou_message{position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.7); z-index:999; display:none;}
.thankyou_message > section > h1{color:#59c3c3; font-size:25px; font-weight:700; margin-bottom:20px;}
.thankyou_message > section{width:550px; margin:10% auto; padding:20px; border-radius:5px; background:url(../images/contact_pop.jpg) no-repeat #fff right bottom; background-size:240px; color:#3c4147;}

 

스크립트 추가하기

• click() : 닫기 버튼 클릭
• css() : .thankyou_message 클래스의 display 속성이 변경된다.

 

1. html 파일에서 </body> 태그 바로 위에 구글 앱스 메일에서 제공하는 자바스크립트 파일을 첨부한다.
   <script data-cfasync="false" type="text/javascript" src="./js/form-submission-handler.js"></script>
2. form-submission-handler.js 파일에서 찹업창으로 선택하여 처리하는 부분이 있다. html 파일 태그와 동일하게 클래스명을 변경한다.
3. js 파일로 버튼의 클래스를 지정하고 click 이벤트를 작성한다.
4. css 메서드를 사용하여 .thankyou_message 클래스를 display, none으로 지정한다.

$(document).ready(function(){
	//팝업 닫기
	$(".close").click(function(){
		$(".thankyou_message").css("display", "none");
	});
});

끝!!

---

# 스페셜

내 링크를 SNS에 노출하면 <meta> 태그의 내용을 확인할 수 있다.

<meta name="title"  property="og:title" content="이지스퍼블리싱">
<meta name="images" property="og:image" content="./images/link_thumb.jpg">
<meta name="description" property="og:description" content="이지스퍼블리싱">

배포를 해야해서 확인은 못하지만...위 내용과 이미지가 뜬다.

 

---

# 회고

 

끝이다!!!

간단하지만 실제 API도 연결해봤고, 다양한 기능을 알아서 재밌었다.

배포도 해볼까 하다가 동아리에서 제작한 수업 자료를 참고해서 그걸로 배포해볼 예정이다. 프엔은 배포가 빨라서 늘 신기했음.

일단 졸프부터 마무리하고~다시 프엔 연습하거나 딴거 공부할 예정이다.