Netlify Forms

import React, { useState, useRef } from "react";
import styles from "./Contact.module.css";

import Container from "../Container";

// Use in Netlify form to encode body data
function encode(data) {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&");
}

export default function Contact() {
  // Track form values
  const [formState, setFormState] = useState({});
  const [messageSent, setMessageSent] = useState(false);
  const formRef = useRef();

  console.log(formState);
  console.log("MESSAGE SENT: ", messageSent);

  // Reset form fields
  const handleReset = () => {
    formRef.current.reset();
  };

  // Track users input and display it
  const handleChange = (e) => {
    setFormState({ ...formState, [e.target.name]: e.target.value });
  };

  // Handle form submit with Netlify forms
  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    console.log(form);
    console.log(form.getAttribute("name"));
    console.log(formState);
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": form.getAttribute("name"),
        ...formState,
      }),
    })
      .then(() => {
        setMessageSent(true);
        handleReset();
        setFormState({});
        setTimeout(() => {
          setMessageSent(false);
        }, 3000);
        console.log("FINISHED");
      })
      .catch((error) => alert(error));
  };

  return (
    <section className={styles.section}>
      <Container>
        <h2>Send an inquiry</h2>
        <p>
          By using the form below you can contact us and tell us, what you are
          interested about. We will answer all of your questions as soon as
          possible. We kindly ask you, that you fill the form with genuine
          information, otherwise your inquiry will not be sent!
        </p>
        <form
          name="contact"
          method="POST"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          onSubmit={handleSubmit}
          ref={formRef}
        >
          {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
          <input type="hidden" name="form-name" value="contact" />
          <p hidden>
            <label>
              Don’t fill this out:{" "}
              <input name="bot-field" onChange={handleChange} />
            </label>
          </p>
          <div className={styles.inputContainer}>
            <label htmlFor="name">Name</label>
            <input
              type="text"
              id="name"
              name="name"
              required
              onChange={handleChange}
            />
          </div>
          <div className={styles.inputContainer}>
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              required
              onChange={handleChange}
            />
          </div>
          <div className={styles.inputContainer}>
            <label htmlFor="phone">Phone</label>
            <input
              type="text"
              id="phone"
              name="phone"
              required
              onChange={handleChange}
            />
          </div>
          <div className={styles.inputContainer}>
            <label htmlFor="subject">Subject</label>
            <input
              type="text"
              id="subject"
              name="subject"
              required
              onChange={handleChange}
            />
          </div>
          <div className={styles.contentContainer}>
            <label htmlFor="content">Content</label>
            <textarea
              name="content"
              id="content"
              cols="30"
              rows="10"
              required
              onChange={handleChange}
            />
          </div>
          <div className={styles.buttonContainer}>
            <button type="submit" name="submit-form">
              Get Started
            </button>
            {messageSent && (
              <p
                style={{
                  lineHeight: "1.625",
                  marginTop: "20px",
                  textAlign: "center",
                }}
              >
                Message sent!
              </p>
            )}
          </div>
        </form>
      </Container>
    </section>
  );
}