# Squarespace

> Squarespace 코드 블록에 HTML 폼을 붙여 넣으세요. 일반 HTML은 모든 플랜에서 작동하며, JavaScript를 추가하려면 Core 플랜 이상이 필요합니다.

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

| 플랜 | 코드 블록에서 실행할 수 있는 것 |
| --- | --- |
| Basic | HTML과 CSS. 스크립트와 iframe은 렌더링되지 않으므로 일반 폼을 사용하세요. |
| Core, Plus, Advanced | HTML, CSS, JavaScript. 향상된 버전을 추가할 수 있습니다. |

## 코드 블록 추가하기

### 1단계: Code 블록 삽입하기

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

### 2단계: 폼 붙여 넣기

`Code block`:

```html
<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됩니다.

`Code block, below the form`:

```html
<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](https://ikiform.com/ko/docs/guides/javascript.md)의 슬롯을 사용하세요. 스팸 검사가 **Ikiform**인 폼은 `fetch` POST가 확인 페이지 대신 `403 challenge_required`를 받으므로 일반 버전을 유지하세요.

## 허용 도메인

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

| 폼이 실행되는 곳 | Allowed domains에 추가할 값 |
| --- | --- |
| 기본 제공 도메인 | `your-site.squarespace.com` |
| 연결한 도메인 | `example.com`, `www.example.com`도 포함 |

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

## 테스트 체크리스트

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

## 문제 해결

| 증상 | 원인 | 해결 |
| --- | --- | --- |
| 코드가 페이지에 텍스트로 표시됨 | **Display Source**가 켜져 있거나 **Mode**가 HTML이 아님 | **Mode**를 **HTML**로 설정하고 **Display Source**를 끄세요. |
| 향상 스크립트가 실행되지 않음 | 사이트가 코드 블록의 스크립트를 렌더링하지 않는 Basic 플랜임 | 일반 폼을 유지하거나 Core로 업그레이드하세요. |
| 여러분의 감사 페이지 대신 Ikiform의 감사 페이지가 나옴 | 허용 도메인이 없거나, `_redirect`가 `http:`나 다른 도메인을 사용함 | 도메인을 추가하거나 **Redirect after submit**을 설정하세요. |
| 제출이 `origin_mismatch`와 함께 스팸 필터에 들어감 | POST한 페이지가 폼의 허용 도메인에 없음 | 위 표의 호스트를 추가하세요. **Reject**를 골랐다면 같은 POST가 대신 `403 origin_not_allowed`를 받습니다. |
| 편집기에서는 폼에 스타일이 없어 보이지만 방문자에게는 정상으로 보임 | 로그인한 상태에서는 코드 블록이 항상 렌더링되지는 않음 | 시크릿 창에서 페이지를 확인하세요. |

## 관련 문서

- [HTML 폼](https://ikiform.com/ko/docs/html.md): 리디렉션, 예약 필드, 허니팟.
- [순수 JavaScript](https://ikiform.com/ko/docs/guides/javascript.md): 인라인 오류를 표시하는 `fetch`.
- [사이트 빌더](https://ikiform.com/ko/docs/guides/site-builders.md): 어떤 빌더에서든 작동하는 임베드.
- [허용 도메인](https://ikiform.com/ko/docs/spam.md#allowed-domains): 출처를 비교하는 방식과 불일치 시 동작.