Carrd 사이트에 대기자 명단 추가하는 방법

Carrd Pro Plus에서는 AJAX 방식으로 Ikiform 엔드포인트에 보내는 Custom 폼을 추가하고, UTM 수집을 켜고, 그 필드를 Ikiform에 정의하세요. Pro Standard에서는 대신 Embed 요소에 작은 HTML 폼을 붙여 넣으세요. 일반적인 방식으로 POST하고, 허니팟을 유지하며, 같은 페이지의 감사 섹션으로 사람들을 돌려보냅니다.

Carrd는 한 페이지짜리 소개를 가장 빨리 올리는 방법이라 대기자 명단을 두기에 자연스러운 곳입니다. 어떤 폼을 쓸 수 있는지는 무엇을 만드느냐보다 Carrd 플랜에 달려 있으니 거기서 시작하세요.

Carrd에서 다른 점

• 플랜이 폼을 결정합니다. Pro Plus에는 어떤 URL로든 보내는 Custom 폼이 있습니다. Pro Standard에는 Carrd 자체 대상으로 가는 문의 폼과 가입 폼, 그리고 Embed 요소가 있습니다. Pro Lite에는 폼도 임베드도 없습니다.
• Send to URL은 허니팟을 숨길 수 없습니다. Carrd의 Hidden 필드에는 항상 미리 정한 값이 들어가므로 봇을 잡을 수 없습니다. 스팸 점수는 여전히 모든 POST에 적용됩니다.
• AJAX POST는 사람 확인을 실행할 수 없습니다. Carrd는 2xx를 모두 성공으로, 나머지는 실패로 읽으며 Ikiform의 확인 페이지를 보여 줄 수 없습니다. 이 방식에서는 스팸 검사를 꺼 두세요.
• 페이지가 하나라 감사 인사를 할 곳도 하나입니다. 따로 만들지 않는 한 리디렉션할 두 번째 페이지가 없습니다. Carrd의 On Success 메시지나 같은 페이지의 섹션이 그 역할을 합니다.

이메일 도구에 주소만 있으면 된다면 Carrd의 기본 가입 폼으로 충분할 수 있습니다. 모든 가입의 저장본, 스팸 필터링, 가입마다 이메일, 어디로든 보낼 수 있는 서명된 웹훅이 필요할 때 Ikiform이 제 몫을 합니다.

Pro Plus: Custom 폼

1. Add Element › Form을 클릭하세요. Type을 Custom으로, 이어서 Send to URL로 설정하세요.
2. URL을 https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx로, Method를 AJAX로, Format을 Default로 설정하세요. XML은 고르지 마세요. Ikiform이 415로 거부합니다.
3. Email 필드 하나를 추가하고 Submitted ID를 email로 설정하세요. Carrd는 라벨로 ID를 만들므로 비워 두면 email_address 같은 이름이 전송됩니다.
4. Collect UTM parameters를 선택하세요. 링크에 UTM 매개변수가 있으면 Carrd가 utm_source, utm_medium, utm_campaign, utm_term, utm_content를 추가합니다.
5. On Success를 You're on the list. We'll email you at launch. 같은 메시지로, On Failure를 일반적인 문구로 설정하세요. Export variables와 Return endpoint responses를 켜지 않는 한 Carrd는 그곳에 여러분이 쓴 문구를 보여 줍니다.

그런 다음 Ikiform의 Fields 탭에 UTM 필드를 포함한 필드 정의를 추가하세요.

{
  "version": 1,
  "title": "Waitlist",
  "fields": [
    { "id": "email", "type": "email", "label": "Email", "required": true },
    { "id": "utm_source", "type": "text", "label": "UTM source", "validation": { "max_length": 100 } },
    { "id": "utm_medium", "type": "text", "label": "UTM medium", "validation": { "max_length": 100 } },
    { "id": "utm_campaign", "type": "text", "label": "UTM campaign", "validation": { "max_length": 100 } },
    { "id": "utm_term", "type": "text", "label": "UTM term", "validation": { "max_length": 100 } },
    { "id": "utm_content", "type": "text", "label": "UTM content", "validation": { "max_length": 100 } }
  ]
}

• UTM 필드 다섯 개가 없으면 태그가 붙은 링크로 들어온 가입은 Unknown field 오류로 거부되고, Carrd는 On Failure를 보여 줍니다. 링크에 있을 때만 전송되므로 여기서는 선택 필드입니다.
• File 필드는 추가하지 마세요. Ikiform은 파일을 422 files_not_supported로 거부합니다.
• Carrd의 Events 설정으로 성공 시 분석 호출 같은 자체 스크립트를 실행할 수 있습니다. 메시지와는 별개입니다.

Pro Standard: 임베드 폼

Add Element › Embed를 클릭하고, Type을 Code로, Style을 Inline으로 설정한 뒤 폼을 붙여 넣으세요. 임베드는 빌더에서 렌더링되지 않으므로 게시해야 볼 수 있습니다.

<form class="iki-waitlist" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="email" type="email" placeholder="you@company.com" aria-label="Email" autocomplete="email" required>
  <input type="hidden" name="_redirect" value="https://example.com/#joined">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Join the waitlist</button>
</form>

<style>
  .iki-waitlist { display: flex; flex-wrap: wrap; gap: 8px; max-width: 440px; margin: 0 auto; }
  .iki-waitlist input[type="email"] { flex: 1 1 220px; font: inherit; padding: 12px 14px; border: 1px solid #d4d4d4; border-radius: 8px; }
  .iki-waitlist button { font: inherit; padding: 12px 18px; border: 0; border-radius: 8px; background: #111; color: #fff; cursor: pointer; }
</style>

• joined라는 이름의 Section Break를 추가하고 그 뒤에 감사 문구를 두세요. Carrd는 링크의 # 뒤에 섹션 이름이 있으면 그 섹션을 열므로, _redirect가 사람들을 그곳으로 데려갑니다.
• https://example.com을 Carrd 주소로 바꾸세요. _redirect는 폼의 Allowed domains 중 하나에 있는 https: URL일 때만 작동하므로 그곳에도 도메인을 추가하세요.
• target="_top"은 Carrd가 임베드를 감싸는 프레임을 POST가 벗어나게 해서, 리디렉션이 창 전체에 로드되도록 합니다.
• 일반 POST이므로 사람 확인을 켜면 작동합니다. HTML은 바꿀 필요가 없습니다.

허용 도메인

carrd.co나 crd.co만 단독으로 추가하지 마세요. 모든 Carrd 사이트가 일치하게 됩니다. Carrd 문서 가이드에 문의 폼 버전이 있고, 메인 가이드에서 반복 가입을 설명합니다.

작동 확인하기

1. 사이트를 게시하세요. 폼과 임베드는 게시된 페이지에서만 작동합니다.
2. 폼의 Allowed domains에 사이트 도메인을 추가하고, 개발 중에는 localhost도 추가하세요. 비워 두면 어디서 온 POST든 받습니다.
3. Pro Plus에서 ?utm_source=test로 페이지를 열고 가입하세요. Carrd가 On Success를 보여 주고, Ikiform의 제출에는 utm_source가 test로 설정되어 있습니다.
4. Pro Standard에서 임베드로 가입하세요. 페이지의 #joined 섹션으로 이동합니다.
5. 알림 수신자마다 받은편지함을 확인하세요. 각자 필드가 담긴 이메일을 받으며, 폼에 email 필드가 있으면 Reply(답장)는 제출자에게 갑니다.
6. 아무것도 안 왔나요? 대시보드의 상태 필터를 Spam으로 바꿔 보세요. 스팸도 실제 제출과 같은 성공 응답을 받습니다.

주의할 점

질문