Redirect onSubmit shows unstyled form and returns an empty submission

[chrisfinazzo]

I have a form (form.js) which is a component of contact.js. However when I submit form data, the confirmation page which loads is the default, unstyled result instead of my custom page and its associated component (located at success.js). The email notification that I receive also contains none of the form’s data.

(My server is gracious-babbage-21fe68)

My form element is shown below - is this action attribute pointing to the wrong page? - Using Create React App.

<form name="contact" data-netlify="true" netlify-honeypot="bot-field" method="post" onSubmit="submit" action="/success">

[hillary]

Hiya, @chrisfinazzo

sorry you are having trouble getting your forms to work!

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information the forms support guide asks for, such as what you have already tried, and a link to your live form.

[chrisfinazzo]

@hillary,

Hmm

Here is what I currently have locally - the live version (which does not include these changes yet, is at this URL) - per the linked instructions, I needed to add name attributes back in as they were removed by mistake in a prior version.

import React from "react";

const Form = () => (
<React.Fragment>
<h2>Contact Me</h2>
<form name="contact" data-netlify="true" netlify-honeypot="bot-field" method="POST" onSubmit="submit" action="/success">
  <input type="hidden" name="form-name" value="contact" />
  <label for="firstName" className="first-name">First Name</label>
  <input id="firstName" name="firstName" type="text" required />

  <label for="lastName" className="last-name">Last Name</label>
  <input id="lastName" name="lastName" type="text" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  
  <label for="msg">Message</label>
  <textarea id="msg" name="user_message" required></textarea>

  <label><input name="bot-field" hidden /></label>

  <button type="submit">Submit</button>
  
</form>
</React.Fragment>
)

export default Form;

At present, this code returns Cannot POST /success when I submit, although the page I would like to see is reachable at /success.

[perry]

question, do you have an up to date plaintext html version that contains the above included in your site repo ? it does have to match exactly for things to work.

[chrisfinazzo]

The live site is up-to-date at the same URL if you want to take a look.

[Scott]

Hey there! Judging by your HTML, the form was not processed by the build:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

You need to have a netlify or data-netlify=true attribute in your HTML <form …> definition. Note that once the form is processed during deploy, the resulting HTML that we serve will NOT have that parameter in it anymore!

Double-check that you’re syntactically correct and you have parity between your HTML and JS forms. If all else fails, try renaming the form and getting it working with one simple field, before expanding

[chrisfinazzo]

I’ve updated this and form submissions now include all fields and are processed correctly. However, the success page is has no style rules applied to it. I suspect this may be due to the Content Security policy which covers the site but wonder how this can be - the style source value is set to ‘self’.

Did I miss a step?

[Error] Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy. (hirechrisfinazzo.com, line 9)

My policy is as follows in netlify.toml:

package = "netlify-plugin-csp-generator"
  [plugins.inputs]
  buildDir = "build"
[plugins.inputs.policies]
   defaultSrc = "'none'"
   fontSrc = "'self'"
   imgSrc = "'self' data:"
   styleSrc = "'self' https://use.fontawesome.com"
   scriptSrc = "'self'"
   baseUri = "'self'"
   connectSrc = "'self'"
   objectSrc = "'none'"
   formAction = "'self'"
   frameAncestors = "'none'"
   reportUri = "https://chrisfinazzo.report-uri.com/r/d/csp/enforce"
   workerSrc = "'self'"

[hrishikesh]

Hey @chrisfinazzo,

I believe you simply need to update your CSP policy to include those directives.