Integración

Agregar un formulario de contacto a Astro

Astro puede enviar un formulario HTML nativo sin JavaScript de cliente y luego mejorarlo progresivamente cuando un resultado en línea sea útil. El punto final publicado sigue siendo el mismo para la salida estática y renderizada por el servidor.

LittleReply · Revisado en 20 de octubre de 2026

Crear un formulario gratis

Un ejemplo copiable

Astro

---
// Contact.astro: this form does not require a server adapter.
---
<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.

Comience con HTML nativo

Utilice una acción POST, controles con nombre y la clave de formulario público. El respaldo sigue siendo utilizable si JavaScript falla o está deshabilitado.

Agregue un script de cliente solo para comentarios pendientes, errores en línea y confirmación sin navegación.

Coincide con el esquema publicado

Astro no cambia el contrato de admisión. La configuración publicada aplica los nombres de los campos, los valores requeridos, la propiedad de los archivos y las comprobaciones de abuso.

Probar el sitio generado

Verifique la salida construida en el origen implementado. Confirme que los scripts se carguen, que la acción del formulario sea HTTPS y que el envío aparezca antes de evaluar la entrega de la notificación.

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

Personalizar campos y estilos

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.

Fuentes

Receta de formularios astro

Preguntas frecuentes

¿El formulario necesita una ruta Astro API?

No. El HTML nativo puede publicarse directamente en el punto final alojado.

¿Puedo agregar JavaScript más tarde?

Sí. La mejora progresiva puede preservar el respaldo de POST nativo en funcionamiento.

Del ejemplo a tu formulario

Crear un formulario gratis