Webflow

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 traz de volta os blocos do Webflow.

Configure o formulário

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.

   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.

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

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:

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

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.

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

• 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

Relacionados

• Criadores de sitesO embed que funciona em qualquer criador.
• Formulários HTMLRedirecionamentos, campos reservados e o honeypot.
• Domínios permitidosComo as origens são comparadas e o que acontece quando não correspondem.
• ErrosTodos os códigos de erro, com causa e correção.