# Wix

> Incorpore em um site Wix um formulário HTML que envia com fetch, porque o Wix roda HTML personalizado em um frame isolado que não consegue navegar a página.

O Wix Forms guarda os envios no Wix e não tem configuração para uma URL de action externa. Para usar o Ikiform, coloque seu próprio formulário em um elemento **Embed HTML**. O Wix roda esse código dentro de um iframe isolado (sandbox), servido a partir de um host separado `filesusr.com`, e isso define tudo o que vem abaixo.

## Por que o formulário envia com fetch

- O frame do Wix permite formulários, scripts, popups e acesso same-origin, mas não navegação no nível superior. `target="_top"` não consegue levar o visitante a uma página de agradecimento.
- Um envio de formulário normal carregaria o resultado dentro do pequeno frame, e as páginas de agradecimento, de erro e de verificação do Ikiform se recusam a renderizar dentro de frames. Os visitantes veriam um frame vazio ou recusado.
- Enviar com `fetch` e `Accept: application/json` mantém o visitante no lugar e mostra o resultado dentro do embed.

## Adicione o embed

### Passo 1: Adicione um elemento Embed HTML

No Wix Editor, abra **Add Elements** > **Embed Code** > **Embed HTML**. No Wix Studio, fica em **Embed & Social**. Escolha **Code** em vez de **Website address**.

### Passo 2: Cole o formulário

`Embed HTML`:

```html
<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>
```

O frame não herda as fontes nem as cores do seu site, então o bloco `<style>` as define. Ajuste para combinar com o seu site.

### Passo 3: Dimensione e publique

Arraste o elemento até ele ficar alto o bastante para caber os erros de campo e a linha de status, depois publique. O editor só mostra um placeholder para código personalizado, então teste no site publicado.

> A configuração **Custom Code** do site inteiro no Wix, que exige um plano premium e um domínio conectado, adiciona código ao head ou ao body da página. Ela não consegue colocar um formulário em um ponto específico do layout, então o elemento Embed HTML continua sendo o lugar do formulário.

## Configurações de spam

Deixe a verificação de spam do formulário desativada. A verificação humana do Ikiform precisa da página de verificação ou de um pequeno frame de ikiform.com, e nenhum dos dois roda dentro do sandbox do Wix. O honeypot e a pontuação de spam continuam rodando em todo envio.

## Domínios permitidos

O Ikiform vê o host do frame, não o seu domínio do Wix, porque o envio sai de dentro do iframe. Para descobri-lo, abra a página publicada, inspecione o embed e leia o `src` do iframe.

| Onde o formulário roda | Adicione em Allowed domains |
| --- | --- |
| O frame do embed | O host exato do `src` do iframe, como `www-example-com.filesusr.com` |
| Seu domínio do Wix ou domínio próprio | Não é necessário para o embed, já que o envio nunca sai dele |

- Nunca adicione `filesusr.com` sozinho. Todo site naquele host corresponderia, inclusive os de outras pessoas.
- O host do frame é derivado do endereço do seu site, então muda se você conectar um domínio novo. Confira de novo depois de trocar de domínio.

## Checklist de teste

1. Publique e abra a página no ar em uma janela anônima.
2. Com [campos](https://ikiform.com/pt-br/docs/fields.md) definidos, envie com o e-mail vazio. O formulário tem `novalidate`, então a mensagem do Ikiform deve aparecer abaixo do campo.
3. Envie uma mensagem real e confirme que a linha de status mostra "Thanks, we got it." e que o envio aparece no Ikiform.
4. Ative os domínios permitidos com o host do frame e envie de novo. O envio deve continuar chegando como recebido.

## Solução de problemas

| O que você vê | Por quê | Correção |
| --- | --- | --- |
| O embed fica em branco ou mostra uma página recusada depois do envio | O script não rodou, então o navegador enviou normalmente e tentou carregar a página do Ikiform dentro do frame | Confira se o script foi parar dentro do elemento e se o id do formulário é `contact`. |
| Os envios chegam em spam com `origin_mismatch` | O host do frame não está nos domínios permitidos, ou você listou o seu domínio do Wix no lugar | Adicione o host `filesusr.com` exato do `src` do iframe. |
| A linha de status diz `Complete the human check, then send the form again.` | A verificação de spam está definida como **Ikiform**, que não roda dentro do sandbox | Desative a verificação neste formulário. |
| A linha de status diz que não foi possível falar com o servidor | Um bloqueador de anúncios ou filtro de rede bloqueou a requisição. Algumas redes bloqueiam o próprio `filesusr.com`. | Teste em outra rede ou em uma janela anônima sem extensões. |
| As mensagens de erro ficam cortadas | O elemento é mais baixo que o formulário | Deixe o elemento mais alto no editor. |

## Relacionados

- [JavaScript puro](https://ikiform.com/pt-br/docs/guides/javascript.md): `fetch` com erros inline.
- [Criadores de sites](https://ikiform.com/pt-br/docs/guides/site-builders.md): O embed que funciona em qualquer criador.
- [Domínios permitidos](https://ikiform.com/pt-br/docs/spam.md#allowed-domains): Como as origens são comparadas e o que acontece quando não correspondem.
- [Proteção contra spam](https://ikiform.com/pt-br/docs/spam.md): Honeypot, pontuação e a verificação humana.