Gatsby: contact form is listed on Netlify but doesn't receive my AJAX requests

Question

I managed to configure everything as expected with Formik, and the AJAX requests seems fine (it shows me the success message if I enable it), but the Netlify form section is still empty (even if the form is listed and acknowledged by Netlify).

This is my contact component:

(I think the problem is on my ajax code under the onSubmit function)

import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import Layout from "../components/layout"
import SEO from "../components/seo"


const ContactForm = () => (
<Layout>
    <SEO title="Form with Formik" />
    <main class="page-contact-form">
    <h1>Do your booking</h1>
    <Formik
        initialValues={{ email: '', name: '', start: '', end: '', message: '' }}
        validate={values => {
            let errors = {};
            if (!values.email) {
                errors.email = 'Required';
            } else if (
                !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
            ) {
                errors.email = 'Invalid email address';
            }
            return errors;
        }}

    onSubmit={(values) => {
        fetch("/", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: ({
                "form-name": "contact",
                ...values
            })
        }).then(() => alert("Thank you!"))

        }}
    >
        {({ isSubmitting }) => (
        <Form name="contact" data-netlify="true" action="/grazie">
                <input type="hidden" name="form-name" value="contact" />
            <label>Name and Surname: <br />
                    <Field type="text" name="name" placeholder="Nome Cognome" />
                    <ErrorMessage name="name" component="div" />
            </label>
            <br />
            <label>Email: <br />
            <Field type="email" name="email" placeholder="Richiesto" />
            <ErrorMessage name="email" component="div" />
            </label>
            <br />

            <label>Start and End <br />

            <Field type="date" name="start" />
            <ErrorMessage name="start" />
            &nbsp;
            <Field type="date" name="end" />
            <ErrorMessage name="end" />
            </label>
                <br />
            <label>
                Message: <br />
                <Field type="text" name="message" />
                <ErrorMessage name="message" />
            </label>
            <br />
            <button type="submit" disabled={isSubmitting}>
                Submit
            </button>
        </Form>
        )}
    </Formik>
    </main>
</Layout>
)

export default ContactForm

Answer 1

In the fetch function in onsubmit, it looks like you're sending an object, but the content type is url encoded? Perhaps you need to serialize your object into url encoded format first. There's a host of solutions for that in this question. If you go with the top suggestion:

// https://stackoverflow.com/a/1714899/10340970
const serialize = function(obj) {
  var str = [];
  for (var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}


...
fetch("/", {
  method: "POST",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  body: serialize({
    "form-name": "contact",
    ...values
  })