Formulário de contacto mínimo
Rótulos, três campos e um botão. Sem bloco de estilo. O browser desenha os controlos. O envio é o mesmo das outras bases.
O que está a copiar
Este modelo é o formulário de contacto sem bloco de estilo e sem classes utilitárias. O navegador desenha os controlos com o aspeto predefinido.
É útil quando quer ver o pedido com clareza, ou quando a sua própria folha de estilos vai fazer a pintura.
Os campos continuam a ser nome, email, um telefone opcional e uma mensagem. O botão envia um POST normal.
Não há framework, nem fonte, nem script. Se o CSS global voltar a dar estilo aos inputs, esse CSS aplica-se. Este ficheiro não luta contra ele.
A pré-visualização desta página também salta os estilos de cartão dos outros modelos, por isso os controlos ficam mais perto de um formulário sem estilo.
O que continua a ser preciso
Até um formulário nu precisa de access_key, _lang e botcheck. É assim que o Formgong reconhece o formulário, o idioma e o honeypot.
O honeypot fica oculto com um atributo style curto no seu contentor. É o único estilo do excerto. Sem ele, as pessoas podem preencher a armadilha.
O Turnstile está num comentário. O excerto extra é o mesmo formulário com essas linhas sem comentário e YOUR_TURNSTILE_SITE_KEY ainda por substituir.
Retirar o comentário não cria uma chave. Crie o widget na Cloudflare, ligue o Turnstile no formulário e depois cole a chave do site.
Um script comentado não corre. Deixe o comentário no lugar até querer mesmo o widget.
A mesma entrega dos modelos com estilo
O Telegram imprime os nomes dos campos a negrito. Mantenha-os curtos. Traduza só o texto que o visitante lê.
Sem _redirect, o Formgong mostra a sua página de agradecimento. Acrescente _redirect só como um URL https absoluto que lhe pertença.
O gratuito inclui 300 envios por mês, 30 dias de conservação, Telegram imediato e um resumo diário por email.
Os dados ficam guardados na UE. O Formgong opera o serviço. O endereço de apoio é support@formgong.com.
Quando o formulário nu funciona, pode envolvê-lo no seu próprio esquema. Não tem de começar por um modelo com estilo.
Pré-visualização
Código do formulário
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="pt"> <label>Nome <input type="text" name="name" autocomplete="name" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" required></label> <label>Telefone <input type="tel" name="phone" autocomplete="tel"></label> <label>Mensagem <textarea name="message" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Deixe este campo vazio <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <!-- Opcional. Ative o Turnstile neste formulário, retire estas marcas de comentário e cole a chave do sítio. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="pt"></div> --> <button type="submit">Enviar</button> </form>
O mesmo formulário com o Turnstile descomentado
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="pt"> <label>Nome <input type="text" name="name" autocomplete="name" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" required></label> <label>Telefone <input type="tel" name="phone" autocomplete="tel"></label> <label>Mensagem <textarea name="message" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Deixe este campo vazio <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> Opcional. Ative o Turnstile neste formulário, retire estas marcas de comentário e cole a chave do sítio. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="pt"></div> <button type="submit">Enviar</button> </form>
Perguntas e respostas
Porque é que o honeypot ainda tem um estilo?
Para a armadilha ficar fora do ecrã. Tudo o resto está sem estilo de propósito. Se retirar essa única regra, a armadilha fica visível.
O CSS do meu site parte o POST?
O CSS não muda o POST. Um estilo pode esconder o botão de envio, mas o que importa são os nomes dos campos e o URL de ação.
É mais pequeno por algum motivo?
Sim. É o mesmo pedido com menos pintura, para o poder largar numa página que já tem um desenho.
Preciso do campo de telefone?
Não. Apague essa etiqueta se não quiser um número de telefone. Deixe email se quiser um endereço de resposta na caixa de entrada.