<form name="contactv1" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="contactv1" />
<div>
<label>First Name:<br/>
<input type="text" name="first-name"/>
</label>
</div>
<div>
<label htmlFor="email" >Email:</label><br/>
<input id="email" type="email" name="email"/>
</div>
<button type="submit">Submit the results</button>
</form>
This code gives me a “Page Not Found” when run on my website and submitting the form. Not sure why as it’s a copy and paste from the example code + it passes all the tests in the support article for forms.
Please share the page where the form is active for anyone to be able to check.
I’ve edited the website quite a bit so you guys can see, so sorry if there’s any bugs or anything.
You can find a pretty elaborate guide on implementing Netlify forms in React here:
Hi, that didn’t help me either
perry
June 27, 2022, 4:14pm
6
Hiya, sorry you are having trouble getting your forms to work.
This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!
We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!
If you are still having problems, please provide more information such as what you have already tried, and a link to your live form.
That didn’t help either. Could someone actually look at what I’ve sent as i specified the guide didn’t help.
perry
June 30, 2022, 4:39pm
8
there are many suggestions in that doc, and we’ve also asked that you tell us exactly what you have tried, and provide us a link to your live form.
Can you provide a screenshot showing us that your form is actually being processed?
We can be more helpful if you try to work with us, please.
Here is a link to the form
It’s a wordle game, you can just spam 6 answers in and get them all wrong, and should prompt a form (sorry for it being like that, I’ll sort it and make it easier to test later).
I changed the form style to:
const [name,setName] = useState('');
const [status,setStatus] = useState('');
const [email,setEmail] = useState('');
const [message,setMessage] = useState('');
const [file, setFile] = useState({});
const onDrop = useCallback(acceptedFiles => {
console.log(acceptedFiles)
setFile(acceptedFiles[0])
}, [])
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
const encode = (data) => {
const formData = new FormData();
Object.keys(data).forEach((k)=>{
formData.append(k,data[k])
});
return formData
}
const handleSubmit = e => {
const data = { "form-name": "contact", name, email, message, file }
fetch("/", {
method: "POST",
// headers: { "Content-Type": 'multipart/form-data; boundary=random' },
body: encode(data)
})
.then(() => setStatus("Form Submission Successful!!"))
.catch(error => setStatus("Form Submission Failed!"));
e.preventDefault();
};
const handleChange = e => {
const {name, value} = e.target
if (name === 'name' ){
return setName(value)
}
if (name === 'email' ){
return setEmail(value)
}
if (name === 'message' ){
return setMessage(value)
}
}
const { gameOver, correctWord } = useContext(AppContext)
return (
<div className="gameOver">
{/*
<p>{gameOver.guessedWord ? "Congratulations. You are worthy." : "Unlucky. You will be able to redeem yourself soon."}</p>
<p>{gameOver.guessedWord ? "" : "Correct word: " + correctWord.toUpperCase()}</p>
*/}
<form onSubmit={handleSubmit} action="/thank-you/">
<p>
<label>
Your Name: <input type="text" name="name" value={name} onChange={handleChange} />
</label>
</p>
<p>
<label>
Your Email: <input type="email" name="email" value={email} onChange={handleChange} />
</label>
</p>
<p>
<label>
Message: <textarea name="message" value={message} onChange={handleChange} />
</label>
</p>
<div {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here, or click to select files</p>
}
</div>
<p>
<button type="submit">Send</button>
</p>
</form>
</div>
)
And as the screenshots show, I get a 404 response.
If the website is painful to use to see my problem, lmk and I’ll make some changes.
Thanks!
Could I get some help on this ASAP?
Really need this done, had this problem for a week now thanks
Your form should be present in your index.html, otherwise Netlify isn’t capable of detecting the form. It’s step #1 in the guide I sent you 4 days ago. I’m quite certain that’s the solution to your problem, as your current index.html does not include a form.
