[이메일마케팅] 워드프레스에서 뉴스레터 가입폼 적용 두가지 방법

오늘은 이메일마케팅을 위한 뉴스레터 구독자를 모집 방법 중 웹 사이트 곳곳에 뉴스레터 가입폼을 설치, 구독자를 모집하는 방법에 대해 알아 보도록 하겠습니다.

도대체 뉴스레터 가입폼이 무엇일까요?

아래는 마케팅관련 블러그로 유명한 HubSpot 사이트인데요. 오른쪽 하단부 주홍색 네모와 같이 이메일과 슬랙 등 관련 정보를 입력하고 구독을 신청할 수 있는 일종의 웹 양식이라고 할 수 있습니다.

지난 번 이러한 이메일마케팅 서비스는 메일침프(MailChimp)를 이용하겠다고 밝혔기 때문에 이번 주제인 워드프레스에서 뉴스레터 가입폼을 설치도 메일침프(MailChimp)를 활용해서 진행하겠습니다.

Table of contents 목차 보이기

1. 뉴스레터 가입폼 적용하는 두가지 방법

워드프레스를 기반으로 한 블로그 사이트에 뉴스레터 가입폼 만들고 적용하는 방법은 2가지가 있습니다.

1.1. MailChimp for WordPress 플러그인 활용

뉴스레터 가입폼 적용을 하는 첫번째 방법이자 가장 널리 사용되는 방법이 워드프레스에서 전가의 보도처럼 써먹는 플러그인을 설치하는 방법이죠.

메일침프를 지원하는 플러그인은 많이 있지만 MailChimp for WordPress이 가장 널리 사용되는 것 같습니다. 2017년 8월 15일 현재 90만명이상이 설치했다고 나오네요.

1.2. 메일침프(MailChimp)코드를 테마에 붙이기

플러그말고도 뉴스레터 가입폼 적용 방법이 있습니다.
그것은 메일침프(MailChimp)에서 가입폼을 만들고 그 코드를 복사(copy) 한 후 워드프레스 테마 위젯 등에 직접 붙이는(paste) 방법입니다.

이는 별도 플러그인을 적용하지 않고도 뉴스레터 가입폼 적용 방법이므로 방법이 조금 더 번거로울 뿐 효율성은 더 좋을 수 있습니다.

이에서 소개한 MailChimp for WordPress 플러그인 활용하는 방안과 메일침프(MailChimp)코드를 테마에 직접 붙이는 방법 두가지 모두 소개해 보고자 합니다.

2. MailChimp for WordPress 플러그인 활용

그러면 여기서부터는 MailChimp for WordPress 플러그인을 적용해서 뉴스레터 가입폼 적용하는 방법을 알아 보도록 하겠습니다.

2.1. 플러그인 설치

MailChimp for WordPress 플러그인 설치법은 통상적인 플러그인 설치 방법과 같습니다. 당연하게도..

▽ 플러그인 추가하기 위헤 MailChimp for WordPress 검색

2.2. API Key 입력을 통한 연동

플러그인이 설치되고 활성화 한 후 세부 세팅에 들어가는데요. 그 중 가장 먼저 API Key 입력을 통한 연동을 시도합니다.

메일침프(MailChimp)의 모든 작업은 메일침프(MailChimp) 사의 서버에서 이루어집니다. 그렇기 때문에 구독자 List를 보거나 메일을 보내거나 모두 워드프레스강에서가 아니라 메일침프(MailChimp) 사이트에서 진행됩니다.

그런 상황이기에 워드프레스내에서 메일침프(MailChimp) 관련 내용을 확인하고 제어하기 위해서는 워드프레스와 메일침프(MailChimp)를 연결해주는 그 무엇이 필요하고 이를 해주는 것이 바로 API죠.

이 API key는 메일침프(MailChimp) 사이트의 Account – Extras – API Key에서 학인할 수 있습니다.

여기에서 API Key를 복사합니다.

▽ 메일침프 사이트에 로그인 한 후 API Key를 복사해 온다,

다음 워드프레스 플러그인에서 복사해온 API Key를 붙여넣습니다.
제대로 API Key가 작동한다면 상태(status)가 녹색의 Connected로 바뀝니다.
또한 현재 몇명이 가입되어 있는지를 아래부분 Your MailChimp Account에서 확인할 수 있습니다.

▽ 메일침프 사이트에 로그인 한 후 API Key를 복사해 온다,

2.3. 뉴스레터 가입폼 확정

다음으로 해야할 것은 Forms화면으로 들어가 뉴스레터 가입폼을 디자인하는 것입니다.

여기서 보여주는 필드등은 여기서 조절할 수 없고 MailChimp Account에 들어가서야만 변경할 수 있습니다.

아래는 제가 적용했던 간략한 코드이니 참고하세요.

<label>Name</label>
<input name="FNAME" required="" type="text">

<p>
    <label>Email address: </label>
    <input type="email" name="EMAIL" placeholder="Your email address" required />
</p>

<p>
    <input type="submit" value="뉴스레터 구독 신청" />
</p>

다음으로 구독 신청 단계에서 벌어지는 각종 메세지에 정리할 필요가 있습니다.
기본적으로 안내 메세지는 영어이므로 가능하면 친절한 한글로 변경이 도움이 될 것입니다.

기본적인 세부 세팅에 들어갑니다.
더불 옵트인을 할것인지? 구독 성공 후 어느 페이지로 이동할지 등등 소소한 것까지 정리를 하는 게 좋습니다.

다음에는 뉴스레터 가입폼의 디자인 스타일을 정하는 것입니다. 가장 먼저 제시되는 것이 테마 디자인 스타일에 맞추는 것이고 이게 싫다면 메일침프 플러그인에서 제공하는 스타일을 적용하는 것이죠.

아무래도 테마 디자인과 잘 어울리려면 적용테마의 스타일을 따르도록 했습니다.

여기까지 정리 및 세팅 후 변경사항을 저장합니다.

2.4. 위젯 반영

여기까지 MailChimp for WordPress 플러그인을 설치하고 여러가지 세팅을 완료했다면 80%이상 끝난 것입니다.

마지막 단계로 위젯등을 적용해 사이트 곳곳에서 뉴스레터 구독 신청을 받도록 합니다.

▽ Newspaper8 테마에서 위젯 세팅,
사이드바 위젯에 뉴스레터 가입폼 추가

2.5. 최종 결과

위처럼 위젯에 반영까지 끝나면 모든 작업은 끝났습니다.
브라우저에서 정상적으로 뉴스레터 구독 신청폼이 보이는 지 확인하면 됩니다.

▽ 사이드바에 노출된 뉴스레터 가입폼,
정상적으로 작동되고 있음

3. 플러그인없이 직접 코드 적용

이번에는 플러그인 없이 직접 코드를 적용하는 방법입니다.
MailChimp for WordPress 플러그인 활용하는 방법이 복잡하다보니 직접코드를 적용하는 이 방안이 더 간편해 보일 지경입니다.

3.1. 메일침프에서 뉴스레터 가입폼 만들기

먼저 해야하는 일은 뉴스레터 가입폼을 만드는 것입니다.

메일침프(Mailchimp) 사이트 Signup Forms로 이동하면 general Forms, Embedded forms, Subscriber pop-up, Form integrations의 4가지 형태를 선택할 수 있는 화면이 나옵니다.

Embedded forms 선택

사이드바 위젯이나 글의 맨 끝 등에 적용하는 뉴스레터 구독 신청폼을 만들어야하므로 두번째에 있는 Embedded forms을 선택합니다.

팝업 뉴스레터 가입폼 디자인 세팅

Embedded forms의 디자인중 가장 무난한 Classic을 선택합니다. 나머지는 특수 영역 디자인 중심이라…

Classic을 선택한 후 가입폼의 타이틀, 폼의 폭, 리캡차 적요 여부 등등을 선택합니다.

최종 가입폼의 코드를 복사

가입폼 디자인이 최종 완성되면 가입폼의 코드를 복사합니다. 그리고 워드프레스 테마로 이동해 코드를 필요한 영역에 붙여 넣습니다.

3.2. 워드프레스 테마에 코드 적용

위에서 복사해온 코드는 워드프레스 테마의 적적한 위치에 부터넣어 작동할 수 있도록 합니다.

만약 사이드 위젯에 적용한다면 하면 아래 그림처럼 위젯 관리화면에서 사용자정의 HTML에 복사해온 코드를 붙여 놓습니다.

다음엔 타이틀을 적습니다. 타이틀은 방문자들에게 구독을 권유하는 문장으로 만듭니다. 그리고 저장

3.3. 최종 결과

위처럼 위젯에 반영까지 끝나면 모든 작업은 끝났습니다.
브라우저에서 정상적으로 뉴스레터 구독 신청폼이 보이는 지 확인하면 됩니다.

▽ 사이드바에 노출된 뉴스레터 가입폼,
정상적으로 작동되고 있음

4. 마치며

이상으로 간단히 워드프레스에 메일침프를 활용해 뉴스레터 구독 신청폼을 적용하는 방법을 정리해 보았습니다.
잎서 이야기했듯이 플러그인은 보다 많은 기능을 가지고 있지만 API key로 연동되다보니 가끔 dicconnected되는 경우도 발생하기도 합니다. 조금 불안정하다는 뜻..

결국 플러그인을 적용하지 않고고 기본적인 기능 구현이 가능하면 굳이 플러그인을 적용할 필요가 없을 듯 합니다.