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

Support Support Guides
,
24

Hi,

I’m having issue with form that rendered by JavaScript (SvelteKit).
My site: https://t7m.netlify.app/#contact

My form is registered and visible in netlify app dashboard with the name ‘lien-he’. When form is submitted, I got response with HTTP code 200 and content is the HTML version of main page. If I change the submit path to other than ‘/’, I got status 404 and the same HTML content. In both case I don’t see any submission in the dashboard

Code for sending form via XHR:

fetch('/', {
				method: 'POST',
				headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
				body: new URLSearchParams(new FormData(document.querySelector('form[data-form=contact]'))).toString()
			})

Request body:

form-name=lien-he&quang_cao=on&san_pham=on&khac=on&name=Khang+Le&phone=0349218391&email=kwjam%40mail.dev&message=test+content

Response: status 200 but body is HTML version of my site

Screen Shot 2021-09-11 at 22.17.26
Screen Shot 2021-09-11 at 22.17.26876×404 44.7 KB

25

Hi @stommazh,

That looks correct to me. You’d rightly get the HTML body in response. I’m not sure what the problem is here. Are you not seeing form submissions?

26

Yes, I don’t receive any submission for that form, checked in both spam and verified box.

27

Hi @stommazh,

You’re having a redirect that routes /* to a Netlify Function that’s causing problems. If you change the fetch to /about/, it should work fine.

1 Like
28

Thank you for the solution. It worked.

1 Like
29
30
31
32
33
34
35
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

42
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?