Home » » 비즈니스 자산의 시작: 메일침프 구독 폼 코드 생성 및 실전 삽입 가이드|가나투데이

비즈니스 자산의 시작: 메일침프 구독 폼 코드 생성 및 실전 삽입 가이드|가나투데이

By 

비즈니스 자산의 시작: 메일침프 구독 폼 코드 생성 및 실전 삽입 가이드

안녕하세요, abcsense.kr의 비즈니스 블로거이자 SEO 전문가입니다. 뉴스레터 서비스를 기획했다면, 이제 가장 중요한 단계는 방문자의 이메일을 수집할 수 있는 구독 폼(Signup Form)을 실제로 구현하는 것입니다. 기술적인 지식이 부족하더라도 메일침프가 제공하는 코드를 활용하면 누구나 전문가 수준의 수집 도구를 갖출 수 있습니다.

오늘 이 글에서는 메일침프에서 구독 코드를 생성하는 구체적인 절차와 함께, 여러분의 블로그에 바로 적용할 수 있는 커스터마이징된 코드 사례를 제시해 드립니다. 이를 통해 독자와의 직접적인 소통 창구를 마련하고 이탈 고객을 영구적인 팬으로 전환하는 실질적인 이득(Benefit)을 얻으실 수 있습니다.

1. 메일침프 임베디드 폼(Embedded Form) 코드 생성 5단계

메일침프 관리자 화면에서 내 블로그에 딱 맞는 코드를 추출하는 표준 절차입니다.

  1. Audience 선택: 메일침프 대시보드 왼쪽 메뉴에서 Audience 아이콘을 클릭하고 Signup forms를 선택합니다.

  2. Embedded forms 클릭: 여러 가입 폼 종류 중 블로그 본문에 직접 삽입할 수 있는 Embedded forms를 선택합니다.

  3. 양식 구성(Form Builder):

    • Fields: 'Email Address'와 'First Name' 정도만 남기고 나머지는 제거하여 가입 장벽을 낮춥니다.

    • Settings: 폼의 제목(Title)을 "abcsense.kr의 최신 인사이트 구독하기" 등으로 수정합니다.

  4. 코드 복사: 우측 상단의 Continue 버튼을 누르면 HTML 코드가 생성됩니다. Copy Code를 눌러 메모장에 복사해 둡니다.

  5. 태그 속성 확인: 생성된 코드 중 form action="이곳의 주소" 부분이 본인의 고유 계정 주소인지 반드시 확인해야 합니다.

2. 실전 적용을 위한 구독 폼 코드 사례 및 디자인 팁

메일침프에서 제공하는 기본 코드는 디자인이 다소 밋밋할 수 있습니다. 아래는 블로그 가독성을 높이기 위해 CSS 스타일이 가미된 표준 코드 사례입니다.

[코드 사례] 세련된 뉴스레터 구독 폼

이 코드를 워드프레스의 사용자 정의 HTML 블록이나 티스토리의 HTML 편집기에 붙여넣으세요. (중요: action 주소는 본인의 메일침프 코드에서 복사한 값으로 대체해야 합니다.)

HTML
<style type="text/css">
    #mc_embed_signup { background:#f9f9f9; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%; border:1px solid #ddd; border-radius:10px; padding:20px; }
    #mc_embed_signup h2 { font-size: 20px; color: #333; margin-bottom: 15px; }
    #mc_embed_signup .button { background-color: #007bff; border-radius: 5px; font-weight: bold; }
    #mc_embed_signup .button:hover { background-color: #0056b3; }
</style>

<div id="mc_embed_signup">
    <form action="여기에_본인의_메일침프_고유주소를_넣으세요" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
            <h2>📬 abcsense.kr 비즈니스 레터 구독</h2>
            <div class="mc-field-group">
                <label for="mce-EMAIL">이메일 주소 (필수)</label><br/>
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="width:90%; padding:8px; margin-top:5px;">
            </div>
            <div class="mc-field-group">
                <label for="mce-FNAME">이름 (선택)</label><br/>
                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" style="width:90%; padding:8px; margin-top:5px;">
            </div>
            <div style="margin-top:20px;">
                <input type="submit" value="지금 무료로 구독하기" name="subscribe" id="mc-embedded-subscribe" class="button" style="padding:10px 20px; color:#fff; border:none; cursor:pointer;">
            </div>
        </div>
    </form>
</div>

결론 및 마무리

구독 코드를 생성하고 배치하는 과정은 내 블로그에 '영업 사원'을 배치하는 것과 같습니다. 간결한 입력 필드와 시선을 끄는 버튼 디자인은 구독 전환율을 결정짓는 핵심 요소입니다. 오늘 안내해 드린 절차에 따라 여러분만의 독자 리스트를 구축하고, 검색 엔진의 변화에도 끄떡없는 강력한 비즈니스 기반을 마련해 보시기 바랍니다.

코드를 넣었는데 디자인이 깨지거나 메일 발송 테스트가 되지 않나요? 지금 바로 메일침프 뉴스레터를 구독하세요! 구독자분들께는 '워드프레스 및 티스토리 전용 메일침프 CSS 테마팩'과 '첫 가입자에게 보내는 웰컴 이메일 작성 템플릿'을 무료로 공유해 드립니다. 전문가의 손길이 닿은 폼으로 더 많은 구독자를 모아보세요!

[함께 읽으면 좋은 글]

  • [메일침프 뉴스레터 구독: 무료 이용 가이드 및 블로그 구현 전략]

  • [독자의 클릭을 부르는 카피라이팅 템플릿 및 SEO 체크리스트]

복사한 코드 중 action 주소를 찾는 데 어려움을 겪고 계신가요? 코드를 댓글로 (게시자 ID는 가리고) 올려주시면 어느 부분을 수정해야 하는지 정확히 짚어드리겠습니다!

#가나 투데이 #ganatoday

그린아프로
Share:  Facebook Twitter Google+