[Support Guide] My form renders with JavaScript but won't work properly

Support Support Guides
,
36

Hello,

I’m working on a simple project using NextJS and Netlify forms. I cannot get the form detection to work (so far as I can tell). I’ve searched a number of forums and tried the longer form debugging guide, but nothing seems to solve my problem. As stated, the project is built using NextJS and is written using TSX.

I’m at a bit of a loss here, so any guidance would be very appreciated. Let me know what additional information I can provide to help troubleshoot.

Thank you!

37

Did you add a HTML version of the form in the public directory?

38

I just tried that out, and now the form is being detected! Progress…

However, the submissions aren’t working. I still get a 404 Message when I click submit on the form. Do you need the site URL or anything to inspect closer? I’m wondering if it’s an issue with the way I created the forms…

Thank you!

39

That would help, yes. I can assume the form-name is not the same as the one being detected.

1 Like
40

This is working for me now! Thanks for the follow-up.

1 Like
41

Following up on this with a minimum working example.

I had the same issue with a NextJs app using typescript, two resolution steps:

  1. Add a _form.html file in my public directory;
  2. Add a hidden input in my tsx and use a useEffect hook to deal with the react-hydration error
<!-- Content of my public/_form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Raplyrics feedback form</title>
<body>
    <!-- A little help for the Netlify post-processing bots -->
    <form name="feedbackForm" action="/thanks" netlify netlify-honeypot="bot-field" hidden>
        <input type="text" name="name"/>
        <input type="email" name="email"/>
        <textarea name="comment"></textarea>
    </form>
</body>
</html>

Note that the action /thanks is a page at my root with a custom feedback.

and in my react component:

// A form to collect user email and feedback

import React, {useEffect} from 'react';
import styles from './FeedbackForm.module.css'

export default function FeedbackForm() {
    const [formReady, setFormReady] = React.useState(false);

    useEffect(() => {
        setFormReady(true)
    }, [])

    return (
        <div className={styles.feedbackCard}>
            {formReady && (
                <form
                    name="feedbackForm"
                    method="post"
                    data-netlify="true"
                    action={"/thanks"}
                    encType={"application/x-www-form-urlencoded"}
                >
                    <input type="hidden" name="form-name" value="feedbackForm" />
                    <h2>
                        {"The mic is yours 🎙️"}
                    </h2>
                    <h3>
                        {"Drop us a line with your thoughts or suggestions so we can improve."}
                    </h3>
                    <p>
                        <label>Your Name: <input type="text" name="name"/></label>
                    </p>
                    <p>
                        <label>Your Email: <input type="email" name="email"/></label>
                    </p>
                    <p>
                        <label>Your Feedback: <textarea className={styles.textArea} name="comment"></textarea></label>
                    </p>

                    <p>
                        <button type="submit" className={styles.submitButton}>
                            {"Send Feedback"}
                        </button>
                    </p>
                </form>
            )}
        </div>

    )
}

Note the useEffect hook to avoid a react-hydration error.

See the feeback form live on https://raplyrics.eu

44

Regarding " You must deploy this HTML version along with your site. You don’t have to link to it - you can just create a netlifyneedsthisformyform.html file with those definitions in it and deploy it with your site without linking to it, and that will work!"

I added html version of my form in a html file in my public folder in nuxt 3 but still can’t get anything to show up in netlify, was that what was implied from that?

45

Hi, @Sharif4. I see you resolved this here:

Please don’t cross-post questions to multiple topics. In the future I would recommend linking to this topic in the original topic above to ask this question instead of making a new post in this topic. Posting the same question in multiple places both slows our response times and also makes the content of the support forum less useful.