React

// components/WaitlistForm.jsx
import { useState } from 'react';

export default function WaitlistForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('https://waitlister.me/s/YOUR_WAITLIST_KEY', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ email, name })
      });

      if (response.ok) {
        setSuccess(true);
        setEmail('');
        setName('');
      } else {
        throw new Error('Submission failed');
      }
    } catch (err) {
      setError('Failed to join waitlist. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return <div className="success">Thanks! You're on the list.</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Your email"
        required
      />
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Your name (optional)"
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Joining...' : 'Join Waitlist'}
      </button>
      {error && <div className="error">{error}</div>}
    </form>
  );
}

// components/WaitlistForm.tsx
import { useState, FormEvent, ChangeEvent } from 'react';

interface FormData {
  email: string;
  name: string;
}

interface WaitlistFormProps {
  onSuccess?: () => void;
  className?: string;
}

export default function WaitlistForm({ onSuccess, className }: WaitlistFormProps) {
  const [formData, setFormData] = useState<FormData>({ email: '', name: '' });
  const [loading, setLoading] = useState<boolean>(false);
  const [success, setSuccess] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(
        `https://waitlister.me/s/${process.env.REACT_APP_WAITLIST_KEY}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: new URLSearchParams(formData)
        }
      );

      if (response.ok) {
        setSuccess(true);
        setFormData({ email: '', name: '' });
        onSuccess?.();
      } else {
        throw new Error('Submission failed');
      }
    } catch (err) {
      setError('Failed to join waitlist. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return (
      <div className="success">
        <h3>You're on the list!</h3>
        <p>We'll notify you when we launch.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className={className}>
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Your email"
        required
      />
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Your name (optional)"
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Joining...' : 'Join Waitlist'}
      </button>
      {error && <div className="error">{error}</div>}
    </form>
  );
}

// npm install react-hook-form
import { useForm } from 'react-hook-form';

type FormData = {
  email: string;
  name?: string;
};

export default function WaitlistForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting }, reset } = useForm<FormData>();
  const [success, setSuccess] = useState(false);

  const onSubmit = async (data: FormData) => {
    const response = await fetch('https://waitlister.me/s/YOUR_KEY', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams(data as any)
    });

    if (response.ok) {
      setSuccess(true);
      reset();
    }
  };

  if (success) return <div>Success! You're on the list.</div>;

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email address'
          }
        })}
        placeholder="Your email"
      />
      {errors.email && <span>{errors.email.message}</span>}
      
      <input {...register('name')} placeholder="Your name (optional)" />
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Joining...' : 'Join Waitlist'}
      </button>
    </form>
  );
}

const handleSubmit = async (data: FormData) => {
  // Get URL parameters
  const urlParams = new URLSearchParams(window.location.search);
  
  const payload = {
    ...data,
    utm_source: urlParams.get('utm_source') || '',
    utm_campaign: urlParams.get('utm_campaign') || '',
    referral_code: urlParams.get('ref') || '',
    signup_page: window.location.pathname,
    user_agent: navigator.userAgent
  };

  await fetch('https://waitlister.me/s/YOUR_KEY', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(payload)
  });
};

Development: localhost:3000
Staging: staging.yourdomain.com
Production: yourdomain.com

For Vercel: your-app.vercel.app
For Netlify: your-app.netlify.app