Recibir mensajes de un sitio web de Vercel
Una implementación de Vercel puede publicar directamente en LittleReply desde HTML estático, React o Next.js. Configure el origen de producción exacto, decida cómo se deben probar las vistas previas y verifique la solicitud completa después de la implementación.
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.
Vista previa y producción separadas
Las URL de vista previa pueden protegerse o cambiarse para cada confirmación. Utilice una política de vista previa deliberada en lugar de permitir todos los nombres de host posibles de forma predeterminada.
La producción debe utilizar el dominio HTTPS canónico en metadatos, orígenes permitidos, redirecciones y devoluciones de llamadas de proveedores.
Evite un proxy sin servidor innecesario
Un formulario público puede publicarse directamente en el punto final alojado. Una función Vercel es apropiada cuando realmente se requiere una lógica de servidor confiable, pero agrega otro tiempo de ejecución, límite de falla y flujo de registro.
Verificar después de la implementación
Verifique la solicitud del navegador, el código de respuesta, el envío almacenado y el historial de entrega en el host real. Una compilación exitosa por sí sola no verifica los destinatarios en tiempo de ejecución ni las devoluciones de llamadas de los proveedores.
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
¿Necesito una función Vercel?
No. Los formularios estáticos y renderizados por el cliente pueden publicarse directamente en el extremo del formulario.
¿Deberían permitirse todas las URL de vista previa?
Prefiera una política de vista previa limitada e intencionada y pruebe el origen de producción canónico por separado.