ПОСІБНИК З ІНТЕГРАЦІЇ · REACT & SPA

Інтеграція контактної форми React (програми Vite та односторінкові програми)

Як додати форми контактів і зворотного зв’язку до односторінкових програм React (SPA), створених за допомогою Vite або Create React App, із захистом від спаму honeypot і миттєвими сповіщеннями про вхідні.

Connect React Project → Ознайомтеся з посібником з Next.js

1. Стандартний компонент контактної форми React із Vite

Цей полегшений компонент React використовує стандартні перехоплювачі React (useState) і API Fetch браузера для надсилання безпосередньо до вашої загальнодоступної кінцевої точки Lugatu. Не потрібні зовнішні бібліотеки форм або внутрішні сервери.

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. Інтеграція з React Hook Form і Formik

Стандартна модель подання JSON Lugatu легко інтегрується з бібліотеками перевірки форм, такими як React Hook Form, Formik або Zod. Передайте серіалізовані значення безпосередньо в об’єкт корисного навантаження полів.

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. Змінні середовища та розділення секретів у React

У Vite публічні змінні мають префікс VITE_. Використовуйте VITE_LUGATU_FORM_ID для загальнодоступного ідентифікатора форми. Ніколи не розкривайте міжсерверний ключ API (lug_live_...) у вихідному коді чи сховищах на стороні клієнта.

warning

Ключі Live API, які починаються з lug_live_, суворо зарезервовані для міжсерверного виконання. Будь-який запит браузера, надісланий із активним ключем API, відхиляється через HTTP 403.

Інваріант безпеки та автентифікації

Інваріант безпеки: ніколи не додавайте префікс VITE_ або REACT_APP_ до активних ключів API. Клієнти браузера повинні надсилати виключно загальнодоступні кінцеві точки без ключів API.

Усунення несправностей і поширені помилки передавання

Надсилання форм повертає помилку CORS у консолі браузера

Переконайтеся, що ви надсилаєте дані в публічну кінцеву точку (https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions). Кінцеві точки між серверами (POST /api/v1/forms/{id}/submissions) явно блокують джерела браузера.

Часті запитання

Чи можу я використовувати React Hook Form або Formik з Lugatu?

так Lugatu приймає стандартний JSON з об’єктом fields. Будь-яка бібліотека форм React може серіалізувати свої значення та відправляти в публічну кінцеву точку.

Готові створити кінцеву точку форми?

Почніть безкоштовно за лічені секунди. Кредитна картка не потрібна.

Почніть безкоштовно →