Гэтсби: контактная форма указана в Netlify, но не получает мои запросы AJAX - PullRequest
Новая
       18

Гэтсби: контактная форма указана в Netlify, но не получает мои запросы AJAX

0 голосов
/ 15 апреля 2019

Мне удалось все настроить, как и ожидалось, с Formik, и запросы AJAX кажутся нормальными (показывает мне сообщение об успехе, если я его включаю), но раздел формы Netlify все еще пуст (даже если форма перечислена и подтверждена Netlify).

Это мой контактный компонент:

(я думаю, проблема в моем коде ajax в функции onSubmit) 

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

1 Ответ

1 голос
/ 15 апреля 2019

В функции выборки в onsubmit похоже, что вы отправляете объект, но тип содержимого закодирован по URL? Возможно, вам нужно сначала сериализовать ваш объект в кодированный формат URL. В этом вопросе есть множество решений . Если вы идете с верхним предложением: 

// 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
  })
...