React Forms

import { useEffect, useRef } from 'react';

function ContactForm() {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://codasite.ai/forms-embed.js';
    script.setAttribute('data-form', 'cf_xxxxx');
    containerRef.current?.appendChild(script);

    return () => {
      // Cleanup on unmount
      script.remove();
    };
  }, []);

  return <div ref={containerRef} />;
}

export default ContactForm;

import { useState } from 'react';

function ContactForm() {
  const [status, setStatus] = useState('idle');
  const FORM_ID = 'cf_xxxxx';

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('submitting');

    const formData = new FormData(e.target);
    const data = {
      _formId: FORM_ID,
      name: formData.get('name'),
      email: formData.get('email'),
      message: formData.get('message'),
    };

    try {
      const res = await fetch('https://codasite.ai/forms/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });

      const result = await res.json();

      if (result.success) {
        setStatus('success');
        e.target.reset();
      } else {
        setStatus('error');
      }
    } catch (error) {
      setStatus('error');
    }
  };

  if (status === 'success') {
    return <p>Thanks! We'll be in touch soon.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />

      <button type="submit" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Sending...' : 'Send'}
      </button>

      {status === 'error' && (
        <p>Something went wrong. Please try again.</p>
      )}
    </form>
  );
}

export default ContactForm;

import { useForm } from 'react-hook-form';

function ContactForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm();
  const FORM_ID = 'cf_xxxxx';

  const onSubmit = async (data) => {
    const res = await fetch('https://codasite.ai/forms/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ _formId: FORM_ID, ...data }),
    });

    const result = await res.json();
    if (result.success) {
      alert('Form submitted!');
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} placeholder="Name" />
      {errors.name && <span>Name is required</span>}

      <input {...register('email', { required: true, pattern: /^S+@S+$/i })} placeholder="Email" />
      {errors.email && <span>Valid email required</span>}

      <textarea {...register('message', { required: true })} placeholder="Message" />
      {errors.message && <span>Message is required</span>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Send'}
      </button>
    </form>
  );
}