React-Kontaktformular-Integration (Vite- und Single-Page-Apps)
So fügen Sie Kontakt- und Feedbackformulare zu React Single-Page Applications (SPA) hinzu, die mit Vite oder Create React App erstellt wurden und über Honeypot-Spam-Abwehr und sofortige Posteingangsbenachrichtigungen verfügen.
1. Standard-React-Kontaktformularkomponente mit Vite
Diese leichtgewichtige React-Komponente verwendet Standard-React-Hooks (useState) und die Browser-Fetch-API, um direkt an Ihren öffentlichen Lugatu-Endpunkt zu senden. Keine externen Formularbibliotheken oder Backend-Server erforderlich.
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. Integration mit React Hook Form und Formik
Das Standard-JSON-Übermittlungsmodell von Lugatu lässt sich mühelos in Formularvalidierungsbibliotheken wie React Hook Form, Formik oder Zod integrieren. Übergeben Sie die serialisierten Werte direkt an das Nutzlastobjekt „Felder“.
// 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. Umgebungsvariablen und geheime Trennung in React
In Vite wird öffentlichen Variablen das Präfix VITE_ vorangestellt. Verwenden Sie VITE_LUGATU_FORM_ID für die öffentliche Formular-ID. Legen Sie Ihren Server-zu-Server-API-Schlüssel (lug_live_...) niemals im clientseitigen Quellcode oder in Repositorys offen.
Live-API-Schlüssel, die mit lug_live_ beginnen, sind ausschließlich für die Server-zu-Server-Ausführung reserviert. Jede mit einem Live-API-Schlüssel gesendete Browseranfrage wird mit HTTP 403 abgelehnt.
Sicherheits- und Authentifizierungsinvariante
Sicherheitsinvariante: Stellen Sie Live-API-Schlüsseln niemals VITE_ oder REACT_APP_ voran. Browser-Clients dürfen ausschließlich an öffentliche Endpunkte ohne API-Schlüssel übermitteln.
Fehlerbehebung und häufige Aufnahmefehler
Stellen Sie sicher, dass Sie an den öffentlichen Endpunkt übermitteln (https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions). Server-zu-Server-Endpunkte (POST /api/v1/forms/{id}/submissions) blockieren explizit Browser-Ursprünge.
Häufig gestellte Fragen
Kann ich React Hook Form oder Formik mit Lugatu verwenden?
Ja. Lugatu akzeptiert Standard-JSON mit einem Fields-Objekt. Jede React-Formularbibliothek kann ihre Werte serialisieren und an den öffentlichen Endpunkt übermitteln.
Sind Sie bereit, Ihren Formularendpunkt zu erstellen?
Starten Sie in Sekundenschnelle kostenlos. Keine Kreditkarte erforderlich.