# Squarespace

> Cole um formulário HTML em um code block do Squarespace. HTML puro funciona em todos os planos; adicionar JavaScript exige o plano Core ou superior.

O Form block do Squarespace guarda os envios no Squarespace e os manda para as conexões que ele suporta. Ele não tem configuração para uma URL de action externa. Um Code block no modo HTML renderiza o seu próprio formulário na página, então ele pode enviar direto para o Ikiform.

| Plano | O que um code block consegue rodar |
| --- | --- |
| Basic | HTML e CSS. Scripts e iframes não são renderizados, então use o formulário simples. |
| Core, Plus, Advanced | HTML, CSS e JavaScript. Você pode adicionar a versão aprimorada. |

## Adicione o code block

### Passo 1: Insira um Code block

Edite a página, adicione um bloco e escolha **Code**. Defina **Mode** como **HTML** e desative **Display Source**; caso contrário, o formulário aparece como texto.

### Passo 2: Cole o formulário

`Code block`:

```html
<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` reaproveita o estilo de botão do seu site. `font: inherit` e `currentColor` pegam a fonte e a cor de texto da seção, então o formulário combina com seções claras e escuras.

### Passo 3: Crie a página de agradecimento

Adicione uma página em **Not linked** para que ela fique fora da navegação e use a URL completa dela como `_redirect`. Ou defina-a como **Redirect after submit** nas configurações do formulário e remova o input oculto.

`_redirect` só é seguido quando o formulário tem domínios permitidos que incluem o domínio da página. Sem eles, os visitantes veem a página de agradecimento hospedada do Ikiform.

## Continuar na página (Core ou superior)

Para mostrar o resultado sem sair da página, cole este script abaixo do formulário, no mesmo code block. Ele envia com `fetch`, escreve a mensagem do Ikiform na linha de status abaixo do botão e ignora o `_redirect`. O formulário continua enviando normalmente se o script não carregar.

`Code block, abaixo do formulário`:

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

Os erros de campo são escritos na mesma linha, com o nome do campo na frente, como `email: This field is required`. Para ter uma mensagem abaixo de cada campo, use os espaços de [JavaScript puro](https://ikiform.com/pt-br/docs/guides/javascript.md). Um formulário com a verificação de spam **Ikiform** deve manter a versão simples, já que envios com `fetch` recebem `403 challenge_required` em vez da página de verificação.

## Domínios permitidos

O Squarespace serve todo site em um domínio próprio da plataforma, além de qualquer domínio que você conecte.

| Onde o formulário roda | Adicione em Allowed domains |
| --- | --- |
| Domínio da plataforma | `your-site.squarespace.com` |
| Domínio conectado | `example.com`, que também cobre `www.example.com` |

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

## Checklist de teste

1. Abra a página em uma janela anônima. Code blocks podem não ser renderizados enquanto você está logado, mesmo que os visitantes os vejam.
2. Envie o formulário no domínio da plataforma e no seu domínio conectado, e confirme que os dois envios aparecem no Ikiform.
3. Confira se você chega à sua página de agradecimento em Not linked, e não à do Ikiform.
4. No plano Basic, confirme que o formulário continua enviando. Ele não precisa de script.

## Solução de problemas

| O que você vê | Por quê | Correção |
| --- | --- | --- |
| O código aparece na página como texto | **Display Source** está ativado, ou **Mode** não é HTML | Defina **Mode** como **HTML** e desative **Display Source**. |
| O script aprimorado nunca roda | O site está no plano Basic, em que scripts em code blocks não são renderizados | Mantenha o formulário simples, ou faça upgrade para o Core. |
| A página de agradecimento do Ikiform em vez da sua | Sem domínios permitidos, ou o `_redirect` usa `http:` ou outro domínio | Adicione seus domínios, ou defina **Redirect after submit**. |
| 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`. |
| O formulário parece sem estilo no editor, mas aparece certo para os visitantes | Code blocks nem sempre são renderizados enquanto você está logado | Confira a página em uma janela anônima. |

## Relacionados

- [Formulários HTML](https://ikiform.com/pt-br/docs/html.md): Redirecionamentos, campos reservados e o honeypot.
- [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.