netlify-forms-complete.jsx

import React, { useState } from "react"

const formEncode = data => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

const RegistrationForm = () => {
  const [email, setEmail] = useState("")

  const handleSubmit = e => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: formEncode({ "form-name": "register", email: email }),
    })
      .then(() => alert("Success!"))
      .catch(error => alert(error))

    e.preventDefault()
  }

  return (
    <form
      name="register"
      data-netlify="true"
      data-netlify-honeypot="sneaky-sneaky"
      onSubmit={handleSubmit}
    >
      <input type="hidden" name="form-name" value="register" />
      <input name="sneaky-sneaky" />
      <input
        type="text"
        name="email"
        placeholder="Enter your email"
        onChange={e => setEmail(e.target.value)}
      ></input>
      <button type="submit">Register</button>
    </form>
  )
}

export default RegistrationForm