Form not detected 404 response used all instructions read forum

Support
,
1

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

2

I’m assuming this is the form from the button in the top right of your home page.

So, as I can see, the actual form element is missing in the compiled HTML. Try creating a file in your public folder with the same name, attributes, inputs, etc. as this form and then see if this works. It can be a file with just the form and no styling or anything, it’s just there to help Netlify detect the form.

3

Thank you very much, HTML file in public folder solved the problem!

1 Like