Squarespace

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

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

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

<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 の送信には確認ページではなく 403 challenge_required が返るため、プレーン版のままにしてください。

許可ドメイン

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

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

テストのチェックリスト

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

トラブルシューティング

関連ページ

• HTML フォームリダイレクト、予約済みフィールド、ハニーポット。
• 素の JavaScriptインラインエラー付きの fetch。
• サイトビルダーどのビルダーでも使える埋め込み。
• 許可ドメインオリジンの照合方法と、一致しない場合の動作。