ENTEGRASYON REHBERİ · REACT & TEK SAYFA UYGULAMALARI

React İletişim Formu Entegrasyonu (Vite & Tek Sayfa Uygulamaları)

Vite veya Create React App ile geliştirdiğiniz React projelerinize spam korumalı, anında bildirim sağlayan iletişim ve geri bildirim formları ekleyin.

React Projeni Bağla → Next.js Rehberini İncele

1. Vite ile Standart React İletişim Bileşeni

Bu hafif React bileşeni standart useState kancaları ve yerleşik Fetch API kullanarak doğrudan Lugatu genel form endpoint’ine veri gönderir. Harici form kütüphanesine veya backend sunucusuna ihtiyaç duymaz.

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; // Botları sessizce filtrele

    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('Mesaj iletilemedi');
      }

      setStatus('success');
      setFormData({ name: '', email: '', message: '', _gotcha: '' });
    } catch (err: any) {
      setStatus('error');
      setErrorMessage(err.message || 'Gönderim hatası. Lütfen tekrar deneyin.');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      <div>
        <label htmlFor="react-name" className="block text-sm font-semibold mb-1">Ad Soyad</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">E-posta Adresi</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">Mesajınız</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 tuzağı -->
      <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' ? 'Gönderiliyor...' : 'Mesajı Gönder'}
      </button>

      {status === 'success' && (
        <p className="text-sm text-green-700 font-medium">Teşekkürler! Mesajınız başarıyla iletildi.</p>
      )}
      {status === 'error' && (
        <p className="text-sm text-red-600">{errorMessage}</p>
      )}
    </form>
  );
}

2. React Hook Form ve Formik ile Entegrasyon

Lugatu standart JSON yapısı sayesinde React Hook Form veya Zod doğrulama şemalarıyla mükemmel uyum sağlar. Doğrulanmış veriyi doğrudan fields nesnesine aktarabilirsiniz.

useLugatuForm.ts typescript

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 Uygulamalarında Ortam Değişkenleri ve Gizlilik

Vite projelerinde istemci değişkenleri VITE_ önekiyle tanımlanır. Genel form kimliği için VITE_LUGATU_FORM_ID kullanın. Sunucu API anahtarınızı (lug_live_...) asla React istemci kodlarına eklemeyin.

warning

lug_live_ ile başlayan anahtarlar sadece sunucudan sunucuya çağrılar içindir; tarayıcıdan gelen istekler HTTP 403 ile engellenir.

Güvenlik ve Kimlik Doğrulama Standardı

Güvenlik Kuralı: lug_live_ API anahtarlarını asla VITE_ veya REACT_APP_ önekleriyle tanımlamayın. Tarayıcı istemcileri sadece genel form endpoint’ini kullanmalıdır.

Sorun Giderme ve Yaygın Hatalar

Tarayıcı konsolunda CORS hatası alınması

Genel form endpoint’ine (https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions) istek attığınızdan emin olun. Sunucudan sunucuya endpoint tarayıcı kökenlerini engeller.

Sıkça Sorulan Sorular

React Hook Form veya Formik ile Lugatu kullanılabilir mi?

Evet. Lugatu standart JSON fields yapısını kabul eder. Herhangi bir React form kütüphanesiyle kolayca entegre edilebilir.

Kendi formunuzu oluşturmaya hazır mısınız?

Saniyeler içinde ücretsiz başlayın. Kredi kartı gerektirmez.

Ücretsiz Başlayın →