MWONGOZO WA UTANGAMANO · REACT & SPA

Mwitikio wa Fomu ya Mawasiliano (Vite & Programu za Ukurasa Mmoja)

Jinsi ya kuongeza fomu za mawasiliano na maoni kwenye React Applications za Ukurasa Mmoja (SPA) zilizoundwa kwa Vite au Create React App, inayoangazia ulinzi wa taka kwenye honeypot na arifa za kikasha papo hapo.

Unganisha Mradi wa React → Gundua Mwongozo wa Next.js

1. Kipengele cha Fomu ya Mawasiliano ya Kawaida ya React na Vite

Kipengele hiki chepesi cha React hutumia vilabu vya kawaida vya React (useState) na API ya Kuleta kivinjari ili kuwasilisha moja kwa moja kwenye kituo chako cha umma cha Lugatu. Hakuna maktaba za fomu za nje au seva za nyuma zinazohitajika.

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. Kuunganishwa na Fomu ya React Hook na Formik

Muundo wa kawaida wa uwasilishaji wa JSON wa Lugatu huunganishwa bila kujitahidi na maktaba za uthibitishaji wa fomu kama vile React Hook Form, Formik, au Zod. Pitisha thamani zilizosasishwa moja kwa moja kwenye kitu cha upakiaji cha uga.

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. Vigeu vya Mazingira & Utengano wa Siri katika React

Katika Vite, viambishi vya umma vimeainishwa na VITE_. Tumia VITE_LUGATU_FORM_ID kwa kitambulisho cha fomu ya umma. Usiwahi kufichua ufunguo wako wa API wa seva-kwa-seva (lug_live_...) ndani ya msimbo wa chanzo wa upande wa mteja au hazina.

warning

Vifunguo vya API moja kwa moja vinavyoanza na lug_live_ vimehifadhiwa kikamilifu kwa utekelezaji wa seva hadi seva. Ombi lolote la kivinjari lililotumwa kwa ufunguo wa moja kwa moja wa API limekataliwa kwa HTTP 403.

Tofauti ya Usalama na Uthibitishaji

Invariant ya Usalama: Usiwahi kuamsha funguo za API moja kwa moja ukitumia VITE_ au REACT_APP_. Wateja wa kivinjari lazima wawasilishe kwa sehemu za mwisho za umma bila funguo za API.

Utatuzi na Hitilafu za Kawaida za Kumeza

Mawasilisho ya fomu hurejesha hitilafu ya CORS kwenye kiweko cha kivinjari

Hakikisha kuwa unawasilisha kwa kituo cha umma (https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions). Miisho ya seva hadi seva (POST /api/v1/forms/{id}/submissions) huzuia kwa uwazi asili za kivinjari.

Maswali Yanayoulizwa Mara Kwa Mara

Je, ninaweza kutumia React Hook Form au Formik na Lugatu?

Ndiyo. Lugatu inakubali JSON ya kawaida na kipengee cha uga. Maktaba yoyote ya fomu ya React inaweza kusawazisha thamani zake na kuwasilisha kwa mwisho wa umma.

Je, uko tayari kuunda mwisho wa fomu yako?

Anza bila malipo kwa sekunde chache. Hakuna kadi ya mkopo inahitajika.

Anza Bure →