A Gatsby contact form that moves house with you.

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form>
  <fieldset>
    <legend>Contact us</legend>
    <label>
      Name (optional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Message
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Website
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Send message</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

import * as React from "react";

// No src/api/ function. No host form feature. Nothing to migrate later.
export default function ContactPage() {
  const [sent, setSent] = React.useState(false);

  async function submit(event) {
    event.preventDefault();
    await fetch("https://mailcontact.app/api/forms/your-form-id", {
      method: "POST",
      body: new FormData(event.target),
    });
    setSent(true);
  }

  if (sent) return <p>Thanks. We'll be in touch.</p>;

  return (
    <form onSubmit={submit}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="[email protected]" required />
      <textarea name="message" placeholder="What's on your mind?" required />
      <input name="company_website" type="text" tabIndex={-1} autoComplete="off"
        style={{ position: "absolute", left: "-10000px" }} aria-hidden="true" />

      <button>Send</button>
    </form>
  );
}