# Webflow

> Envie um Form Block do Webflow para o Ikiform com um action personalizado, mantenha os estados de sucesso e erro do Webflow com um script curto e permita o seu site de staging no webflow.io.

O Form Block do Webflow pode enviar para qualquer URL. Aponte o action dele para o seu endpoint do Ikiform e o formulário mantém o layout e os estilos que você criou no Designer, enquanto o Ikiform valida, filtra spam, armazena, envia e-mails e dispara webhooks.

## O que um action personalizado muda

- O Webflow só processa um formulário quando ele é o destino. Com um action personalizado, o navegador envia direto para o Ikiform, então o envio não aparece nos envios de formulário do Webflow e o Webflow não manda e-mail de notificação.
- Os destinos próprios do Webflow não funcionam junto com um action personalizado. Remova-os em **Send to** antes de adicionar o Ikiform.
- Os blocos de sucesso e erro do Webflow (`.w-form-done` e `.w-form-fail`) e a configuração de redirecionamento do próprio formulário param de funcionar, porque o Webflow nunca vê o resultado. Os visitantes caem na página de agradecimento do Ikiform ou na sua URL de **Redirect after submit**. O [passo 4](#keep-success-state) traz de volta os blocos do Webflow.

## Configure o formulário

### Passo 1: Aponte o formulário para o Ikiform

Selecione o formulário dentro do Form Block e abra o painel **Settings**. Em **Send to**, escolha um action personalizado, cole o seu endpoint em **Action** e defina **Method** como **POST**.

`Action`:

```text
https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx
```

Deixar o método como GET faz o navegador abrir o endpoint como uma página, que responde `404 not_found`. O Ikiform só aceita envios.

### Passo 2: Dê nome aos campos

A configuração **Name** de cada input vira o nome do campo no Ikiform. O Webflow a preenche a partir do rótulo, então você recebe nomes como `Name`, `Email` e `Field 2`. Renomeie para os ids que você quer ver, como `name`, `email` e `message`.

- Se você definir [campos](https://ikiform.com/pt-br/docs/fields.md) no formulário do Ikiform, os nomes precisam ser exatamente iguais aos ids. Ids são snake_case em minúsculas, então `Email` e `email` são campos diferentes.
- Remova qualquer elemento reCAPTCHA do formulário. O Ikiform não o verifica, e o valor `g-recaptcha-response` chegaria como um campo extra. Use a [verificação de spam](https://ikiform.com/pt-br/docs/spam.md#human-check) do Ikiform.

### Passo 3: Adicione um honeypot

Adicione um Input ao formulário, defina o **Name** como `_gotcha` e esconda-o com **Display: none** no painel Style. Em **Custom attributes**, adicione `tabindex` com valor `-1` e `autocomplete` com valor `off` para que teclados e gerenciadores de senha o ignorem. Em um plano de site pago, você pode colar isto em um Code Embed dentro do formulário:

`Code Embed`:

```html
<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
```

### Passo 4: Escolha o que acontece depois do envio

A opção mais simples é uma página de agradecimento. Crie uma no Webflow, publique e cole a URL completa em **Redirect after submit**, nas configurações do formulário do Ikiform.

### Mantenha os blocos de sucesso e erro do Webflow

Para continuar na página, envie com `fetch` e alterne os blocos do Webflow você mesmo. Cole isto em **Page settings** > **Custom code** > **Before </body> tag**, ou no código do rodapé do site para cobrir todos os formulários. Ele mostra a mensagem de erro do Ikiform dentro do bloco de erro e usa o **Waiting text** do botão durante o envio.

`Before </body> tag`:

```html
<script>
  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form) => {
    const wrapper = form.closest(".w-form");
    const done = wrapper?.querySelector(".w-form-done");
    const fail = wrapper?.querySelector(".w-form-fail");
    const button = form.querySelector('[type="submit"]');

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button?.value;
      if (button) {
        button.disabled = true;
        button.value = button.dataset.wait || label;
      }
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json" },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          form.style.display = "none";
          if (fail) fail.style.display = "none";
          if (done) done.style.display = "block";
          return;
        }
        const text = fail?.querySelector("div") ?? fail;
        if (text) text.textContent = result.error.message;
        if (fail) fail.style.display = "block";
      } catch {
        if (fail) fail.style.display = "block";
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>
```

> Custom code e o elemento Code Embed exigem um plano de site pago ou um plano de Workspace, e nenhum dos dois roda no Designer. Publique para vê-los funcionando.

O script envia com `fetch`, então um formulário com a verificação de spam definida como **Ikiform** responde `403 challenge_required` em vez de mostrar a página de verificação. Use o script com a verificação desativada, ou dispense o script e deixe o navegador enviar normalmente, o que roda a verificação sem código extra.

## Domínios permitidos

Se você definir domínios permitidos, liste todos os endereços onde o formulário é publicado. Subdomínios de um domínio listado já correspondem.

| Onde o formulário roda | Adicione em Allowed domains |
| --- | --- |
| Seu domínio próprio | `example.com`, que também cobre `www.example.com` |
| Staging do Webflow | `your-site.webflow.io` |
| O canvas do Designer | Nada. Actions e código personalizados não rodam ali. |

- Nunca adicione `webflow.io` sozinho. Todo site naquele host corresponderia, inclusive os de outras pessoas.

## Checklist de teste

1. Publique no seu domínio de staging `webflow.io`. Formulários com action personalizado só enviam a partir do site publicado.
2. Envie o formulário e abra os envios do formulário no Ikiform. O novo envio deve aparecer como recebido, não como spam.
3. Confira se os nomes dos campos correspondem ao que você definiu no passo 2 e se o honeypot não aparece: nomes que começam com `_` nunca são armazenados.
4. Confirme que você chega à sua página de agradecimento, ou que vê o bloco de sucesso do Webflow se adicionou o script.
5. Publique no seu domínio próprio e envie mais uma vez a partir dele.

## Solução de problemas

| O que você vê | Por quê | Correção |
| --- | --- | --- |
| Página `404 not_found` depois do envio | **Method** está como GET, então o navegador abriu o endpoint como um link | Defina **Method** como **POST** e publique de novo. |
| A página de agradecimento do Ikiform em vez da mensagem de sucesso do Webflow | O bloco de sucesso do Webflow só funciona quando o Webflow processa o formulário | Defina **Redirect after submit**, ou adicione o script do passo 4. |
| Os envios chegam no filtro de spam com `origin_mismatch` | A página que enviou não está nos domínios permitidos do formulário | Adicione o host da tabela acima. Com **Reject** escolhido, os mesmos envios recebem `403 origin_not_allowed`. |
| `422 validation_failed` listando um campo desconhecido | Um nome de campo como `Email` ou `g-recaptcha-response` não está na definição de campos do formulário | Renomeie o input para o id do campo, ou remova o elemento reCAPTCHA. |
| O script não faz nada | Você está testando no Designer, o site não tem plano pago, ou o action não começa com `https://ikiform.com/f/` | Teste no site publicado e confira se o **Action** não tem espaços. |
| O bloco de erro diz `Complete the human check, then send the form again.` | A verificação de spam está definida como **Ikiform** e o script envia com `fetch` | Desative a verificação neste formulário, ou remova o script. |

## Relacionados

- [Criadores de sites](https://ikiform.com/pt-br/docs/guides/site-builders.md): O embed que funciona em qualquer criador.
- [Formulários HTML](https://ikiform.com/pt-br/docs/html.md): Redirecionamentos, campos reservados e o honeypot.
- [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.
- [Erros](https://ikiform.com/pt-br/docs/errors.md): Todos os códigos de erro, com causa e correção.