Menú
Contacto

Plantilla de formulario de contacto responsivo en HTML y CSS

Integre un formulario con etiquetas explícitas, estados de carga y presentación móvil.

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

Contacto responsivo

Un ejemplo accesible que se adapta a pantallas pequeñas y grandes.

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="Su mensaje ha sido almacenado.">
  <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">Tu nombre *</label>
  <input type="text" name="name" id="fq_name" required autocomplete="name" />

  <label for="fq_email">Su dirección de correo electrónico *</label>
  <input type="email" name="email" id="fq_email" required autocomplete="email" />

  <label for="fq_message">tu mensaje *</label>
  <textarea name="message" id="fq_message" required maxlength="5000" 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. El CSS suministrado es independiente; no se necesita ninguna biblioteca de estilos.
  2. Pruebe el formulario con un teclado y una pantalla de móvil.
  3. Los errores se anuncian en un área de estado accesible.
  4. Cree su formulario usando "Usar esta plantilla". Sus campos y sus personalizaciones se trasladarán.
  5. Verifique el destinatario, publique el formulario y luego reemplace la clave en el código copiado.
  6. Envíe una prueba identificada e inspeccione el mensaje almacenado y luego su entrega.

Preguntas frecuentes

¿Necesito Bootstrap o Tailwind?

No. El ejemplo exportado incluye los estilos necesarios.

¿El formulario funciona sin JavaScript?

El formulario HTML conserva el envío nativo. JavaScript agrega errores y comentarios de carga.