I’m trying to add Netlify form to my Gastby project, where form is made using Formik. I use all instructions, but it doesn’t appear in Form section on Netlify.
I tried to use netlify
and data-netlify=true
each on it’s own a now have both in myHTML <form …>
definition.
I have a name
attribute on the opening <form>
tag. I don’t include extended symbols like @
in my<form ...>
and the name
in the opening <form>
tag is unique on my site. Every input in the form has a unique “name” attribute. Form request is “POST”. Please help I don’t get what I’m doing wrong!
The form is in a modal window, but I didn’t find any specific rules about this case.
https://allacroix.netlify.app/ - site name.
here is my code at form containing component:
import React from "react"
import './question.scss'
import { useFormik } from 'formik';
import { validate, encode } from '../../functions'
const Question = ({ closeModal }) => {
const handleSubmit = values => {
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "question", ...values })
})
.then(() => {
closeModal();
alert("Сообщение отправлено!");
})
.catch(error => alert(error));
// e.preventDefault();
};
const formik = useFormik({
initialValues: {
qname: '',
qemail: '',
qtext: '',
},
validate,
onSubmit: handleSubmit,
});
return (
<div className="question-wrapper">
<form
onSubmit={formik.handleSubmit}
name="question"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
netlify
>
<input
type="hidden"
name="form-name"
value="question"
></input>
<div className="halfed">
{
formik.touched.qname && formik.errors.qname
? formik.errors.qname
: null
}
</div>
<input
type="text"
id="qname"
name="qname"
value={formik.values.qname}
placeholder="Имя"
{...formik.getFieldProps('qname')}
/>
<div className="halfed">
{
formik.touched.qemail && formik.errors.qemail
? formik.errors.qemail
: null
}
</div> <input
type="email"
id="qemail"
name="qemail"
title="Please enter your e-mail"
value={formik.values.qemail}
placeholder="e-mail"
{...formik.getFieldProps('qemail')}
required
/>
<div>
{
formik.touched.qtext && formik.errors.qtext
? formik.errors.qtext
: null
}
</div>
<textarea
id="qtext"
name="qtext"
value={formik.values.qtext}
placeholder="Ваш текст"
{...formik.getFieldProps('qtext')}
/>
<input
type="submit"
className="button submit"
value="ОТПРАВИТЬ"
/>
</form>
</div>
)
};
export default Question
I tried to use Netlify test project from here to look for differences, but it didn’t deploy ever