Wix

Wix Forms は送信データを Wix 内に保存し、外部の action URL を設定する項目はありません。Ikiform を使うには、自分のフォームを Embed HTML 要素に置きます。Wix はそのコードを、別の filesusr.com ホストから配信されるサンドボックス化された iframe の中で実行します。以下の内容はすべてこの前提に基づいています。

フォームを fetch で送信する理由

• Wix のフレームはフォーム、スクリプト、ポップアップ、同一オリジンへのアクセスを許可しますが、トップレベルのページ遷移は許可しません。target="_top" で訪問者をサンクスページに移動させることはできません。
• 通常のフォーム送信では、小さなフレームの中に結果が読み込まれますが、Ikiform のサンクスページ、エラーページ、確認ページはフレーム内での表示を拒否します。訪問者には空のフレームか、拒否されたフレームが表示されてしまいます。
• fetch と Accept: application/json で送信すれば、訪問者はその場にとどまり、結果は埋め込みの中に表示されます。

埋め込みを追加する

1. Embed HTML 要素を追加する

   Wix エディターで Add Elements > Embed Code > Embed HTML を開きます。Wix Studio では Embed & Social にあります。Website address ではなく Code を選びます。

2. フォームを貼り付ける

   <form id="contact" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" novalidate>
     <label>Email <input name="email" type="email" autocomplete="email" required /></label>
     <p class="error" data-error-for="email"></p>
     <label>Message <textarea name="message" rows="4"></textarea></label>
     <p class="error" data-error-for="message"></p>
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
     <button>Send</button>
     <p role="status" data-status></p>
   </form>
   
   <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 = result.ok ? {} : result.error.fields ?? {};
         for (const slot of form.querySelectorAll("[data-error-for]")) {
           slot.textContent = fields[slot.dataset.errorFor]?.[0] ?? "";
         }
         status.textContent = result.ok ? "Thanks, we got it." : result.error.message;
         if (result.ok) form.reset();
       } catch {
         status.textContent = "Couldn't reach the server. Try again.";
       } finally {
         button.disabled = false;
       }
     });
   </script>
   
   <style>
     body { margin: 0; font: 15px/1.5 system-ui, sans-serif; }
     form { display: grid; gap: 8px; }
     label { display: grid; gap: 4px; }
     input, textarea, button { font: inherit; padding: 8px 10px; border: 1px solid #d4d4d4; border-radius: 6px; }
     button { background: #111; color: #fff; border: 0; }
     .error { margin: 0; color: #b42318; font-size: 13px; }
   </style>

   フレームはサイトのフォントや色を引き継がないので、<style> ブロックで設定しています。サイトに合わせて変更してください。

3. サイズを調整して公開する

   フィールドエラーとステータス行が収まる高さまで要素を広げてから公開します。エディターではカスタムコードのプレースホルダーしか表示されないので、公開されたサイトでテストしてください。

スパムの設定

フォームのスパムチェックはオフのままにします。Ikiform の人間確認には、確認ページか小さな ikiform.com のフレームが必要ですが、どちらも Wix のサンドボックス内では動きません。ハニーポットとスパムスコアは、すべての送信で引き続き動きます。

許可ドメイン

送信は iframe の中から送られるため、Ikiform が認識するのは Wix のドメインではなく、フレームのホストです。確認するには、公開されたページを開いて埋め込みを検証し、iframe の src を読み取ります。

• filesusr.com だけを追加しないでください。他の人のサイトも含め、そのホスト上のすべてのサイトが一致してしまいます。
• フレームのホストはサイトのアドレスから決まるので、新しいドメインを接続すると変わります。ドメインを変更したら、もう一度確認してください。

テストのチェックリスト

1. 公開し、プライベートウィンドウで本番のページを開きます。
2. フィールドを定義している場合は、メールアドレスを空にして送信します。フォームには novalidate が付いているので、Ikiform のメッセージがフィールドの下に表示されるはずです。
3. 本物のメッセージを送信し、ステータス行に "Thanks, we got it." と表示され、送信データが Ikiform に表示されることを確認します。
4. フレームのホストで許可ドメインをオンにして、もう一度送信します。引き続き受信済みに届くはずです。

トラブルシューティング

関連ページ

• 素の JavaScriptインラインエラー付きの fetch。
• サイトビルダーどのビルダーでも使える埋め込み。
• 許可ドメインオリジンの照合方法と、一致しない場合の動作。
• スパム対策ハニーポット、スコアリング、人間確認。