Squarespace

Squarespace의 Form 블록은 제출을 Squarespace에 저장하고 지원하는 연결로 보냅니다. 외부 action URL을 설정할 수는 없습니다. HTML 모드의 Code 블록은 직접 만든 폼을 페이지에 렌더링하므로 Ikiform으로 바로 POST할 수 있습니다.

코드 블록 추가하기

1. Code 블록 삽입하기

   페이지를 편집하고 블록을 추가해 Code를 고르세요. Mode를 HTML로 설정하고 Display Source를 끄세요. 그렇지 않으면 폼이 텍스트로 표시됩니다.

2. 폼 붙여 넣기

   <form id="contact" class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
     <label>Name <input name="name" autocomplete="name" required></label>
     <label>Email <input name="email" type="email" autocomplete="email" required></label>
     <label>Message <textarea name="message" rows="5"></textarea></label>
     <input type="hidden" name="_redirect" value="https://example.com/thank-you">
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <button type="submit" class="sqs-block-button-element">Send</button>
     <p role="status" data-status></p>
   </form>
   
   <style>
     .ikiform { display: grid; gap: 12px; max-width: 480px; }
     .ikiform label { display: grid; gap: 4px; }
     .ikiform input, .ikiform textarea { font: inherit; padding: 10px 12px; border: 1px solid currentColor; }
   </style>

   sqs-block-button-element는 사이트의 버튼 스타일을 재사용합니다. font: inherit와 currentColor가 섹션의 글꼴과 텍스트 색상을 가져오므로, 폼이 밝은 섹션과 어두운 섹션 모두에 어울립니다.

3. 감사 페이지 만들기

   내비게이션에 나타나지 않도록 Not linked 아래에 페이지를 추가하고, 그 전체 URL을 _redirect로 사용하세요. 또는 폼 설정의 Redirect after submit으로 지정하고 숨겨진 입력을 제거하세요.

_redirect는 폼의 허용 도메인에 페이지의 도메인이 포함된 경우에만 따릅니다. 그렇지 않으면 방문자에게 Ikiform의 호스팅 감사 페이지가 보입니다.

페이지에 머물기 (Core 이상)

페이지를 떠나지 않고 결과를 보여 주려면 같은 코드 블록에서 폼 아래에 이 스크립트를 붙여 넣으세요. fetch로 POST하고, 버튼 아래 상태 줄에 Ikiform의 메시지를 쓰며, _redirect는 무시합니다. 스크립트가 로드되지 않아도 폼은 평소처럼 POST됩니다.

<script>
  const form = document.querySelector("#contact");
  const button = form.querySelector("button");
  const status = form.querySelector("[data-status]");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    button.disabled = true;
    status.textContent = "Sending";
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      const fields = Object.entries(result.ok ? {} : result.error.fields ?? {});
      const problems = fields.map(([name, messages]) => name + ": " + messages[0]).join(". ");
      status.textContent = result.ok ? "Thanks, we got it." : problems || result.error.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = "Couldn't reach the server. Try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>

필드 오류는 email: This field is required처럼 필드 이름을 앞에 붙여 같은 줄에 표시됩니다. 필드마다 메시지를 보여 주려면 순수 JavaScript의 슬롯을 사용하세요. 스팸 검사가 Ikiform인 폼은 fetch POST가 확인 페이지 대신 403 challenge_required를 받으므로 일반 버전을 유지하세요.

허용 도메인

Squarespace는 모든 사이트를 기본 제공 도메인과 연결한 도메인 양쪽에서 제공합니다.

• squarespace.com만 단독으로 추가하지 마세요. 다른 사람의 사이트를 포함해 그 호스트의 모든 사이트가 일치하게 됩니다.

테스트 체크리스트

1. 시크릿 창에서 페이지를 여세요. 로그인한 상태에서는 방문자에게 보이는 코드 블록이 렌더링되지 않을 수 있습니다.
2. 기본 제공 도메인과 연결한 도메인에서 각각 폼을 제출하고, 두 제출이 모두 Ikiform에 나타나는지 확인하세요.
3. Ikiform의 페이지가 아니라 Not linked 감사 페이지로 이동하는지 확인하세요.
4. Basic에서는 폼이 여전히 POST되는지 확인하세요. 스크립트는 필요 없습니다.

문제 해결

관련 문서

• HTML 폼리디렉션, 예약 필드, 허니팟.
• 순수 JavaScript인라인 오류를 표시하는 fetch.
• 사이트 빌더어떤 빌더에서든 작동하는 임베드.
• 허용 도메인출처를 비교하는 방식과 불일치 시 동작.