Menú
Crear mi primer formulario
Contacto

Un formulario de contacto oscuro con enfoque claro y estados de error

Haga coincidir una interfaz oscura conservando etiquetas legibles, enfoque de teclado visible y comentarios de validación comprensibles.

Vista previa local: los cambios permanecen en este navegador. No se envía ningún mensaje o correo electrónico.

Contacto oscuro

Un formulario para sitios oscuros.

1 / 1
LittleReply
Personaliza la plantilla
Etiquetas y campos obligatorios

Agregue su identidad, propósito, base aplicable, retención, contacto de derechos y enlace de privacidad. Este ejemplo no es un consejo legal.

HTML/CSS independiente
<!doctype html>
<html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Formulario de contacto</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://littlereply.com/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="es" data-success="Hemos recibido tu mensaje.">
  <input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />

  <label for="dark-name">Nombre completo *</label>
  <input type="text" name="name" id="dark-name" required />

  <label for="dark-email">Correo electrónico *</label>
  <input type="email" name="email" id="dark-email" required />

  <label for="dark-message">Mensaje *</label>
  <textarea name="message" id="dark-message" required rows="5"></textarea>

  <button type="submit">Enviar mensaje</button>
  <p role="status" aria-live="polite"></p>
</form>
<!-- Errores AJAX accesibles y reintentos sin duplicados -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>
</body></html>

Reemplace YOUR_ACCESS_KEY con la clave pública de su formulario. El código incluye sus estilos y una mejora AJAX; el HTML POST nativo también funciona sin JavaScript.

Instalar esta plantilla

  1. Verifique el texto, el borde, el marcador de posición, el enfoque y el contraste de error de forma independiente.
  2. Pruebe el formulario con un zoom del 200% y en una ventana móvil estrecha.
  3. Mantenga la acción POST nativa incluso cuando JavaScript agregue comentarios en línea.
  4. Select “Use this template” to carry the current configuration into signup.
  5. Verify recipients, publish the form, and replace the example key in the generated code.
  6. Send a recognizable test and inspect storage and delivery separately.

Preguntas frecuentes

¿Esta plantilla envía un envío real en vista previa?

No. La vista previa pública permanece en su navegador. Cree y publique un formulario antes de usar su clave pública en un sitio en vivo.

¿Puedo cambiar los campos y el estilo?

Sí. Personalice las etiquetas, los requisitos, los colores, el texto de confirmación y el esquema publicado antes de instalar el código generado.