Cree un formulario de contacto responsivo con HTML y CSS
Un formulario de contacto pulido sigue siendo legible, accesible mediante teclado y recuperable en pantallas estrechas. Comience con HTML semántico, luego aplique estilo al espaciado, el enfoque, los errores y los estados de los botones sin ocultar el comportamiento útil del navegador.
Crear un formulario gratisUn ejemplo copiable
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Contact form</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="en" data-success="Your message has been stored. We will reply soon.">
<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="fq_name">Your name *</label>
<input type="text" name="name" id="fq_name" required autocomplete="name" />
<label for="fq_email">Your email address *</label>
<input type="email" name="email" id="fq_email" required autocomplete="email" />
<label for="fq_message">Your message *</label>
<textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>
<button type="submit">Send my message</button>
<p role="status" aria-live="polite"></p>
</form>
<!-- Accessible AJAX errors and duplicate-safe retries -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>
</body></html>la clave YOUR_ACCESS_KEY es un marcador de posición para reemplazar con la clave pública de su formulario. El código no contiene clave de servidor ni dirección de destino.
Construya primero la formulario semántica
Utilice una etiqueta visible para cada control, un encabezado lógico, valores de autocompletar adecuados y un botón con una acción clara. Mantenga las instrucciones junto al campo que describen.
Diseño para pantallas estrechas
Deje que los controles ocupen el ancho disponible, utilice una longitud de línea legible y apile filas de varias columnas antes de que las etiquetas o los mensajes de error se vuelvan saturados.
Hacer visible el estado
Proporciona un potente indicador de enfoque del teclado, no depende únicamente del color para detectar errores y distingue los estados pendiente, aceptado y de reintento. Pruebe el zoom y el orden del teclado, así como el diseño visual.
Verifique la plantilla en su sitio web actual
Pruebe con 360 píxeles de ancho, con zoom del navegador y usando Tab. Verifique los campos largos, los bordes de enfoque y los mensajes de error. La demostración contiene una clave de marcador de posición: la vista previa no crea un formulario público para usted.
Después de la publicación, envíe una solicitud reconocible y verifíquela en su espacio de trabajo. Si el CSS funciona pero no llega nada, inspecciona la acción, los nombres de los campos y el historial de entrega. Diagnosticar presentación y procesamiento por separado.
Fuentes
Preguntas frecuentes
¿Puede el texto del marcador de posición reemplazar una etiqueta?
No. Los marcadores de posición desaparecen al escribir y, a menudo, tienen un contraste menor.
¿Los errores de validación deben usar solo rojo?
No. Emparejar color con texto y relaciones programáticas con el control afectado.
¿La plantilla HTML CSS es gratuita?
Puede ver y personalizar la plantilla sin una cuenta. El ingreso de LittleReply utiliza el plan y los límites de su espacio de trabajo, con un plan gratuito para comenzar.