React Integration Guide

npx create-react-app my-staticbox-app
cd my-staticbox-app
npm start

// hooks/useContactForm.js
import { useState } from 'react';

export const useContactForm = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState(null);

  const submitForm = async (formData) => {
    setIsSubmitting(true);
    setError(null);
    
    try {
      const response = await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
        method: 'POST',
        body: formData,
      });
      
      if (response.ok) {
        setIsSubmitted(true);
      } else {
        throw new Error('Failed to submit form');
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { isSubmitting, isSubmitted, error, submitForm };
};

// components/ContactForm.js
import React from 'react';
import { useContactForm } from '../hooks/useContactForm';

export const ContactForm = () => {
  const { isSubmitting, isSubmitted, error, submitForm } = useContactForm();

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    submitForm(formData);
  };

  if (isSubmitted) {
    return (
      <div className="success-message">
        <h3>Thank you!</h3>
        <p>Your message has been sent successfully.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" required />
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Send Message'}
      </button>
      {error && <p className="error">{error}</p>}
    </form>
  );
};

npm install react-hook-form

// components/ContactForm.js
import { useForm } from 'react-hook-form';

export const ContactForm = () => {
  const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm();

  const onSubmit = async (data) => {
    const formData = new FormData();
    Object.keys(data).forEach(key => {
      formData.append(key, data[key]);
    });

    const response = await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      reset();
      alert('Message sent successfully!');
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} placeholder="Name" />
      <input {...register('email', { required: true })} type="email" placeholder="Email" />
      <textarea {...register('message', { required: true })} placeholder="Message" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Send'}
      </button>
    </form>
  );
};