Integración del formulario de contacto de React (aplicaciones Vite y de una sola página)
Cómo agregar formularios de contacto y comentarios a las aplicaciones de página única (SPA) de React creadas con Vite o la aplicación Create React, que incluyen defensa contra spam honeypot y notificaciones instantáneas en la bandeja de entrada.
1. Componente de formulario de contacto de React estándar con Vite
Este componente liviano de React utiliza ganchos de React estándar (useState) y la API Fetch del navegador para enviar directamente a su punto final público de Lugatu. No se requieren bibliotecas de formularios externos ni servidores backend.
import React, { useState } from 'react';
export function ContactForm() {
const [formData, setFormData] = useState({ name: '', email: '', message: '', _gotcha: '' });
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
const [errorMessage, setErrorMessage] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (formData._gotcha) return; // Silent discard for automated bot traps
setStatus('submitting');
setErrorMessage('');
try {
const response = 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({
fields: {
name: formData.name,
email: formData.email,
message: formData.message,
},
honeypot: formData._gotcha,
}),
});
if (!response.ok) {
throw new Error('Failed to deliver message');
}
setStatus('success');
setFormData({ name: '', email: '', message: '', _gotcha: '' });
} catch (err: any) {
setStatus('error');
setErrorMessage(err.message || 'Submission error. Please try again.');
}
};
return (
<form onSubmit={handleSubmit} className="space-y-4 max-w-md">
<div>
<label htmlFor="react-name" className="block text-sm font-semibold mb-1">Your Name</label>
<input
id="react-name"
type="text"
required
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full border rounded-xl p-2.5"
/>
</div>
<div>
<label htmlFor="react-email" className="block text-sm font-semibold mb-1">Email Address</label>
<input
id="react-email"
type="email"
required
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full border rounded-xl p-2.5"
/>
</div>
<div>
<label htmlFor="react-message" className="block text-sm font-semibold mb-1">Message</label>
<textarea
id="react-message"
rows={4}
required
value={formData.message}
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
className="w-full border rounded-xl p-2.5"
/>
</div>
<!-- Honeypot spam defense -->
<input
type="text"
name="_gotcha"
value={formData._gotcha}
onChange={(e) => setFormData({ ...formData, _gotcha: e.target.value })}
style={{ display: 'none' }}
tabIndex={-1}
autoComplete="off"
/>
<button
type="submit"
disabled={status === 'submitting'}
className="btn-primary-editorial py-2.5 px-6"
>
{status === 'submitting' ? 'Sending...' : 'Send Message'}
</button>
{status === 'success' && (
<p className="text-sm text-green-700 font-medium">Thank you! Your message was delivered.</p>
)}
{status === 'error' && (
<p className="text-sm text-red-600">{errorMessage}</p>
)}
</form>
);
}2. Integración con React Hook Form y Formik
El modelo de envío JSON estándar de Lugatu se integra fácilmente con bibliotecas de validación de formularios como React Hook Form, Formik o Zod. Pase los valores serializados directamente al objeto de carga útil de los campos.
// React Hook Form submission handler
const onSubmit = async (data: FormValues) => {
const res = await fetch(`https://www.lugatu.com/api/v1/public/forms/${import.meta.env.VITE_LUGATU_FORM_ID}/submissions`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fields: data }),
});
return res.ok;
};3. Variables de entorno y separación de secretos en React
En Vite, las variables públicas tienen el prefijo VITE_. Utilice VITE_LUGATU_FORM_ID para el ID del formulario público. Nunca exponga su clave API de servidor a servidor (lug_live_...) dentro del código fuente o repositorios del lado del cliente.
Las claves de Live API que comienzan con lug_live_ están estrictamente reservadas para la ejecución de servidor a servidor. Cualquier solicitud del navegador enviada con una clave API activa se rechaza con HTTP 403.
Invariante de seguridad y autenticación
Invariante de seguridad: nunca anteponga claves API activas con VITE_ o REACT_APP_. Los clientes del navegador deben enviar exclusivamente a puntos finales públicos sin claves API.
Solución de problemas y errores comunes de ingesta
Asegúrese de enviarlo al punto final público (https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions). Los puntos finales de servidor a servidor (POST /api/v1/forms/{id}/submissions) bloquean explícitamente los orígenes del navegador.
Preguntas frecuentes
¿Puedo usar React Hook Form o Formik con Lugatu?
Sí. Lugatu acepta JSON estándar con un objeto de campos. Cualquier biblioteca de formularios de React puede serializar sus valores y enviarlos al punto final público.
¿Listo para crear el punto final de su formulario?
Comience gratis en segundos. No se requiere tarjeta de crédito.