Squarespace

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.

Adicione o code block

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.

2. Cole o formulário

   <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.

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.

<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. 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.

• 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

Relacionados

• Formulários HTMLRedirecionamentos, campos reservados e o honeypot.
• JavaScript purofetch com erros inline.
• Criadores de sitesO embed que funciona em qualquer criador.
• Domínios permitidosComo as origens são comparadas e o que acontece quando não correspondem.