404 response when submitting via AJAX

[hartey11]

Hi, just setup my first form but getting a 404 response when I try to submit. I don’t want the form to navigate to a new page but just display a success message under the form (which works).

Do I still need to include and action attribute in this scenario that points to the same page?

Link to site:
https://dev.poshwash.london/contact-us/

jonny-harte/posh-wash/blob/master/src/components/contact-form/contact-form.component.js

[jen]

Hey @hartey11,
One thing that is almost certainly causing problems is this line:

jonny-harte/posh-wash/blob/master/src/components/contact-form/contact-form.component.js#L29

There are spaces before and after the = sign when you encode, which means that your request is sent like this:

Can you try deleting the spaces and let us know if it works any better?

[hartey11]

Thanks Jen, that worked. However, I’m getting the css of the name field included in the notification email even though I can’t see it in the payload

[jen]

Wow, I’ve never seen before I checked our logs and all looks normal there, so I’m wondering if there is some weird parsing happening as part of the email notification. Was it a one-time thing or are you still seeing it? We did just test this afternoon in case you get a submission from test@netlify.com

[hartey11]

Yep saw your test and it still has the css

[perry]

hey there,

i did some digging and found these two older threads that seem to similar:

Body of form containing HTML markup

When submitting a form via the fetch method (React/Gatsby). The submissions are going through successfully but it seems that the data isn’t exactly matching up with the body. I’m getting this strange data when I view submissions: [Screen Shot 2020-01-31 at 7.12.23 pm] Netlify instance: https://practical-thompson-134dc2.netlify.com/ My submit handler is: fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-ur…

and

Select input options being passed as field label in submissions

I’m using Gatsby and all the fields are named correctly in submissions except for my select input. Netlify is registering the label of the select input as well as all its options as part of the name of the label. [Screen Shot 2020-02-07 at 8.54.56 am] Here is my select component: <label htmlFor={name} sx={{ display: "block", }} > <span> {label} {required && "*"} </span> <select id={name} name={name} value={value} onChange={onChange} placeholder…

maybe @jonathantoday has some ideas?

[hartey11]

Still no luck resolving this?

Also is it possible to amend the notification subject line? I’d ideally like to reply to customers from it but the subject isn’t very useful to them.

[jen]

Hey @hartey11,
We’re sending what we see as the label for the name field. I don’t know the details of dynamic css in Gatsby but the {" "} after the span tags seem to be the culprit here:

jonny-harte/posh-wash/blob/master/src/components/contact-form/contact-form.component.js#L87-L88

Do you need the quotation marks? Wondering if we’re interpreting that as a string when it’s actually a style. At any rate, if you update that, our emails to you should also update accordingly.

You can update the subject line by creating an input field with name="subject". More on that in our docs here:

Form notifications

Note, however, that you cannot remove [Netlify] from the subject line at this time- that is a long-running feature request that we certainly invite you to add your name to over here → How to remove [Netlify] from subject? - #12 by codyduval