Home
Support Forums

Form isn't showing as active and seeing 404

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>

Hi @Jukez17

I just tested the form you linked to (test@example.com was the email I used.) Although I see the 404 as you mentioned, I was taken to the thank you page (https://www.pehutec.com/fi/thankYouForYourApplication/.) The same applies for the English version, form appears to submit with thank you page shown, but 404 in console.

Is this the behavior you are experiencing? Have the submissions I made come through?

Unfortunately no. The form isn’t shown as active form in Netlify @coelmay

As you are using Gatsby and (I believe) submitting via AJAX I will point you to the following references first [Support Guide] Form problems, form debugging, 404 when submitting, Submit JavaScript-rendered forms with AJAX documentation, and sw-yx/gatsby-netlify-form-example-v2 repository which contains several form examples specific to Gatsby in combination with Netlify Forms.

I had a look at it and didn’t really spot much difference on my second form and any of those forms there.

What’s interesting is, I’m not seeing any event listener on the form:

So, I wonder how exactly you’re trying to submit it.

The form is not parsed by Netlify and that’s probably the original issue, but the submission is likely not working as intended too.

@hrishikesh probably. I took the form from the documentation.

Could we ask for a repo in this case?

Yes but I need to prepare a secondary repo because this one is private @hrishikesh

Hi, @Jukez17. There is no <form> tag in that page’s HTML. Quoting the support guide from above:

If you’re using a pure javascript form instead, this additional step is required:

  • You still need to include an HTML form that meets the criteria above, including all the inputs with the same names as the javascript form. This is required because we parse HTML to find forms during your deploy - but we don’t try to parse javascript files. This means if you are using React, Vue, etc. which create HTML elements using Javascript during the render, you’ll still need to include an actual HTML file that includes all of the form details in it, including all possible inputs that you want to use. For a working example using React that you can generalize to other frameworks from, check out this blog post .

I believe this requirement above is not met because there is no form in that HTML. If you have created the pure HTML form somewhere else please let us know the URL to find that form.

If you have not created the pure HTML form, the fastest way to do so is to open the page in the browser after the javascript has created the HTML form and then copy paste that <form> definition to a static HTML file that you add to the site somewhere. You can even put the HTML file in a subdirectory and block access to it with redirects. In other words, the form doesn’t need to be reachable by end users of your site, but the HTML file with the form must exist somewhere in the site deploy.

Right now there is no HTML form and this is why no form handler exists for it.