Um formulário HTML para site estático, sem backend próprio

Alguém precisa receber os campos

HTML exibe a interface, mas não salva mensagens nem envia email sozinho. O Formgong assume essas tarefas. É uma opção para portfólios e páginas de serviços com campos de texto.

Se já existe um backend com regras específicas no seu aplicativo, você pode aproveitá-lo. Este exemplo evita criar outro só para contatos.

Prepare o formulário no painel

Crie um formulário no Formgong, confirme seu email e copie a chave na conexão do site. Troque fk_your_access_key. A chave é pública; a conta não confirmada pode reter notificações.

Adicione o código à página

Insira o exemplo na seção de contato. Adapte os estilos e rótulos, preservando os nomes dos campos. Esta versão envia texto, não arquivos.

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

O que faz os dados saírem da página

action define o destino, method="POST" o método e name identifica cada valor. Só um id não basta. Um telefone pode usar name="phone".

Deixe botcheck fora da tela e vazio. É uma armadilha para bots. Preenchê-lo pode gerar spam sem avisos.

Escolha a página seguinte

O padrão abre a página de resultado do Formgong. Para agradecer no seu site, informe a URL HTTPS completa no painel. O campo oculto _redirect também funciona; se o painel ignora URLs vindas do código, sua configuração tem prioridade.

Para ficar na mesma página, use fetch e estados visuais. Veja o exemplo no guia de diagnóstico.

Teste no endereço publicado

Envie uma mensagem identificável e confira o registro, a caixa de email e o spam. No celular, revise campos, botão e agradecimento. O guia de Telegram mostra um canal adicional. Destinatários e redirecionamentos podem mudar sem republicar o HTML.

Atualize a integração ao ativar proteção

Turnstile exige widget e cf-turnstile-response. O honeypot do exemplo não substitui isso. Pegue o código atual no painel. Se houver uma lista de domínios permitidos, inclua o domínio publicado; a prévia pode usar outro.