• 홈
  • Uncategorized

Mailchimp 구독 폼 만들기

다음은 Mailchimp용 HTML 구독 폼 코드 예시와, 그것을 워드프레스에 삽입하는 방법까지 자세히 설명해드릴게요. 초보자도 어렵지 않게 따라할 수 있도록 구성했습니다
가나톡ganaTOK
가나톡ganaTOK0 mins read

Mailchimp 구독 폼 만들기

다음은 Mailchimp용 HTML 구독 폼 코드 예시와, 그것을 워드프레스에 삽입하는 방법까지 자세히 설명해드릴게요. 초보자도 어렵지 않게 따라할 수 있도록 구성했습니다. 따라하기 입니다. 😊

✅ Mailchimp 구독 폼 HTML 코드 예시

📌 예제 코드 (간단 버전)


<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
  <form action="https://YOURUSERNAME.us21.list-manage.com/subscribe/post?u=YOUR_U_VALUE&amp;id=YOUR_ID_VALUE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div id="mc_embed_signup_scroll">
        <h2>📬 뉴스레터 구독 신청</h2>
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="이메일 주소를 입력하세요" required>
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input type="text" name="b_YOUR_U_VALUE_YOUR_ID_VALUE" tabindex="-1" value="">
        </div>
        <div class="clear">
          <input type="submit" value="구독하기" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
      </div>
  </form>
</div>
<!--End mc_embed_signup-->

⚠️ 주의사항

action 속성의 URL은 Mailchimp의 Audience 설정에서 생성된 코드를 복사해야 합니다.

확인 방법:

  1. Mailchimp → Audience → Signup forms → Embedded forms

  2. HTML 코드를 생성하면, form action="..."에 들어갈 주소 자동 생성됨

  3. 그 코드를 복사해서 위 코드의 action에 붙여넣으면 됩니다

✅ 워드프레스에 삽입하는 방법

방법 1: HTML 블록 사용하기 (가장 쉬움)

  1. 워드프레스 관리자 → 글 또는 페이지 편집

  2. ‘플러스(+) 버튼’ 클릭 → HTML 블록 추가

  3. 위의 Mailchimp 폼 코드 붙여넣기

  4. 저장 후 미리보기 → 폼이 잘 나오는지 확인

방법 2: 위젯이나 푸터에 삽입

  1. 워드프레스 관리자 → 외모 → 위젯

  2. 원하는 위치(사이드바, 푸터 등)에 “사용자 정의 HTML” 위젯 추가

  3. 위의 폼 코드 붙여넣기

  4. 저장 → 홈페이지 확인

방법 3: Elementor 사용자라면

  1. 편집 모드에서 HTML 위젯을 끌어다 원하는 위치에 배치

  2. 위 폼 코드 붙여넣기 → 실시간 미리보기로 확인

🎨 폼을 예쁘게 꾸미고 싶다면?

추가로 CSS를 입히면 됩니다. 예시:

<style>
  #mc_embed_signup input.email {
    padding: 10px;
    width: 80%;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  #mc_embed_signup input.button {
    background-color: #0073e6;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
</style>

✍️ 마무리 팁

  • 구독 완료 후 메시지도 Mailchimp에서 설정할 수 있어요 (→ Audience → Settings → Confirmation thank you page)

  • GDPR 동의 체크박스를 추가하고 싶다면 Embedded Form 설정에서 활성화하시면 됩니다

  • 폼을 여러 개 만들 수 있어, 다른 캠페인용 폼도 쉽게 설정 가능해요!

댓글 쓰기