Form not appearing in netlify form tab

Support
1

site: https://isglitch.com/
github: GitHub - orbithammer/theGlitch: isGlitch.com - the online-est of tech rags. Where satire meets silicon and the truth isn’t binary.

I’m trying to make a form in my react router/typescript site but it’s not registering in the form tab. When I press send, the information doesn’t appear in the tab. Am I missing something?

import React from "react";
import { useNavigate } from "react-router-dom";

const ContactPage: React.FC = () => {
    const navigate = useNavigate();

    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        navigate("/thank-you")
    };

    return (
        <form name="contact" method="POST" data-netlify="true" onSubmit={handleSubmit}>
            <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 Role: <select name="role[]" multiple>
                <option value="leader">Leader</option>
                <option value="follower">Follower</option>
                </select></label>
            </p>
            <p>
                <label>Message: <textarea name="message"></textarea></label>
            </p>
            <p>
                <button type="submit">Send</button>
            </p>
        </form>
    )
}

export default ContactPage
2

Yes.

Look at your network tab in your developer tools when you submit the form.

You’ll find that the page doesn’t make any network request when the form is submitted.

This will be due to the code you’ve indicated you have:

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  navigate("/thank-you")
};

This code says:

When the form is about to be submitted
Don’t do the default action (the POST request)
Just change the page to /thank-you

So, it’s behaving as written.

Netlify’s system can’t receive a submission that is never sent.

See this documentation for an example of what you probably want to do:

https://docs.netlify.com/forms/setup/#submit-html-forms-with-ajax

1 Like