Menú
Contacto

Una plantilla de formulario de contacto HTML gratuita para personalizar

Un formulario de contacto general para una página HTML o sitio web comercial.

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

contacto HTML

Nombre, correo electrónico y mensaje: lo esencial para iniciar una conversación.

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. Responderemos pronto.">
  <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 mi 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. Coloque el formulario en la página de contacto de su sitio web.
  2. Elija una dirección verificada para recibir notificaciones.
  3. Un campo de correo electrónico le permite responder a los visitantes sin publicar su dirección.
  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

¿El formulario funciona sin PHP?

Sí. Su navegador envía campos al servicio; el procesamiento ocurre en el backend compartido.

¿Mi dirección está visible en el código?

El código utiliza una clave de formulario público sin mostrar los destinatarios configurados en su cuenta.