У меня есть компонент формы, который я повторно использую на веб-сайте, этот компонент принимает имя формы в качестве параметров. Сайт построен с использованием Gatsby и размещен на Netlify.
Всякий раз, когда я пытаюсь заполнить форму и нажимаю кнопку отправки, в консоли появляется ошибка 404, форма не отправляется, но я вижу все формы в формах Netlify. Я не уверен, где моя ошибка, когда я проверяю в chrome, я вижу, что атрибут data-netlify="true" отсутствует в моем интерфейсе, но он есть в коде.
Мои функции
import React, { useState } from "react"
import { useForm } from "react-hook-form"
function encode(data) {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&")
}
const ContactForm = ({ data, name, type, index }) => {
const { register, handleSubmit, errors, reset } = useForm({
mode: "onBlur",
})
const [feedbackState, setFeedbackState] = useState(null)
const [errorState, setErrorState] = useState(null)
const [requestType, setRequestType] = useState(null)
const [state, setState] = useState({})
const handleChange = (e) => {
{
setState({ ...state, [e.target.name]: e.target.value })
}
}
const onSubmit = (data, e) => {
e.preventDefault()
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({
"form-name": {name},
...state,
}),
})
.then((response) => {
setFeedbackState(true)
reset()
})
.catch((error) => {
setErrorState(true)
})
}
Моя форма:
if (feedbackState) {
return (
<div className="callout success">
<h3>Vad roligt att du är intresserad av våra produkter!</h3>
<p>
Vi kommer höra av oss inom kort till {state.fName} {state.lName} på{" "}
{state.email}.
</p>
</div>
)
} else {
return (
<>
{console.log("form navn er, ", name)}
<form
id="contactMe"
onSubmit={handleSubmit(onSubmit)}
name={name}
method="post"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value={name} />
<div hidden>
<label>
Don’t fill this out:{' '}
<input name="bot-field" onChange={handleChange} />
</label>
</div> <fieldset class="grid-x grid-margin-x">
<legend class="cell">
<h3>{data.formTitle}</h3>
</legend>
<div class="cell medium-6">
<div class="form-field">
<label htmlFor="fName">
{data.firstName}
<span
id="error-required-field"
style={{
display:
errors.fName && errors.fName.type === "required"
? "block"
: "none",
}}
>
{data.firstNameRequired}
</span>
<span style={{ display: "none" }}>
<label>Request type: </label>
<input
type="text"
id="requestType"
onChange={handleChange}
name="requestType"
value={type}
ref={register({ required: true })}
/>
</span>
</label> ....more form values
Пример того, как я могу обработать мою форму, можно увидеть здесь, я попробовал console.logging all Приписан внутри моей формы и может видеть их всех
<ContactForm
name="Tilgjenlighetsanalys"
data={data.auditsForm}
type="Liten analys"
/>
Есть идеи о том, что я делаю неправильно?
Редактировать: я вижу на своей вкладке chrome сеть, когда я отправляю форму, имя формы устанавливается как [объект объекта] вместо фактического имени формы 