# Squarespace

> Squarespace のコードブロックに HTML フォームを貼り付けます。プレーンな HTML はすべてのプランで動きます。JavaScript を追加するには Core プラン以上が必要です。

Squarespace の Form ブロックは、送信データを Squarespace 内に保存し、対応している連携先に送ります。外部の action URL を設定する項目はありません。HTML モードの Code ブロックなら自分のフォームをページに描画できるので、Ikiform に直接送信できます。

| プラン | コードブロックで実行できるもの |
| --- | --- |
| Basic | HTML と CSS。スクリプトや iframe は描画されないので、プレーンなフォームを使います。 |
| Core, Plus, Advanced | HTML、CSS、JavaScript。拡張版を追加できます。 |

## コードブロックを追加する

### ステップ 1: Code ブロックを挿入する

ページを編集し、ブロックを追加して **Code** を選びます。**Mode** を **HTML** にして **Display Source** をオフにします。そうしないとフォームがテキストとして表示されます。

### ステップ 2: フォームを貼り付ける

`Code ブロック`:

```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` で送信し、ボタンの下のステータス行に Ikiform のメッセージを書き込み、`_redirect` は無視します。スクリプトが読み込まれなくても、フォームは通常どおり送信されます。

`Code ブロック、フォームの下`:

```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/ja/docs/guides/javascript.md) のスロットを使ってください。スパムチェックが **Ikiform** のフォームでは、`fetch` の送信には確認ページではなく `403 challenge_required` が返るため、プレーン版のままにしてください。

## 許可ドメイン

Squarespace はすべてのサイトを、接続したドメインに加えて組み込みのドメインでも配信します。

| フォームが動く場所 | 許可ドメインに追加するもの |
| --- | --- |
| 組み込みのドメイン | `your-site.squarespace.com` |
| 接続したドメイン | `example.com`（`www.example.com` も含まれます） |

- `squarespace.com` だけを追加しないでください。他の人のサイトも含め、そのホスト上のすべてのサイトが一致してしまいます。

## テストのチェックリスト

1. プライベートウィンドウでページを開きます。訪問者には表示されていても、ログイン中はコードブロックが描画されないことがあります。
2. 組み込みのドメインと接続したドメインの両方でフォームを送信し、どちらの送信データも Ikiform に表示されることを確認します。
3. Ikiform のページではなく、Not linked のサンクスページに移動することを確認します。
4. Basic プランでは、フォームが引き続き送信されることを確認します。スクリプトは必要ありません。

## トラブルシューティング

| 症状 | 原因 | 対処 |
| --- | --- | --- |
| コードがテキストとしてページに表示される | **Display Source** がオン、または **Mode** が HTML ではない | **Mode** を **HTML** にして、**Display Source** をオフにします。 |
| 拡張版のスクリプトが動かない | サイトが Basic プランで、コードブロック内のスクリプトが描画されない | プレーンなフォームのままにするか、Core にアップグレードします。 |
| 自分のサンクスページではなく Ikiform のサンクスページが表示される | 許可ドメインがない、または `_redirect` が `http:` か別のドメインを使っている | ドメインを追加するか、**Redirect after submit**（送信後のリダイレクト）を設定します。 |
| 送信データが `origin_mismatch` でスパムフィルターの下に届く | 送信したページが、フォームの許可ドメインに含まれていない | 上の表のホストを追加します。**Reject** を選んでいる場合、同じ送信には代わりに `403 origin_not_allowed` が返ります。 |
| エディターではフォームにスタイルが当たっていないように見えるが、訪問者には問題なく表示される | ログイン中はコードブロックが描画されないことがある | プライベートウィンドウでページを確認します。 |

## 関連ページ

- [HTML フォーム](https://ikiform.com/ja/docs/html.md): リダイレクト、予約済みフィールド、ハニーポット。
- [素の JavaScript](https://ikiform.com/ja/docs/guides/javascript.md): インラインエラー付きの `fetch`。
- [サイトビルダー](https://ikiform.com/ja/docs/guides/site-builders.md): どのビルダーでも使える埋め込み。
- [許可ドメイン](https://ikiform.com/ja/docs/spam.md#allowed-domains): オリジンの照合方法と、一致しない場合の動作。