my deployed site is: https://atlasbhw-v2.netlify.app/
i get a 404 error, failed to load resource /__forms.html
i followed the docs, as well as several posts with the same issue, but their solutions havent worked for me. The example in the docs dont use typescript so i had to add those, other than that I just dont understand whats missing. the deployed site gives me a 404 error, localhost says 405 method not allowed. Ive commented out my header and just have enctype="multipart/form-data" in __forms.html. When i navigate to https://atlasbhw-v2.netlify.app/__forms.html i get a blank page, but when you inspect it you do see the hidden form.
UPDATE I looked into what 405 means and decided to update the fetch call to â/â instead of â/__forms.htmlâ, this give me a 200 success on localhost and it looks like my forms submits, however i never see the form submission in netlify (i cant remember if they show when you submit through localhost), trying the deployed site after pushing this change and i get my error message and in the console i see the same âFailed to load resource: the server responded with a status of 405 ()â error that i was getting previously in localhost. What else do I need to do? Which is supposed to be correct fetch call to â/â or fetch call to â/__forms.htmlâ? The latter seemed to work the least so im confused and it seems these threads all have slightly different stitched together solutions, theres gotta be a concrete ârightâ way?! Or is this not possible with this version of next.js? Downgrading is not an option, I was excited to see Netlify had been updated as I prefer this over Vercel, but not if doesnt really work.
//__forms.html file
<html>
<head></head>
<body>
<form
name="atlasbhw-jobs"
data-netlify="true"
data-netlify-recaptcha="true"
netlify-honeypot="bot-field"
enctype="multipart/form-data"
hidden
>
<input type="hidden" name="form-name" value="atlasbhw-jobs" />
<input name="name" type="text" />
<input name="email" type="email" />
<input name="phone" type="text" />
<input name="coverLetter" type="file" />
<input name="resume" type="file" />
<div data-netlify-recaptcha="true"></div>
<button type="submit">Apply</button>
</form>
</body>
</html>
// Form
'use client'
import React, { useState } from "react";
import { BiCheckCircle } from "react-icons/bi";
type Props = {
requestResume: boolean;
requestCoverLetter: boolean;
};
const JobApplicationForm = ({ requestCoverLetter, requestResume }: Props) => {
const [status, setStatus] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
setStatus("pending");
setError(null);
const myForm = event.target as HTMLFormElement;
const formData = new FormData(myForm);
const params = new URLSearchParams();
formData.forEach((value, key) => {
params.append(key, value.toString());
});
const res = await fetch("/__forms.html", {
method: "POST",
body: params.toString(),
});
if (res.status === 200) {
setStatus("ok");
} else {
setStatus("error");
setError(`${res.status} ${res.statusText}`);
}
} catch (e) {
setStatus("error");
setError(`${e}`);
}
};
return (
<form
onSubmit={handleFormSubmit}
name="atlasbhw-jobs"
className="w-[90vw] max-w-prose flex flex-col"
data-netlify="true"
data-netlify-recaptcha="true"
hidden
>
<div className="flex flex-col mb-3">
<label htmlFor="name">Name: *</label>
<input
type="text"
name="name"
id="name"
className="border p-1 rounded-md"
placeholder="Full Name"
required
/>
</div>
<div className="flex flex-col mb-3">
<label htmlFor="email">Email: *</label>
<input
type="email"
name="email"
id="email"
className="border p-1 rounded-md"
placeholder="name@email.com"
required
/>
</div>
<div className="flex flex-col mb-3">
<label htmlFor="phone">Phone: *</label>
<input
type="text"
name="phone"
id="phone"
placeholder="(XXX)-XXX-XXXX"
className="border p-1 rounded-md"
required
/>
</div>
{requestCoverLetter && (
<div className="flex flex-col mb-3">
<label htmlFor="coverLetter">Cover Letter: *</label>
<input
type="file"
name="coverLetter"
className="border p-1 rounded-md"
id="coverLetter"
required
accept=".pdf,.doc,.docx"
/>
</div>
)}
{requestResume && (
<div className="flex flex-col">
<label htmlFor="resume">Resume: *</label>
<input
type="file"
name="resume"
id="resume"
className="border p-1 rounded-md"
accept=".pdf,.doc,.docx"
required
/>
</div>
)}
<div data-netlify-recaptcha="true" />
<button
className="px-6 py-2 mt-6 self-start bg-accent text-white rounded-md"
type="submit"
>
{status === "ok" ? (
<>
Submitted! <BiCheckCircle className="text-green-500" />
</>
) : (
"Apply"
)}
</button>
<p className="text-red-500">{error}</p>
</form>
);
};
export default JobApplicationForm;
