Wix

Wix Forms는 제출을 Wix에 보관하며 외부 action URL을 설정할 수 없습니다. Ikiform을 쓰려면 직접 만든 폼을 Embed HTML 요소에 넣으세요. Wix는 이 코드를 별도의 filesusr.com 호스트에서 제공하는 샌드박스 iframe 안에서 실행하며, 아래 내용은 모두 이 점 때문입니다.

폼이 fetch로 POST하는 이유

• Wix의 프레임은 폼, 스크립트, 팝업, 동일 출처 접근은 허용하지만 최상위 이동은 허용하지 않습니다. target="_top"으로는 방문자를 감사 페이지로 보낼 수 없습니다.
• 일반 폼 POST는 결과를 작은 프레임 안에 불러오는데, Ikiform의 감사, 오류, 확인 페이지는 프레임 안에서 렌더링되지 않습니다. 방문자에게는 빈 프레임이나 거부된 프레임이 보입니다.
• fetch와 Accept: application/json으로 POST하면 방문자가 그 자리에 머물고, 결과가 임베드 안에 표시됩니다.

임베드 추가하기

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 샌드박스 안에서는 둘 다 실행할 수 없습니다. 허니팟과 스팸 점수 산정은 모든 POST에서 계속 실행됩니다.

허용 도메인

POST가 iframe 안에서 전송되므로 Ikiform에는 Wix 도메인이 아니라 프레임의 호스트가 보입니다. 확인하려면 게시된 페이지를 열고 임베드를 검사해 iframe의 src를 읽으세요.

• filesusr.com만 단독으로 추가하지 마세요. 다른 사람의 사이트를 포함해 그 호스트의 모든 사이트가 일치하게 됩니다.
• 프레임 호스트는 사이트 주소에서 파생되므로 새 도메인을 연결하면 바뀝니다. 도메인을 바꾼 뒤에는 다시 확인하세요.

테스트 체크리스트

1. 게시한 뒤 시크릿 창에서 실제 페이지를 여세요.
2. 필드를 정의한 상태에서 이메일을 비우고 제출하세요. 폼에 novalidate가 있으므로 Ikiform의 메시지가 필드 아래에 나타나야 합니다.
3. 실제 메시지를 제출하고 상태 줄에 "Thanks, we got it."이 표시되는지, 제출이 Ikiform에 나타나는지 확인하세요.
4. 프레임 호스트로 허용 도메인을 켜고 다시 제출하세요. 여전히 수신 목록에 들어가야 합니다.

문제 해결

관련 문서

• 순수 JavaScript인라인 오류를 표시하는 fetch.
• 사이트 빌더어떤 빌더에서든 작동하는 임베드.
• 허용 도메인출처를 비교하는 방식과 불일치 시 동작.
• 스팸 방지허니팟, 점수 산정, 사람 확인.