PANDUAN INTEGRASI · REACT & SPA

Penyepaduan Borang Hubungan React (Vite & Apl Satu Halaman)

Cara menambah borang hubungan dan maklum balas pada Aplikasi Satu Halaman React (SPA) yang dibina dengan Vite atau Cipta Apl React, yang menampilkan pertahanan spam honeypot dan pemberitahuan peti masuk segera.

Projek Sambungkan React → Panduan Teroka Next.js

1. Komponen Borang Hubungan Reaksi Standard dengan Vite

Komponen React yang ringan ini menggunakan cangkuk React standard (useState) dan API Ambil penyemak imbas untuk menyerahkan terus ke titik akhir awam Lugatu anda. Tiada perpustakaan borang luaran atau pelayan bahagian belakang diperlukan.

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. Integrasi dengan React Hook Form dan Formik

Model penyerahan JSON standard Lugatu disepadukan dengan mudah dengan perpustakaan pengesahan borang seperti React Hook Form, Formik atau Zod. Hantarkan nilai bersiri terus ke dalam objek muatan medan.

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. Pembolehubah Persekitaran & Pemisahan Rahsia dalam Reaksi

Dalam Vite, pembolehubah awam diawali dengan VITE_. Gunakan VITE_LUGATU_FORM_ID untuk ID borang awam. Jangan sekali-kali dedahkan kunci API pelayan-ke-pelayan anda (lug_live_...) di dalam kod sumber atau repositori sisi klien.

warning

Kunci API langsung bermula dengan lug_live_ dikhaskan sepenuhnya untuk pelaksanaan pelayan-ke-pelayan. Sebarang permintaan penyemak imbas yang dihantar dengan kunci API langsung ditolak dengan HTTP 403.

Keselamatan & Pengesahan Invarian

Invarian Keselamatan: Jangan sekali-kali meletakkan awalan kekunci API langsung dengan VITE_ atau REACT_APP_. Pelanggan penyemak imbas mesti secara eksklusif menyerahkan kepada titik akhir awam tanpa kunci API.

Menyelesaikan masalah & Ralat Pengingesan Biasa

Penyerahan borang mengembalikan ralat CORS dalam konsol penyemak imbas

Pastikan anda menyerahkan kepada titik akhir awam (https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions). Titik akhir pelayan-ke-pelayan (POST /api/v1/forms/{id}/submissions) menyekat asal-usul penyemak imbas secara eksplisit.

Soalan Lazim

Bolehkah saya menggunakan React Hook Form atau Formik dengan Lugatu?

ya. Lugatu menerima JSON standard dengan objek medan. Mana-mana pustaka borang React boleh mensirikan nilainya dan menyerahkan kepada titik akhir awam.

Bersedia untuk membuat titik akhir borang anda?

Bermula secara percuma dalam beberapa saat. Tiada kad kredit diperlukan.

Mula Percuma →