React form

import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState('');
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    setSubmitting(true);
    setStatus('Sending…');

    const body = new FormData(form);

    try {
      const response = await fetch('https://api.surveyowl.co/v1/submit/YOUR_FORM_PUBLIC_KEY', {
        method: 'POST',
        body,
      });
      const result = await response.json();
      const error = typeof result.error === 'string'
        ? result.error
        : result.error?.message;

      if (!response.ok) throw new Error(error || 'Could not send the form.');

      form.reset();
      setStatus('Thanks — your message was sent.');
    } catch (error) {
      setStatus(error.message);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" required />

      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />

      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />

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

      <p role="status">{status}</p>
    </form>
  );
}

import ContactForm from './ContactForm';

export default function ContactPage() {
  return (
    <main>
      <h1>Contact us</h1>
      <ContactForm />
    </main>
  );
}