Carrd 폼: 제출을 폼 백엔드로 보내기

Carrd의 폼에는 Pro 플랜이 필요합니다. Pro Standard에는 문의 폼과 가입 폼이 있고, Pro Plus는 어떤 URL로든 보낼 수 있는 커스텀 폼을 더합니다. Pro Plus에서는 커스텀 폼을 Ikiform 엔드포인트로 Send to URL하도록 설정하면 Carrd가 자체 성공 메시지를 유지합니다. Pro Standard에서는 Embed 요소에 HTML 폼을 붙여 넣으면 업그레이드 없이 커스텀 필드를 쓸 수 있습니다.

Carrd에서 다른 점

Carrd는 제출 수를 제한하지 않습니다. 대신 플랜별로 폼 기능을 나누며, 각 플랜은 정해진 사이트 수에 대한 연간 요금입니다. 2026년 10월 기준 Carrd의 요금과 문서는 다음과 같이 선을 긋습니다.

Carrd 문의 폼은 각 메시지를 @mail.carrd.site에서 이메일로 전달하므로 받은편지함이 기록이고, 스팸함으로 분류된 메시지는 놓치기 쉽습니다. 이것이 흔히 옮기는 이유입니다. 메일함 하나가 아니라 저장되고 검색 가능한 목록, 내보내기, 팀 전체를 위한 알림을 원하는 것입니다.

Mailchimp, Kit 같은 이메일 도구에 새 구독자만 넣으면 된다면 Pro Standard의 Carrd Signup 폼이 이미 그 일을 하며 더 나은 선택입니다. Ikiform에는 원클릭 이메일 도구 통합이 없습니다.

Pro Plus: Send to URL 설정

코드 없이 Carrd의 폼 편집기와 스타일을 유지합니다. 아래 필드는 사진작가의 촬영 예약 문의용이니 자신의 필드를 쓰세요.

1. Add Element > Form을 클릭하고 Type을 Custom으로, 그다음 Send to URL로 설정하세요.
2. 엔드포인트를 URL에 붙여 넣으세요.
3. Method를 AJAX로, Format을 Default로 설정하세요. Carrd는 모든 2xx 응답을 성공으로 읽고, Ikiform은 POST를 저장하면 201로 응답합니다.
4. 필드를 추가하세요. Text name, Email email, Select service, Date preferred_date, Text Area details입니다. 각 필드의 ID를 설정하세요. 그렇지 않으면 Carrd가 레이블에서 생성합니다.
5. On Success에서 보여 줄 메시지나 섹션을 고르세요. On Failure의 문구는 일반적으로 두세요. Carrd는 Ikiform의 오류 메시지를 보여 주지 않습니다.
6. 게시하세요. 폼은 게시된 사이트에서만 POST합니다.

https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

Hidden 필드는 항상 미리 설정한 값을 보내므로 여기서는 허니팟으로 쓸 수 없습니다. Ikiform의 스팸 점수, 레이트 리밋, 허용 도메인은 여전히 모든 POST에 실행됩니다. 이 폼의 Ikiform Spam check는 끈 채로 두세요. AJAX POST는 확인을 보여 줄 수 없어 403 challenge_required로 실패합니다.

Pro Standard: Embed 요소

Pro Standard에서는 Carrd에서 커스텀 폼을 만들 수 없지만 붙여 넣을 수는 있습니다. Add Element > Embed를 클릭하고 Type을 Code로, Style을 Inline으로 설정한 뒤 이것을 붙여 넣으세요. Carrd의 폼 스타일은 임베드 코드에 적용되지 않으므로 자체 스타일을 담고 있습니다.

<form id="booking" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="name" placeholder="Name" autocomplete="name" required>
  <input name="email" type="email" placeholder="Email" autocomplete="email" required>
  <select name="service" required>
    <option value="" disabled selected>What do you need?</option>
    <option value="portrait">Portrait session</option>
    <option value="event">Event coverage</option>
    <option value="product">Product photos</option>
  </select>
  <input name="preferred_date" type="date" aria-label="Preferred date">
  <textarea name="details" rows="4" placeholder="Anything else?" maxlength="2000"></textarea>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Request a booking</button>
  <p id="booking-note" role="status"></p>
</form>
<style>
  #booking { display: grid; gap: 0.75rem; font: inherit; }
  #booking input, #booking select, #booking textarea { font: inherit; padding: 0.75rem; border: 1px solid #ccc; border-radius: 0.5rem; }
  #booking button { font: inherit; padding: 0.75rem; border: 0; border-radius: 0.5rem; background: #111; color: #fff; }
</style>
<script>
  const booking = document.getElementById("booking");
  booking.addEventListener("submit", async (event) => {
    event.preventDefault();
    const note = document.getElementById("booking-note");
    note.textContent = "Sending";
    try {
      const response = await fetch(booking.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(booking),
      });
      const result = await response.json();
      if (result.ok) {
        booking.replaceChildren("Thanks. I'll reply with availability.");
        return;
      }
      const fields = result.error.fields ?? {};
      note.textContent = fields.preferred_date?.[0] ?? fields.email?.[0] ?? result.error.message;
    } catch {
      note.textContent = "Couldn't send. Try again, or email me directly.";
    }
  });
</script>

• 스크립트가 fetch로 POST하고 폼을 감사 문구로 바꾸므로 페이지가 바뀌지 않습니다.
• 숨겨진 _gotcha 입력은 Carrd Hidden 필드와 달리 여기서는 진짜 허니팟입니다.
• 스크립트가 로드되지 않아도 폼은 일반적으로 POST합니다. target="_top"은 결과가 프레임 안에서 열리지 않게 합니다.
• 임베드는 Carrd 편집기에서 실행되지 않습니다. 폼을 보려면 게시하세요.

두 버전 모두 같은 필드를 보냅니다. 테스트가 도착하면 Ikiform에서 정의하세요.

Carrd의 허용 도메인

your-site.carrd.co, Pro에서는 your-site.crd.co와 커스텀 도메인을 추가하세요. carrd.co만 단독으로 추가하지 마세요. 모든 Carrd 사이트가 POST할 수 있게 됩니다. Carrd 문서 가이드에 모든 설정과 이유가 있습니다.

Carrd에서 동작 확인하기

1. 폼의 Allowed domains에 사이트 도메인을 추가하고, 개발하는 동안에는 localhost도 추가하세요. 비워 두면 어디서든 POST를 받습니다.
2. 게시한 뒤 게시된 사이트에서 폼을 제출하세요.
3. Carrd가 On Success를 보여 주는지, 또는 임베드가 감사 문구를 보여 주는지 확인하세요.
4. 대시보드에서 Submissions를 여세요. 보낸 모든 필드가 담긴 새 제출이 있습니다.
5. 이름이 설정한 ID인지, preferred_date가 2026-11-14처럼 읽히는지, 예상하지 않은 utm_ 필드가 도착하지 않았는지 확인하세요.
6. 알림 수신자 각각의 받은편지함을 확인하세요. 각자 필드가 담긴 이메일을 받고, 폼에 email 필드가 있으면 Reply는 제출자에게 갑니다.

주의할 점

질문