Redirect onSubmit shows unstyled form and returns an empty submission

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">

Hiya, @chrisfinazzo :wave:

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. :slight_smile:

:wave: @hillary,

Hmm :thinking:

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.

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.

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