Menú
Crear mi primer formulario
Integración

Construya un formulario HTML sin PHP

Un formulario HTML no puede enviar correo electrónico por sí solo, pero puede publicar campos en un servidor de formulario alojado. LittleReply valida y almacena los envíos aceptados, luego rastrea las notificaciones de correo electrónico elegibles por separado, para que su sitio y diseño existentes permanezcan en su lugar.

LittleReply · Revisado en

Crear un formulario gratis

Un ejemplo copiable

HTML
<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.

Elija dónde se procesa el formulario

Un script PHP funciona cuando opera alojamiento del lado del servidor y desea poseer validación, controles de abuso, entrega de correo electrónico, registro y recuperación. Una API personalizada brinda un control similar con la misma responsabilidad operativa.

Un backend de formulario alojado permite que la página mantenga su HTML y CSS. La acción del formulario o una solicitud de recuperación envía campos con nombre a un punto final publicado mientras los destinatarios y la configuración privada permanecen fuera del navegador.

Instalar y verificar el formulario.

Cree un formulario, publique su esquema de campo y reemplace YOUR_ACCESS_KEY con su clave de formulario pública. Esa clave identifica un punto final de admisión; no otorga acceso a los mensajes almacenados ni a la configuración de la cuenta.

Envíe una prueba reconocible, confirme que aparezca en la bandeja de entrada privada e inspeccione el historial de notificaciones por separado. HTTP 202 significa que el envío fue almacenado. No prueba que un correo electrónico haya llegado a la bandeja de entrada de destino.

Diagnosticar fallas comunes

Los envíos de HTML nativo requieren POST y controles con atributos de nombre. Las restricciones de origen pueden rechazar un archivo abierto directamente con file://, así que pruebe a través de un servidor local o el sitio implementado.

  • 404: verifique la clave pública y el estado del formulario.
  • 422: hacer que los nombres de los campos enviados coincidan con el esquema publicado.
  • 429: revisión de tarifas y límites del plan.
  • Almacenado pero sin correo electrónico: inspeccione el destinatario, la configuración del proveedor y el historial de entrega.

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.

1 / 1
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.

Preguntas frecuentes

¿Puede HTML enviar un correo electrónico por sí solo?

No. HTML envía datos a un servidor o servicio que maneja el almacenamiento y la entrega de correo electrónico.

¿Necesito implementar un servidor?

No. Un backend alojado maneja la entrada mientras su sitio web mantiene su alojamiento actual.

Del ejemplo a tu formulario

Crear un formulario gratis