Formulario de contacto en modo oscuro
Un formulario de contacto en colores oscuros, con un bloque de estilo en la página. Usa la fuente del sistema y no carga un archivo de fuente.
Qué estás copiando
Esta plantilla es un formulario de contacto con un esquema de color oscuro escrito en un bloque de estilo de la página.
La pila de fuentes es system-ui y Segoe UI. El fragmento no carga un archivo de fuente y no llama a un servidor de fuentes.
Los colores están en el propio formulario: fondo oscuro, texto claro y un botón claro. No dependen del CSS de Formgong.
La vista previa de este sitio usa la misma idea, con la hoja de estilos del sitio, para que veas el contraste antes de copiar.
El envío es un POST de HTML normal. Los colores oscuros no cambian access_key, _lang ni botcheck.
Siempre oscuro, o seguir al sistema
El primer fragmento es oscuro todo el tiempo. Úsalo en una página que ya es oscura, o cuando quieras que el formulario siga oscuro dentro de una página clara.
El fragmento extra es claro por defecto y pasa a los mismos colores oscuros dentro de prefers-color-scheme: dark.
Esa media query sigue el ajuste del sistema del visitante. El fragmento no añade un botón de cambio, porque un cambio así necesita script y una elección guardada.
Si quieres un interruptor manual, déjalo en el control de tema que ya tenga tu sitio. No añadas un segundo esquema que choque, solo para este formulario.
Los inputs heredan la fuente. No hay @import ni un enlace a una hoja de estilos en otro dominio.
Entrega y límites
Las etiquetas se pueden traducir. Los nombres de los campos se quedan en name, email, phone y message para que Telegram siga siendo corto.
El honeypot usa un estilo pequeño para quedarse fuera de la pantalla tanto en el esquema claro como en el oscuro.
Turnstile es opcional y está comentado. Pega tu clave de sitio solo después de activar Turnstile en el formulario.
El gratuito permite 300 envíos al mes, los guarda 30 días en la UE, manda Telegram al momento y el email como resumen diario.
Formgong es el operador. support@formgong.com es la dirección de soporte.
Vista previa
Código del formulario
<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="es">
<label>Nombre <input type="text" name="name" autocomplete="name" required></label>
<label>Correo electrónico <input type="email" name="email" autocomplete="email" required></label>
<label>Teléfono <input type="tel" name="phone" autocomplete="tel"></label>
<label>Mensaje <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>Deja este campo vacío <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Opcional. Active Turnstile para este formulario, quite estas marcas de comentario y pegue la clave del sitio.
<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="es"></div>
-->
<button type="submit">Enviar</button>
</form>Claro por defecto, oscuro si el sistema lo está
<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="es">
<label>Nombre <input type="text" name="name" autocomplete="name" required></label>
<label>Correo electrónico <input type="email" name="email" autocomplete="email" required></label>
<label>Teléfono <input type="tel" name="phone" autocomplete="tel"></label>
<label>Mensaje <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>Deja este campo vacío <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Opcional. Active Turnstile para este formulario, quite estas marcas de comentario y pegue la clave del sitio.
<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="es"></div>
-->
<button type="submit">Enviar</button>
</form>Preguntas y respuestas
¿Chocará con el tema oscuro de mi sitio?
El formulario pinta su propio fondo. En una página oscura suele ir bien. Si tu tema ya da estilo a los inputs, revisa el contraste después de pegar.
¿Puedo usar el color de mi marca en el botón?
Sí. Cambia el fondo del botón en el bloque de estilo. No añadas una importación de fuente para imitar un tipo de letra de marca de un tercero.
¿El fragmento del sistema parpadea de claro a oscuro?
Empieza claro y luego el navegador aplica la media query. Quien prefiere colores oscuros debería ver las reglas oscuras sin una segunda petición.
¿El honeypot se ve en modo oscuro?
No debería. Está colocado fuera de la pantalla en una caja de un píxel. Si vuelves a dar estilo al formulario, conserva esa regla.