Next.js Form Issue

Support
,
1

Hello - I am having issues with my form being noticed and have gone through the other support topics and haven’t been able to figure out the issue for mine.

https://awesome-shannon-12aaf7.netlify.app/

I have included the hidden input field in the form and the value is the same name as the contact form. Below is the current code for the form itself inside my next.js app. I also have the success action but it is going to 404 which I am assuming is due to Netlify not noticing the form yet as it also doesn’t show up on my dashboard.

<form className={styles.form_container} name="contact" method="POST" data-netlify="true" action="/success" netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact" />
    
    <div className={styles.form_top}>
      <div className={styles.form_section}>
        <label htmlFor="name">Name</label>
        <input id="name" type="text" name="name" autoComplete="name" required />
      </div>

      <div className={styles.form_section}>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" name="email" autoComplete="email" required />
      </div>
    </div>

    <div className={styles.form_section}>
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required></textarea>
    </div>

    <div className={styles.form_submit}>
      <button type="submit">Send</button>
    </div>

  </form>

Thank you for any and all help!

2

Hi @Villux :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 the following information (this is included in the Support Guide I linked as well):

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse