week3_자기소개 페이지 기능 소개

Hi! I'm JENNIE·2022년 6월 5일

WeCode

pre>wecode

목록 보기

5/7

1주차 때 부랴부랴 만들고, 매주 조금씩 디벨럽 해나가고 있는 저의 자기소개 프로필 페이지...💗
오늘은 페이지 내 기능 중 한 가지를 소개해 보려고 합니다.

📍 자기소개 페이지
https://iammminzzy.github.io/Aboutme/aboutMe

오늘 소개할 기능은 바로 "Mailing" 기능입니다.

1. WHY?

오른쪽에 메일 주소도 적어 놓았고, mailto를 사용하여 아이콘을 클릭하면 바로 메일을 보낼 수 있게 해놓긴 했습니다. 하지만 이런 경우, 다른 메일 프로그램이나 어플리케이션이 실행되고 필요에 따라 로그인을 해야할 수도 있습니다. 그 과정은 방문자로 하여금 귀찮음을 유발할 수도 있겠죠.
이 페이지는 프로필 페이지이므로 저에게 연락하고자 하는 방문자는 주로 협업이나 인터뷰를 제안할 사람일 확률이 높습니다. 따라서 방문자가 '귀찮지 않게' 연락할 수 있도록 하고 싶어 이 기능을 추가했습니다.

2. WHAT?

저의 프로필 페이지는 아직 정적인 웹페이지에 가깝습니다. email 데이터를 전송하려면 서버가 필요하다고 생각했죠. 하지만 저는 아직 서버를 다를 줄 모르는 상태ㅠ_ㅠ!! 하지만 열심히 검색해 서버가 없거나, 원하지 않을 때 '정적'HTML페이지에서도 email을 보내는 법을 찾았답니다✨

📍 서버 없이 메일 보내는 법

'HTML form'과 'Google Apps Mail'을 이용

참고 : 정적 HTML form태그에서 메일보내기 : Google Apps Mail

3. HOW?

위의 참고 사이트에 너무 자세히 설명이 나와 있어서 그대로만 따라하면 되지만 중요 부분만 설명해 볼게요!

구글 스프레드 시트 만들기

1) 일단 메일 데이터를 받고 보관할 구글 스프레드 시트를 만들어 줍니다. ➪ HTML Form Responses Spreadsheet 사본 만들기

2) To_ADDRESS 부분에 주석을 제거하고 데이터 값을 '나의 이메일 주소'로 바꿔줍니다.
그리고 저장!

3) 업데이트 된 스크립트를 배포한 후, URL을 복사해둡니다.

구글 스프레드 시트는 메일 데이터를 받고 보관하는 역할을 하는데요. 자기소개 페이지에서 메일을 submit하면 제가 스프레드 시트에 설정해놓은 주소로 메일이 전송됩니다. 요약하면, 제가 저한테 보내는 방식! 따라서 답신을 위해 발신자에게 따로 발신자 이름, 메일주소 등의 정보를 받아야 해요.

HTML Form 만들기

1) html Code

발신자 이름과 메일 주소, 그리고 메일 내용을 입력할 수 있는 form을 만듭니다.

<h3>Email ME :)</h3>
<!-- 폼 태그 삽입. submit하면 sendingEmail함수 실행. -->
<form class="gform" onsubmit="sendingEmail()">
  <!-- 이름, 메일 주소, 메일 내용 입력 받기.
각 필드는 비워두면 submit 되지 않도록, required property 사용.  -->
  <fieldset class="contact_name pure-group">
    <label for="m_name">Name</label>
    <input type="text" id="m_name" name="name" required>
  </fieldset>
  <fieldset class="contact_add pure-group">
    <label for="m_add">Mail Address</label>
    <input type="text" id="m_add" name="email" required>
  </fieldset>
  <fieldset class="contact_cont pure-group">
    <label for="m_cont">CONTENTS</label>
    <!-- 메일 내용은 여러 줄의 긴 문장을 입력할 수 있도록 input 대신 textarea tag 사용. -->
    <textarea id="m_cont" rows="6" placeholder="Text here!" name="message" required></textarea>
  </fieldset>
  <input type="submit" class="contact_submit" value="SEND">
</form>
<!--pop up the confirm message-->

결과물 ⬇︎

Email ME :)

Name Mail Address CONTENTS

2) 'sendingEmail' 함수 Javascript Code

위에서 만든 form에 데이터를 입력 받은 후, '1)-3.'에서 복사해 둔 URL 주소로 해당 값을 전송하는 함수를 실행합니다.
이메일 주소의 형식을 조금 더 까다롭게 체크하는 코드와, 전송(submit) 후 성공적으로 전송되었다는 알람 팝업도 추가했어요.

// 입력받은 메일을 전송하는 함수. 
function sendingEmail(){
  // 이메일 주소의 형식 체크하기.
  let check = document.getElementById('m_add');
  // 이메일 주소가 '알파벳+숫자@알파벳+숫자.알파벳+숫자' 형식인지 체크.
  let exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
  if (exptext.test(check.value) == false) {
    // 이메일 주소가 해당 형식이 아닐경우, 아래의 알람을 팝업.		
    alert("입력한 메일형식이 올바르지 않습니다.");
    // 커서를 이메일 주소 입력칸으로 자동으로 이동하게 함.
    check.focus();
    // 함수 종료. 이후의 메일 전송 과정이 일어나지 않게 함.
    return false;
  }
  
  let form = document.querySelector('.gform');
  
  // 이메일 주소의 형식이 정상이면, 복사해 둔 스프레드시트의 URL로 form의 내용을 전송.
  form.action = 'https://script.google.com/macros/s/AKfycbxzWE3vc5ziBuT4lJVYwQdcBlJxo8iImjAV8RWn/exec';
  form.mothod = 'POST';

  // 메일이 submit 되면 아래의 알람을 팝업. (부드러운 전환을 위해 딜레이 1초 세팅)
  setTimeout(function (){
    alert('메일이 전송되었습니다.');
  }, 1000);
}

3) CSS Code

못생긴 자연 상태의(?) 폼을 css로 꾸며줍니다.

.pure-group {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    margin-bottom: 10px;
}
.pure-group label {
    display: inline-block;
    width: 100px;
    height: 40px;
    vertical-align: top;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'lato', sans-serif;
    text-indent: 10px;
    color: rgb(43, 43, 43);
}
.pure-group input {
    width: 300px;
    height: 40px;
    border: 0;
    outline: none;
    box-sizing: border-box;
    padding: 4px 10px;
    font-size: 17px;
    font-family: 'lato', sans-serif;
}
.contact_cont label {
    display: none;
}
.contact_cont textarea {
    width: 100%;
    border: 0;
    box-sizing: border-box;
    padding: 10px;
    outline: none;
    font-size: 17px;
    font-family: 'lato', sans-serif;
    resize: none;
}
.contact_submit {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    border: 0;
    color: rgb(43, 43, 43);
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    font-size: 15px;
    font-weight: bolder;
    font-family: 'lato', sans-serif;
    cursor: pointer;
}