Agregar un formulario de contacto a un sitio web estático
Un sitio estático puede enviar directamente a un punto final de formulario alojado. La página permanece estática mientras el servicio valida campos, almacena envíos aceptados, aplica controles de abuso y programa destinos configurados.
Crear un formulario gratisUn ejemplo copiable
<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="contact-name">Nombre completo *</label>
<input type="text" name="name" id="contact-name" required />
<label for="contact-email">Correo electrónico *</label>
<input type="email" name="email" id="contact-email" required />
<label for="contact-message">Mensaje *</label>
<textarea name="message" id="contact-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>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.
Mantenga la implementación estática
Utilice una acción HTML normal para la integración más pequeña o busque un resultado en la página. Ninguna de las opciones requiere una función sin servidor en su propio repositorio.
Restringir orígenes permitidos al sitio de producción y hosts de vista previa intencionales. Los controles de origen complementan los controles de validación y abuso; no convierten una clave de formulario público en un secreto.
Vistas previas de prueba y producción por separado
Los nombres de host de vista previa cambian con frecuencia. Decida si desea permitir un dominio de vista previa estable o realizar una prueba a través del panel antes de abrir un comodín amplio.
Después de la implementación, verifique la página de producción exacta, el estado de respuesta, el mensaje almacenado y el historial de notificaciones. Un éxito local no prueba que los orígenes y los destinatarios de la producción estén configurados.
Manejar fallas sin perder información
Mantenga la entrada de los visitantes sobre 422, 429 y errores de red. Deshabilite los clics duplicados mientras una solicitud esté pendiente y reutilice el identificador de intento solo para el mismo contenido.
Pruebe la plantilla antes de crear una cuenta.
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.
LittleReply<!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.
Preguntas frecuentes
¿Un formulario estático necesita JavaScript?
No. Una POST nativa funciona sin JavaScript. JavaScript es útil para una respuesta en línea y manejo de reintentos.
¿Puedo usarlo con páginas de GitHub?
Sí, si el origen implementado está permitido y la página puede publicarse en el punto final HTTPS.