Home » » EmailOctopus 뉴스레터 런칭 마스터하기 – 제2부: 구독 폼 만들기 및 블로그에 삽입하기

EmailOctopus 뉴스레터 런칭 마스터하기 – 제2부: 구독 폼 만들기 및 블로그에 삽입하기

By 

🚀 EmailOctopus 뉴스레터 런칭 마스터하기 – 제2부: 구독 폼 만들기 및 블로그에 삽입하기

이 파트의 목표:
구독자가 이름과 이메일을 남기고 뉴스레터를 구독할 수 있도록 구독 폼을 만들고, 이를 블로그나 웹사이트에 삽입하는 방법을 배웁니다.

제2부: 구독 폼 만들기 및 블로그에 삽입하기

✅ 1. 구독 폼(Subscription Form)이란?

**구독 폼(Subscription Form)**은 방문자가 자신의 이메일 주소와 이름 등을 입력해 뉴스레터를 신청할 수 있도록 하는 폼입니다.
이 폼은 블로그, 웹사이트, 랜딩페이지 등에 삽입되어 구독자를 모집하는 데 필수적인 역할을 합니다.

📥 구독 폼의 역할

  • 이메일 리스트에 구독자 추가

    • 사용자가 정보를 입력하고 제출하면 해당 리스트에 자동으로 등록됩니다.

  • 이용자 동의 확보

    • GDPR 등 개인정보 보호법에 따라 명시적 동의를 받기 위해 사용됩니다.

  • 뉴스레터 기대감 조성

    • “매주 유익한 콘텐츠를 받아보세요” 등 유입을 유도하는 문구와 함께 폼을 배치하면 효과적입니다.

🧩 EmailOctopus에서의 구독 폼 특징

  • 기본 제공되는 폼 디자인으로 빠르게 시작 가능

  • 원하는 입력 항목(예: 이름, 이메일 등) 자유롭게 추가/삭제 가능

  • GDPR 체크박스, 커스터마이징 기능 지원

  • HTML 코드로 내 웹사이트 어디에든 삽입 가능

💡 팁: 폼은 어떻게 보여야 할까?

  • 간결하고 단순한 디자인: 입력 필드는 1~2개가 이상적

  • 가입 유도 문구 포함: “무료로 받아보세요”, “최신 글을 이메일로 드릴게요” 등

  • 개인정보 보호 안내: “언제든지 구독을 취소할 수 있습니다” 문구 추가

✅ 2. 폼 생성하기

이제 실제로 EmailOctopus에서 구독 폼을 생성해 보겠습니다. 이 폼은 앞서 만든 **리스트(List)**와 연결되며, 사용자가 작성한 정보가 해당 리스트에 저장됩니다.

🛠️ 구독 폼 생성 절차

  1. EmailOctopus 대시보드 접속

    • 로그인 후 상단 메뉴에서 ‘Forms’ 또는 리스트 내부에서 ‘Signup forms’ 메뉴 선택

  2. 폼 유형 선택

    • Embedded form (웹사이트 삽입용): HTML 코드로 블로그나 사이트에 넣을 수 있음

    • Hosted form (EmailOctopus에서 호스팅): 링크만으로 폼 제공 가능 (블로그가 없는 경우 유용)

  3. 폼 이름 및 연결 리스트 지정

    • 폼 이름은 내부 관리용이며, 어떤 리스트에 구독자를 저장할지 선택

  4. 입력 항목 설정

    • 기본: 이메일 주소 필드는 필수

    • 추가: 이름, 성, 지역 등 선택적으로 필드 추가 가능

    • 필요 시 GDPR 체크박스 삽입 (개인정보 수집 동의용)

  5. 확인 메시지/리디렉션 설정

    • 사용자가 구독 후 보게 될 ‘Thank You’ 메시지 설정

    • 또는 구독 후 이동할 감사 페이지(URL) 지정 가능


이 포스팅은 쿠팡 파트너스 활동으로, 블로그제작에 도움을 제공합니다.

🧩 필수 설정 요약

항목설명
이메일 필드필수 입력 항목. 이 항목이 있어야 리스트 저장됨
GDPR 체크박스유럽 대상일 경우 필수. 기타 지역은 권장 사항
자동 응답 메시지구독 완료 후 사용자에게 표시되는 메시지
디자인 설정색상, 폰트, 테두리 등 기본적인 커스터마이징 가능

💡 실전 팁

  • 너무 많은 입력 항목은 구독 전환율을 낮출 수 있으므로 최소화하는 것이 좋습니다.

  • 리스트와 폼 1:1 매칭이므로 리스트마다 폼을 개별 생성해야 합니다.

  • 폼 디자인은 후속 단계에서 더 다듬을 수 있으니, 일단 기본 폼으로 시작하세요.


✅ 3. 폼 임베드(Embed) 코드 가져오기

이제 만든 구독 폼을 블로그나 웹사이트에 삽입하여, 방문자가 뉴스레터를 쉽게 구독할 수 있도록 해보겠습니다.
EmailOctopus는 HTML 임베드 코드를 제공하므로 대부분의 플랫폼에 손쉽게 적용할 수 있습니다.

🔧 1. 임베드 코드 복사하기

  1. Forms 메뉴로 이동

    • 생성한 폼 옆에 있는 ‘Embed code’ 또는 ‘View form’ 클릭

  2. ‘Embedded HTML’ 코드 복사

    • 제공된 HTML 코드를 복사합니다.

    • 이 코드는 <form> 태그 형태로 되어 있어, 웹사이트에 그대로 붙여넣으면 작동합니다.

  3. 선택 옵션

    • Inline form: 콘텐츠 안에 삽입되는 기본 폼

    • Popup form: 팝업 형태로 표시되는 폼 (EmailOctopus 자체 기능은 제한적이며, 외부 도구 연동 필요)

🌐 2. 블로그/웹사이트에 삽입하기

📌 워드프레스(WordPress)

  1. 원하는 페이지나 게시글 편집 화면으로 이동

  2. ‘HTML 블록’ 추가

  3. 복사한 HTML 코드 붙여넣기 후 저장

📌 티스토리(Tistory)

  1. 글쓰기 화면 또는 사이드바 HTML 위젯 편집

  2. 복사한 코드 붙여넣기

  3. 저장 후 확인

📌 브런치(Brunch)

브런치는 외부 HTML 삽입이 불가능하므로, 대신 EmailOctopus Hosted Form 링크를 버튼 링크로 제공하는 방식을 사용해야 합니다.

💬 3. 테스트 및 확인

  • 실제 페이지에 폼이 잘 보이는지 확인

  • 테스트 이메일을 입력해 정상적으로 리스트에 등록되는지 체크

  • 모바일에서도 레이아웃이 깨지지 않는지 반드시 확인

💡 팁: 삽입 위치는 어디가 좋을까?

  • 블로그 사이드바 또는 본문 하단: 지속적인 노출에 효과적

  • 고정 페이지(예: 구독 안내 페이지): 상세 설명과 함께 삽입

  • 팝업 또는 슬라이드인 폼: 외부 도구(예: Sleeknote, MailOptin 등) 활용 시 가능

이제 여러분의 블로그에 뉴스레터 구독 폼이 설치되었습니다!
구독자가 실제로 폼을 작성하면 EmailOctopus 리스트에 자동 저장되며, 이후 자동 이메일 발송 설정(RSS 연동 등)에 활용됩니다.

✅ 4. 폼 스타일 커스터마이징 (선택사항)

기본 구독 폼은 기능적으로 충분하지만, 웹사이트나 블로그의 디자인과 어울리지 않는다면 사용자 경험을 해칠 수 있습니다. 이럴 때는 EmailOctopus의 폼을 약간 커스터마이징하여 브랜드에 맞게 디자인 조정해보세요.

🎨 1. 기본 커스터마이징 옵션

EmailOctopus의 폼 편집기에서 다음 요소들을 간단히 수정할 수 있습니다:

항목설명
색상배경색, 텍스트 색상, 버튼 색상 등 조정 가능
폰트웹에서 지원하는 기본 폰트 선택 가능
버튼 텍스트"구독하기" 대신 "최신 글 받아보기" 등으로 변경 가능
입력 필드 라벨필드명(예: Email address)을 한국어로 변경 가능

👉 폼 편집기 내 실시간 미리보기를 보며 조정할 수 있습니다.

🛠️ 2. 고급 스타일 변경 (CSS 활용)

HTML 임베드 폼을 사용하는 경우, 웹사이트의 CSS를 수정해 외형을 완전히 커스터마이징할 수도 있습니다.

예시: 버튼 색상 변경

form .button {
  background-color: #0073e6;
  color: #fff;
  border-radius: 5px;
}

예시: 폼 테두리 스타일 변경

form {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

⚠️ 주의: CSS 커스터마이징은 웹사이트에서 직접 HTML을 삽입할 수 있을 때만 가능합니다. 브런치, 노션 등 HTML 제한 플랫폼에서는 적용되지 않습니다.

💡 팁: 디자인 시 고려할 점

진실한 소식, 소리하나를 담다 - 참소리, ganatoday!
그린아프로

감사합니다. 가나투데이였습니다. #ganatoday #가나 투데이

Share:  Facebook Twitter Google+