Crear un formulario de contacto sin servidor SMTP — Guía completa | Lugatu
Descubra cómo recibir las consultas de sus visitantes de forma segura sin gestionar contraseñas SMTP, sin servidores de correo y sin problemas de entregabilidad.
1. Los inconvenientes de los formularios SMTP tradicionales
Las conexiones SMTP en puertos 25 o 587 sufren bloqueos en plataformas serverless y Jamstack. Además, las contraseñas vencidas generan pérdidas inadvertidas de clientes.
Nunca guarde credenciales SMTP en repositorios Git ni en código del cliente. Utilice extremos seguros de ingesta HTTPS.
2. Paso 1: El formulario HTML con protección honeypot
Estructure su formulario con HTML semántico. Añada un campo honeypot oculto que los visitantes reales dejan vacío pero los bots completan.
<!-- Vanilla HTML Form with Lugatu Form Endpoint -->
<form id="inquiry-form">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Work Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Project Details</label>
<textarea id="message" name="message" rows="4" required></textarea>
<!-- Built-in Honeypot Bot Trap -->
<input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />
<button type="submit">Send Inquiry</button>
</form>
<script>
document.getElementById('inquiry-form').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const data = new FormData(form);
const payload = {
fields: {
name: data.get('name'),
email: data.get('email'),
message: data.get('message')
},
honeypot: data.get('_gotcha') || ''
};
const res = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify(payload)
});
if (res.ok) {
alert('Inquiry sent successfully!');
form.reset();
}
});
</script>3. Paso 2: Envío seguro mediante la API Fetch
Intercepte el evento submit con JavaScript y transmita los datos en formato JSON a la API de Lugatu con confirmación en tiempo real.
4. Modos de notificación flexibles y preservación duradera
Incluso si se alcanzan las cuotas de correo electrónico saliente, todos los envíos permanecen conservados en la bandeja de entrada de su espacio de trabajo. Puede elegir alertas instantáneas, resúmenes diarios o resúmenes ejecutivos semanales por formulario.
Invariante de seguridad y autenticación
Norma antispam: Utilice siempre campos honeypot en extremos públicos. Las claves privadas de API nunca deben escribirse en código visible en el navegador.
Solución de problemas y errores comunes de ingesta
Lugatu autoriza solicitudes JSON desde cualquier origen en /api/v1/public/forms/.... Verifique que la URL sea idéntica.
Preguntas frecuentes
¿Funciona este método en GitHub Pages o Netlify?
Sí, totalmente. Como Lugatu asume el procesamiento backend, el formulario opera idénticamente en cualquier hosting estático.
¿Listo para crear el punto final de su formulario?
Comience gratis en segundos. No se requiere tarjeta de crédito.