이메일 문의 기능과 뉴스레터 활성화 - 유레카 프로젝트 개인 GIT BLOG 과제

이유빈 | 29 Nov 2022

Formspree를 이용하여 이메일 기능 활성화

블로그 테마를 적용하고, 내부 기능들을 한글화 하던 도중 테마 자체 메뉴에 이메일 문의 기능이 있는 페이지가 있다는 것을 확인하게 되었다.

그리하여, 이 기능을 활성화하기로 결정하였고, 관련된 기능을 활성화 하기 위한 툴을 찾아보고 있었다.

아무래도, 블로그 테마 자체에 이메일 문의 기능과 관련된 페이지가 존재했었기 때문에 관련 페이지 위치인 /_pages/contact.md를 살펴보았고, 그 결과 누가 봐도 의심스러운(!) 코드를 발견하였다.

<form action="https://formspree.io/{site.email}" method="POST">    
<p class="mb-4">질문이나 메시지가 있다면 이 페이지를 통해 남겨주세요. 가능한 빨리 회신하겠습니다!</p>
<div class="form-group row">
<div class="col-md-6">
<input class="form-control" type="text" name="name" placeholder="이름*" required>
</div>
<div class="col-md-6">
<input class="form-control" type="email" name="_replyto" placeholder="이메일 주소*" required>
</div>
</div>
<textarea rows="8" class="form-control mb-3" name="message" placeholder="메시지*" required></textarea>    
<input class="btn btn-dark" type="submit" value="보내기">
</form>

이메일 문의 페이지가 formspree와 연결되어 있었던 것이다. 그리하여 나는 formspree 홈페이지를 가입하였고 사이트 내에서 다음과 같은 코드를 추가하라는 창이 등장했다.

<form
  action="https://formspree.io/f/mjvzdgeo"
  method="POST"
>
  <label>
    Your email:
    <input type="email" name="email">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  <!-- your other form fields go here -->
  <button type="submit">Send</button>
</form>

나는 이 부분에서 action에 있는 주소에 주목하였고 그리하여 /_pages/contact.md에 yu.bin@kookmin.ac.kr로 설정돼 있던 부분을 다음과 같이 수정했다.

<form action="https://formspree.io/f/mjvzdgeo" method="POST">

그 이후 이메일 문의 페이지를 완성하였고 다음과 같이 작동하는 모습을 확인하였다.

Untitled

mailchimp를 활용하여 뉴스레터 기능 활성화

테마 사이트 하단에는 뉴스레터 기능이 들어가 있었다. 역시 한글화 하던 도중 /_layouts/defualt.html에 뉴스레터 기능이 mailchimp와 연동되고 있는 것을 확인하였고, 해당 기능을 적용하기로 결정하였다.


    <!-- Newsletter
    ================================================== -->
    <div class="newsletter text-center">
        <span class="h4"><img src="/assets/images/logo.png" class="newsletter-logo" alt="Yubin221"> &nbsp; <b>새로운 소식</b>을 놓치지 않고 싶다면? 뉴스레터를 구독해주세요!</span>
        <form action="{site.mailchimp-list}" method="post" name="mc-embedded-subscribe-form" class="wj-contact-form validate" target="_blank" novalidate>
            <div class="mc-field-group d-inline-flex">
            <input type="email" placeholder="이메일 주소" name="EMAIL" class="required email" id="mce-EMAIL" autocomplete="on" required>
            <input type="submit" value="구독" name="subscribe" class="heart">
            </div>
        </form>
    </div>
    
    
</div>

해당 기능은 _config.yml에 있는 mailchimp-list와 연결되어 있는 것을 확인하였고, mailchimp 회원가입후 얻은 연동코드에서 나의 mailchimp-list url을 구할 수 있었다.

참고로 관련 코드는 mailchimp사이트 Home → Audience → Signup forms → Embedded forms를 통해 아래 코드를 얻을 수 있다.

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:600px;}
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
    <form action="여기!" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <h2>Yubin221 Git Blog</h2>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
...

해당 부분에서 “여기!”부분에 있는 링크를 복사하여 _config.yml에 있는 mailchimp-list에 붙여넣기 하였고, 해당 기능을 통해 이메일 구독을 받을 수 있는 것을 확인하였다.

Untitled