PLEASE help us help you by writing a good post!
- we need to know your netlify site name. Example:
gifted-antelope-58b104.netlify.app - DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
- Build problems? Link or paste the FULL build log & build settings screenshot
The better the post - the faster the answer.
Website is: https://www.pehutec.com
And the form that is not working is located in: https://www.pehutec.com/fi/fullStackApplications/
When I am submitting the data from the from I see 404 on the developer console
I have went through the support guide and did actions from there but still saw the 404 error.
I have one form that is currently active and is working perfectly fine but I need to make a new form for the website and it’s slight problematic that it isn’t working. Both have same code expect the form-name is of course different.
I have also logged the state to see that data is in there and it does contain all the data from the form.
I am just wondering if my form is missing something or does it not like material-ui radio button components.
function encode(data) {
return Object.keys(data)
.map(
(key) =>
encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
)
.join('&')
}
export default function FullStackApplicationForm() {
const { locale } = useLocale
const [state, setState] = useState({})
const handleChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value })
}
const handleSubmit = (e) => {
e.preventDefault()
const form = e.target
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
...state,
}),
})
.then(() => navigate(form.getAttribute('action')))
.catch((error) => {
console.log(error)
alert(error)
})
}
const {
contactFormDevelopment,
contactFormEmail,
contactFormPhone,
contactFormMessage,
contactFormSend,
FullStackApplicationTitle,
FullStackApplicationParam,
} = useTranslations()
return (
<S.FormColumn>
<div className={'contact-form-container'}>
<div className={'formContainer'}>
<h1 className={'form-job-submission'}>
{FullStackApplicationTitle}
</h1>
<p className={'letterParam'}>{FullStackApplicationParam}</p>
<form
className={'formStyle'}
name="full-stack-applications"
method="post"
action={
locale === 'en'
? '/thankYouForYourApplication/'
: '/fi/thankYouForYourApplication/'
}
data-netlify="true"
data-netlify-honeypot="bot-field"
onSubmit={handleSubmit}
>
{/* The `form-name` hidden field is required to support form submissions without JavaScript */}
<input
type="hidden"
name="form-name"
value="full-stack-applications"
/>
<p hidden>
<label>
Don’t fill this out:
<input
name="bot-field"
onChange={handleChange}
/>
</label>
</p>
<p>
<label className={'labelStyle'}>
{contactFormEmail}
</label>
<input
className={'inputStyle'}
type="email"
name="email"
onChange={handleChange}
/>
</p>
<label className={'labelStyle'}>
{contactFormPhone}
</label>
<input
className={'inputStyle'}
type="text"
name="phone"
onChange={handleChange}
/>
<div className={'contact-form-row'}>
<label className={'labelStyle'}>
{contactFormDevelopment}
</label>
<FormControl component="fieldset">
<RadioGroup
aria-label={contactFormDevelopment}
defaultValue=""
name="radio-buttons-group"
>
<FormControlLabel
sx={{
'& .MuiSvgIcon-root': {
fontSize: 28,
},
}}
value="Kyllä, yli 5 vuotta"
control={
<Radio name="radio-1" onChange={handleChange} />
}
label={
<span
style={{ fontSize: '1.5rem' }}
>
Kyllä, yli 5 vuotta
</span>
}
/>
<FormControlLabel
sx={{
'& .MuiSvgIcon-root': {
fontSize: 28,
},
}}
value="Kyllä, 2-5 vuotta"
control={
<Radio name="radio-2" onChange={handleChange} />
}
label={
<span
style={{ fontSize: '1.5rem' }}
>
Kyllä, 2-5 vuotta
</span>
}
/>
<FormControlLabel
sx={{
'& .MuiSvgIcon-root': {
fontSize: 28,
},
}}
value="Kyllä, alle 2 vuotta"
control={
<Radio name="radio-3" onChange={handleChange} />
}
label={
<span
style={{ fontSize: '1.5rem' }}
>
Kyllä, alle 2 vuotta
</span>
}
/>
<FormControlLabel
sx={{
'& .MuiSvgIcon-root': {
fontSize: 28,
},
}}
value="Ei, en ole vielä päässyt harjoittamaan
taitojani"
control={
<Radio name="radio-4" onChange={handleChange} />
}
label={
<span
style={{ fontSize: '1.5rem' }}
>
Ei, en ole vielä päässyt
harjoittamaan taitojani
</span>
}
/>
</RadioGroup>
</FormControl>
</div>
<p>
<label className={'labelStyle'}>
{contactFormMessage}
</label>
<textarea
className={'inputAreaStyle'}
name="message"
rows={10}
onChange={handleChange}
/>
</p>
<p>
<button className={'buttonStyle'} type="submit">
{contactFormSend}
</button>
</p>
</form>
</div>
</div>
