Home
Support Forums

Page Not Found on Form submit but I have followed docs and recommandation

This is my URL link to the contact form:

https://carmineportfolio.netlify.app/contact

  • No custom domain
  • Build execute correctly, no error on console locally, neither once build in Netfly
  • This is my page structure, I have, as another try even duplicate the thank-you.html page both on root and public, though the documentation says that if a thank you page is been not provided is served.
  • as wrote, i have followed docs regarding put an hidden form under index.html with same input fields

Hi @TCarmine,

I’m not sure what you’re trying. Your HTML seems to have the following:

But, that form is hidden, I think it might be the hidden form you’re talking about?

On the same page, you’ve this:

Which seems to be the actual form, but it’s not using correct syntax. For example, I’m not sure what the value attribute in the form tag is doing. The input element doesn’t seem to have a name attribute and finally, the button seems to be created as another input.

All in all, this looks pretty confusing to me.

If you can shed some light on what’s happening in this, that would be helpful.

Hi [hrishikesh],

I did some cleaning and ad the missing input with tag hidden in JSX as stated here.

For the one you refering, the form in index, is exactly what documentation state, for my understanding, as per here:

Unfortunately on form submit I still get the 404 page instead of the thank you.
Still in docs state that if the thank-you.html page is not been found, netifly provide one, so why the error considering that the URL is even correct:

To reply your question on regarding what I am doing, simply a form, that in this case I simplified to only 1 Name field, just did with React hooks.

Please let me know what is the cause of the error.

Thank you

hi there, does the page you are trying to redirect to after submission exist? that is sometimes a problem people have and it’s worth verifying.

Actually since today is working, I am not sure after the first build when I tried and I left the message what was making it not working, probably because in a rush and I didn’t refresh the page.

I am very happy, it’s been fixed, and I even see the entries in the form dashboard.
Now I only have to add back the other input.

By the way, I though that Netlify engineer could check the based code submitted for deploy.

Well, I am happy as explaining the issue let me realize I missed that input tag with hidden tag in JSX that I have missed, and that could have been the root of the issue.

Cheeers

1 Like

Hi @TCarmine,

I had drafted a response, forgot to hit send, my bad.

We could if you could share the repo. Spying into private repos won’t be a good thing.

no worries, but how I can share the repo?
I thought it is public and visibile as I build from my repo that indeed is public,
here

Right now I have an issue with the textarea, I can’t make it get value from typing, and I am reading discordant things.

in HTML textarea does not have a value attribute but in React its the way to update the state but in react hooks they want uncontrolled components.
I got a bit confused, well I used the same logic of the other 2 but doesn’t work

Any suggestion?

Hi @TCarmine

You have a name mismatch with the textarea. In your index.html you have

<textarea name="message"></textarea>

while in your components/Contact.js you have

<textarea 
  name="textarea" 

with all other references to the textarea using message e.g.

if(inputs.firstName && inputs.email && inputs.message)

Thank you Coelmay, that was stupid but difficult for me to spot.
Unfortunately the textarea is still not working, and I also did another test, I change it to input but having same issue, so I tthink the issue is on my handlerChange but not sure what.

For notice on console I have a red error for all input saying that “onSubmitlistener to be a function, instead got a value ofobject` type”, but it is fired for anytime I start typing in any input even the etxtarea
Nevertheless the name and email input works

Adding that since I make working the name input and trying to implement others now on dashboard form I see only the instance but my test entries are not saved, so definitely I have the handleInputChange eventually to improve

@ [coelmay],

I made working now all the input but in dashboard in Netlify I only see an empty line, no input keys, neither value.
I ready already the docs regarding this, but could’t find any what i am not implementing correctly

@TCarmine: You have put the HTML form into src/index.html but public/index.html is the file bundled with a build, and this file only contains a form with the firstName input field so that is all Netlify detects.

Believe this is making things worse.

You have

onSubmit={handleSubmit, {setSubmitted:true}}

when you only need

onSubmit={handleSubmit}

because you are setting setSubmitted true inside the function

const handleSubmit = (e) => {
  // rest of code
  setSubmitted(true);
}

Thank you for all the underlining of mistake.

ah, this make sense now, it was because my various try to make the form working in general

unfortunately just tested and that code strangely isn’t setting submitted that take showsuccess, to true, so withtout this {setSubmitted:true} here onSubmit={handleSubmit, {setSubmitted:true}}> ,
I end up having show validation message even with correct entries

The only way I could make it work was to remove the onChange = {handleInputChange} from each element and the onSubmit={handleSubmit}. As you have <input ... required/> all form elements are required and submission will not take place without them.

@coelmay I made the form working with fields I need, of course is not the best.
By the way I just used a lot of message for testing purpose, any change / way to reset the of the emails received as those weren’t at all from people but my “testing”? This would be much appreciate

Are you meaning the number of monthly form submissions?

exactly, now the system state that I used 18, but those where only testing. Did is possible to test once build and I missed this option?

100 - 18 = 82. So you still have 82 submissions left for the month.