Netlify (pure html) Form 404'ing on submission w/ or w/o custom redirect

  1. The URL for your live form as you want visitors to use it: https://priceless-brattain-43a287.netlify.app/contact
  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 ”): Same as above.
  3. The form name that you’ve set and that shows in our UI: contact-form
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console: Zero errors.
  5. Description of anything you have tried that did or didn’t help or make things better/worse: Read through this response - and this thread. Nothing has resolved the issue thus far.

Entire relevant component:

import { useRef, useEffect } from 'react';
import styles from '../styles/contact.module.css';
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export default function Contact(props) {

    useEffect(() => {
        document
            .querySelector("form")
            .addEventListener("submit", handleSubmit);

        var tl =  gsap.timeline()
		tl.fromTo('main', {opacity:0}, { opacity:1, delay: 0.5, duration: 1});
        
        var sections = gsap.utils.toArray('.fade');
    
        sections.forEach((section) => {
        
        gsap.to(section, { autoAlpha: 1, scrollTrigger: {
                    trigger: section,
                    start: "+=0 80%",
                    scrub: false,
                    markers: false,
                    toggleActions: "play reverse play reverse"
                }
            });
        
        })
    }, [])

    const handleSubmit = (e) => {

        e.preventDefault();

        let myForm = document.getElementById("contact-form");
        let formData = new FormData(myForm);

        fetch("/", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams(formData).toString(),
        })
        .then(() => console.log('success'))
        .then(() => window.location = '/thank-you/')
        .catch((error) => alert(error));
    };
        
    return (
        <>
            <section className={styles.contact}>
                <div className="container">
                    <h1 className="title green">Contact Us</h1>
                </div>
                <div className="container">
                    <div className={styles.contactContainer}>
                        <div className={styles.left}>
                                <p className="sans-serif-regular body-copy green">
                                    Sand Hill Property Company<br/>
                                    2600 El Camino Real Suite 410<br/>
                                    Palo Alto, CA 94306
                                </p>
                            <p>
                                <a href="tel:16503441500" className="sans-serif-light"><span className="orange">T:</span> <span className="green">650 344 1500</span></a><br/>
                                <a href="fax:1650344065" className="sans-serif-light"><span className="orange">F:</span> <span className="green">650 344 065</span></a>
                            </p>
                            <p>
                                <a className="sans-serif-light green body-copy">info@shpco.com</a>
                            </p>
                        </div>
                        <div className={styles['form-container']}>
                            <form name="contact-form" id="contact-form" method="POST" data-netlify="true">
                                <p>
                                    <label><input className={styles.input} placeholder="First Name *" required type="text" name="first-name" /></label>   
                                </p>
                                <p>
                                    <label><input className={styles.input} placeholder="Last Name *" required type="text" name="last-name" /></label>   
                                </p>
                                <p>
                                    <label><input className={styles.input} placeholder="Email *" required type="email" name="email" /></label>
                                </p>
                                <p>
                                    <label><textarea className={ styles.textarea} placeholder="Message *" required name="message"></textarea></label>
                                </p>
                                <p>
                                    <button className={styles.submitBtn} type="submit">Submit</button>
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

Hey @taylorg,

You’re posting the form to your home page and that page redirects to a serverless function. You’r have to create a static HTML page where you can post the form data.

2 Likes

@ hrishikesh thank you for responding I do appreciate your help.
I thought that might be the case - I’ve created contact-form.html in the public directory.

<form name="contact-form" id="contact-form" method="POST" data-netlify="true" action="/contact-form.html" data-netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact-form"></input>
    <p>
        <label><input className={styles.input} placeholder="First Name *" required type="text"
                name="first-name" /></label>
    </p>
    <p>
        <label><input className={styles.input} placeholder="Last Name *" required type="text"
                name="last-name" /></label>
    </p>
    <p>
        <label><input className={styles.input} placeholder="Email *" required type="email" name="email" /></label>
    </p>
    <p>
        <label><textarea className={ styles.textarea} placeholder="Message *" required
                name="message"></textarea></label>
    </p>
    <p>
        <button className={styles.submitBtn} type="submit">Submit</button>
    </p>
</form>

And have updated my contact.js

import { useRef, useEffect } from 'react';
import styles from '../styles/contact.module.css';
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export default function Contact(props) {

    useEffect(() => {
        document
            .querySelector("form")
            .addEventListener("submit", handleSubmit);

        var tl =  gsap.timeline()
		tl.fromTo('main', {opacity:0}, { opacity:1, delay: 0.5, duration: 1});
        
        var sections = gsap.utils.toArray('.fade');
    
        sections.forEach((section) => {
        
        gsap.to(section, { autoAlpha: 1, scrollTrigger: {
                    trigger: section,
                    start: "+=0 80%",
                    scrub: false,
                    markers: false,
                    toggleActions: "play reverse play reverse"
                }
            });
        
        })
    }, [])

    const handleSubmit = (e) => {

        e.preventDefault();

        let myForm = document.getElementById("contact-form");
        let formData = new FormData(myForm);

        fetch("/contact-form.html", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams(formData).toString(),
        })
        .then(() => console.log('success'))
        .then(() => window.location = '/thank-you/')
        .catch((error) => alert(error));
    };
        
    return (
        <>
            <section className={styles.contact}>
                <div className="container">
                    <h1 className="title green">Contact Us</h1>
                </div>
                <div className="container">
                    <div className={styles.contactContainer}>
                        <div className={styles.left}>
                                <p className="sans-serif-light body-copy green">
                                    Sand Hill Property Company<br/>
                                    2600 El Camino Real Suite 410<br/>
                                    Palo Alto, CA 94306
                                </p>
                            <p>
                                <a href="tel:16503441500" className="sans-serif-light body-copy"><span className="orange">T:</span> <span className="green">650 344 1500</span></a><br/>
                                <a href="fax:1650344065" className="sans-serif-light body-copy"><span className="orange">F:</span> <span className="green">650 344 065</span></a>
                            </p>
                            <p>
                                <a className="sans-serif-light green body-copy">info@shpco.com</a>
                            </p>
                        </div>
                        <div className={styles['form-container']}>
                            <form name="contact-form" id="contact-form" method="POST"  data-netlify="true" data-netlify-honeypot="bot-field">
                                <input type="hidden" name="form-name" value="contact-form"></input>
                                <p>
                                    <label><input className={styles.input} placeholder="First Name *" required type="text" name="first-name" /></label>   
                                </p>
                                <p>
                                    <label><input className={styles.input} placeholder="Last Name *" required type="text" name="last-name" /></label>   
                                </p>
                                <p>
                                    <label><input className={styles.input} placeholder="Email *" required type="email" name="email" /></label>
                                </p>
                                <p>
                                    <label><textarea className={ styles.textarea} placeholder="Message *" required name="message"></textarea></label>
                                </p>
                                <p>
                                    <button className={styles.submitBtn} type="submit">Submit</button>
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

And now I’m getting a 405 Method not allowed.

Hey there, @taylorg :wave:

Sorry for the delay, our team has been a bit underwater the past few weeks. Are you still encountering this 405 method not allowed error? If so, can you please share what additional debugging steps you have taken in the past week?

Thanks so much!

@hillary – I’m not. The solution that @hrishikesh provided worked after I deployed. Thank you very much for the follow up!

1 Like

So glad to hear everything is working. Happy building :rocket: