Formulário de contacto em modo escuro
Um formulário de contacto em cores escuras, com um bloco de estilo na página. Usa a fonte do sistema e não carrega um ficheiro de fonte.
O que está a copiar
Este modelo é um formulário de contacto com um esquema de cores escuras escrito num bloco de estilo na página.
A pilha de fontes é system-ui e Segoe UI. O excerto não carrega um ficheiro de fonte e não chama um anfitrião de fontes.
As cores estão no próprio formulário: fundo escuro, texto claro e um botão claro. Não dependem do CSS do Formgong.
A pré-visualização neste site usa a mesma ideia, com a folha de estilos do site, para ver o contraste antes de copiar.
O envio é um POST de HTML normal. As cores escuras não mudam access_key, _lang nem botcheck.
Sempre escuro, ou seguir o sistema
O primeiro excerto é escuro o tempo todo. Use-o numa página que já é escura, ou quando quiser que o formulário fique escuro dentro de uma página clara.
O excerto extra é claro por omissão e muda para as mesmas cores escuras dentro de prefers-color-scheme: dark.
Essa media query segue a definição do sistema do visitante. O excerto não acrescenta um botão de alternância, porque uma alternância precisa de script e de uma escolha guardada.
Se quiser um interruptor manual, deixe-o no controlo de tema que o site já tenha. Não acrescente um segundo esquema em conflito, só para este formulário.
Os inputs herdam a fonte. Não há @import nem uma ligação para uma folha de estilos noutro domínio.
Entrega e limites
As etiquetas podem ser traduzidas. Os nomes dos campos ficam name, email, phone e message para o Telegram continuar curto.
O honeypot usa um estilo pequeno para ficar fora do ecrã tanto no esquema claro como no escuro.
O Turnstile é opcional e está comentado. Cole a chave do site só depois de ligar o Turnstile no formulário.
O gratuito permite 300 envios por mês, conserva-os 30 dias na UE, envia o Telegram de imediato e o email como resumo diário.
O Formgong é o operador. support@formgong.com é o endereço de apoio.
Pré-visualização
Código do formulário
<style>
.fg-dark {
font-family: system-ui, "Segoe UI", sans-serif;
color: #e8eaef;
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px;
display: grid;
gap: 12px;
max-width: 32rem;
}
.fg-dark label { display: grid; gap: 4px; }
.fg-dark input, .fg-dark textarea {
font: inherit;
color: inherit;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 8px 10px;
}
.fg-dark button {
font: inherit;
background: #e8eaef;
color: #161b22;
border: 0;
border-radius: 8px;
padding: 8px 14px;
}
</style>
<form class="fg-dark" 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>Claro por omissão, escuro se o sistema estiver
<style>
.fg-auto { font-family: system-ui, "Segoe UI", sans-serif; display: grid; gap: 12px; max-width: 32rem; }
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea, .fg-auto button { font: inherit; }
@media (prefers-color-scheme: dark) {
.fg-auto {
font-family: system-ui, "Segoe UI", sans-serif;
color: #e8eaef;
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px;
display: grid;
gap: 12px;
max-width: 32rem;
}
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea {
font: inherit;
color: inherit;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 8px 10px;
}
.fg-auto button {
font: inherit;
background: #e8eaef;
color: #161b22;
border: 0;
border-radius: 8px;
padding: 8px 14px;
}
}
</style>
<form class="fg-auto" 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
Isto vai chocar com o tema escuro do meu site?
O formulário pinta o seu próprio fundo. Numa página escura isso costuma correr bem. Se o tema já der estilo aos inputs, verifique o contraste depois de colar.
Posso usar a cor da marca no botão?
Sim. Mude o fundo do botão no bloco de estilo. Não acrescente uma importação de fonte para imitar um tipo de letra de marca de terceiros.
O excerto do sistema pisca de claro para escuro?
Começa claro e depois o navegador aplica a media query. Quem prefere cores escuras deve ver as regras escuras sem um segundo pedido.
O honeypot fica visível no modo escuro?
Não deve. Está colocado fora do ecrã numa caixa de um píxel. Se voltar a dar estilo ao formulário, mantenha essa regra.