Formulário de contacto HTML
Um formulário de contacto em HTML simples. O browser envia-o. Sem backend, sem framework e sem fonte.
O que está a copiar
Este modelo é um formulário de contacto em HTML simples. O navegador envia-o com um POST normal. Não há chamada fetch, nem framework, nem passo de compilação.
Cole a marcação numa página estática, numa incorporação do Webflow ou em qualquer sítio que aceite um elemento de formulário. A página não precisa do seu próprio servidor.
O formulário pede um nome, um endereço de email e uma mensagem. O telefone é opcional. Essas palavras são também os nomes dos campos.
O Telegram imprime o nome de cada campo a negrito por cima da resposta. Nomes curtos como name, email e message continuam legíveis num telemóvel.
Aqui não se recolhe um ficheiro, um pagamento nem uma pontuação do Formgong. É apenas uma forma de um visitante chegar até si.
Como funciona o envio
A ação do formulário é a origem do Formgong mais /submit, com o método POST. Um access_key oculto nomeia o formulário.
A chave é pública e pertence à página. Permite que um visitante envie uma submissão. Com ela não se mudam os destinatários nem se liga um webhook.
Um campo oculto _lang leva o idioma da página, por exemplo en. O Formgong usa-o na página de agradecimento e no texto de erro.
Não traduz a mensagem do visitante. Escreva as etiquetas visíveis no idioma da página e mantenha os nomes dos campos em inglês.
O honeypot é um input com o nome botcheck. Fica fora do ecrã, com tabindex -1 e autocomplete desligado. As pessoas deixam-no vazio.
Um envio que preenche botcheck fica guardado como spam e não é entregue. O visitante continua a ver o caminho normal de sucesso.
O Turnstile é opcional. O excerto deixa o widget dentro de um comentário. Não há chave do site neste modelo.
Se ligar o Turnstile para o formulário, retire as marcas de comentário e cole a sua própria chave do site. Até lá, essas linhas não fazem nada.
Sem um _redirect oculto, o Formgong mostra a sua própria página de agradecimento. O excerto extra define _redirect para um endereço https.
Substitua https://example.com/thanks por uma página que controle. Um caminho relativo não é aceite.
Depois de colar
Crie um formulário no painel, ou use o botão desta página, e substitua fk_your_access_key se copiou o marcador de posição.
Ligue o Telegram nas definições do formulário quando quiser a mensagem no telemóvel. No plano gratuito, o email é um resumo diário e o Telegram é imediato.
Envie um teste a partir da página publicada. Um ficheiro aberto como file:// não é um teste fiável do formulário em funcionamento.
O plano gratuito conserva os envios durante 30 dias. Os planos pagos podem conservá-los por mais tempo. O Formgong guarda-os na UE.
O plano gratuito inclui 300 envios por mês. O spam não conta para esse número.
Se precisar de um formulário de clínica, emprego ou orçamento, use um modelo de setor mais abaixo neste site. Esta página é apenas o esquema simples de contacto.
As perguntas sobre o serviço vão para support@formgong.com. O Formgong é o operador do serviço. Este modelo não nomeia nenhuma outra empresa como operador.
Pré-visualização
Código do formulário
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <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 redirecionamento de agradecimento
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="pt"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <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
Este formulário precisa de JavaScript?
Não. O navegador envia o formulário por si. O modelo AJAX é o que fica na página com fetch.
Para onde vão as mensagens?
Para a caixa de entrada do Formgong, e para o email e o Telegram quando os ligar. Escreva para support@formgong.com se a pergunta for sobre o próprio serviço.
Posso acrescentar mais campos?
Sim. Acrescente inputs com nomes curtos, como city. O Telegram imprime esse nome por cima da resposta. Não mude o nome de access_key nem de botcheck.
A pré-visualização envia uma mensagem real?
Não. A pré-visualização desta página apenas mostra uma nota. Nada é enviado até colocar o excerto no seu próprio site com uma chave de acesso real.