GHID DE INTEGRARE · REACT & SPA

Integrarea formularului de contact React (aplicații Vite și o singură pagină)

Cum să adăugați formulare de contact și feedback la aplicațiile React Single-Page (SPA) create cu aplicația Vite sau Create React, cu apărare împotriva spamului de honeypot și notificări inbox instantanee.

Proiectul Connect React → Explorați Ghidul Next.js

1. Componenta formularului de contact standard React cu Vite

Această componentă React ușoară folosește cârlige React standard (useState) și API-ul Fetch de browser pentru a trimite direct către punctul final public Lugatu. Nu sunt necesare biblioteci de formulare externe sau servere backend.

src/components/ContactForm.tsx tsx

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. Integrare cu React Hook Form și Formik

Modelul de trimitere JSON standard Lugatu se integrează fără efort cu biblioteci de validare a formularelor precum React Hook Form, Formik sau Zod. Treceți valorile seriate direct în obiectul de încărcare utilă câmpuri.

useLugatuForm.ts typescript

// 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. Variabile de mediu și separare secretă în React

În Vite, variabilele publice sunt prefixate cu VITE_. Utilizați VITE_LUGATU_FORM_ID pentru ID-ul formularului public. Nu expuneți niciodată cheia dvs. API de la server la server (lug_live_...) în codul sursă sau în depozite la nivelul clientului.

warning

Cheile API live care încep cu lug_live_ sunt strict rezervate pentru execuția de la server la server. Orice solicitare de browser trimisă cu o cheie API live este respinsă cu HTTP 403.

Securitate și autentificare invariantă

Securitate invariabilă: nu prefixați niciodată cheile API live cu VITE_ sau REACT_APP_. Clienții de browser trebuie să trimită exclusiv către punctele finale publice fără chei API.

Depanare și erori frecvente de ingestie

Trimiterile de formulare returnează o eroare CORS în consola browserului

Asigurați-vă că trimiteți la punctul final public (https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions). Punctele finale de la server la server (POST /api/v1/forms/{id}/submissions) blochează în mod explicit originile browserului.

Întrebări frecvente

Pot folosi React Hook Form sau Formik cu Lugatu?

Da. Lugatu acceptă JSON standard cu un obiect fields. Orice bibliotecă de formulare React își poate serializa valorile și poate trimite la punctul final public.

Sunteți gata să vă creați punctul final al formularului?

Începeți gratuit în câteva secunde. Nu este necesar un card de credit.

Începe gratuit →