Form stopped working

Our site at https://cosmic-klepon-3c693c.netlify.app (https://openadapt.ai) was receiving form submissions just fine until around a month ago. The last form submission was May 5th. The only change that happened on that date was the addition of robots.txt.

I have tried deploying the last version of the site that successfully submitted a form to https://deploy-preview-68--cosmic-klepon-3c693c.netlify.app/, but submitting from there does not seem to work either.

Here is the form code:

import { useState } from 'react'
import { useRouter } from 'next/router'
import { submitToNetlify } from '../utils/formSubmission' // Make sure this util follows Netlify's requirements
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
import styles from './EmailForm.module.css'

export default function EmailForm() {
    const router = useRouter()
    const [email, setEmail] = useState('')
    const [isSubmitting, setIsSubmitting] = useState(false)
    const [formHidden, setFormHidden] = useState(false)

    const handleSubmit = async (event) => {
        event.preventDefault()
        setIsSubmitting(true)

        const formData = new FormData(event.target)
        formData.append('form-name', 'email') // Ensure this matches the name attribute of your form

        // Using fetch to submit form data to Netlify according to their AJAX submission guide
        fetch('/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams(formData).toString(),
        })
            .then((response) => {
                setIsSubmitting(false)
                if (response.ok) {
                    setFormHidden(true) // Hide form and show success message on successful submission
                    console.log('Form successfully submitted')
                    // Handle further actions here, e.g., showing a success message
                } else {
                    // Handle submission error
                    console.error('Form submission failed')
                }
            })
            .catch((error) => {
                setIsSubmitting(false)
                console.error('Form submission error:', error)
            })
    }

    return (
        <div
            className={styles.background}
            style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                marginTop: '1em',
            }}
        >
            {formHidden ? (
                <div
                    className="fade-in"
                    style={{ opacity: 1, transition: 'opacity 1s ease-in' }}
                >
                    <h4 className="font-extralight text-white">
                        <FontAwesomeIcon icon={faPaperPlane} className="mr-4" />
                        Get Ready
                    </h4>
                </div>
            ) : (
                <>
                    <form
                        id="email-form"
                        className="flex items-center justify-center"
                        onSubmit={handleSubmit}
                        data-netlify="true"
                        netlify-honeypot="bot-field"
                        name="email" // Ensure this matches with Netlify form settings
                        style={{
                            width: '100%',
                            transition: 'opacity 1s ease-out',
                            opacity: isSubmitting ? 0 : 1,
                        }}
                    >
                        <input type="hidden" name="form-name" value="email" />
                        <p className={styles.hidden}>
                            <label>
                                Don’t fill this out if you’re human:{' '}
                                <input name="bot-field" />
                            </label>
                        </p>
                        <div className="flex justify-center">
                            <input
                                id="emailInput"
                                name="email"
                                type="email"
                                placeholder="Email"
                                className="input w-8/12 max-w-xs text-white"
                                style={{
                                    color: 'black',
                                    backgroundColor:
                                        'white' /* Ensure text is visible */,
                                }}
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                required
                            />
                            <button
                                type="submit"
                                className="btn btn-primary ml-2"
                                disabled={isSubmitting}
                            >
                                {isSubmitting ? 'Submitting...' : 'Register'}
                            </button>
                        </div>
                    </form>
                    <p className="text-sm mt-2 font-light opacity-70">
                        Register for updates (we promise not to spam)
                    </p>
                </>
            )}
        </div>
    )
}

Any suggestions would be appreciated!

Edit: from https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/:slight_smile:

In any HTML file in your site folder, include an HTML form with the netlify attribute and the input fields you want Netlify to process.

Is this a new requirement? Our site doesn’t have any static HTML files.

I tried adding an index.html with the following:

<html>
<body>
<!-- A little help for the Netlify post-processing bots -->
<form name="email" netlify netlify-honeypot="bot-field" hidden>
  <input type="email" name="email" />
</form>
</body>
</html>

Deployed to https://deploy-preview-69--cosmic-klepon-3c693c.netlify.app/, no results are recorded when submitting a form.

Note that the form is successfully being submitted on the client side, as per Chrome developer tools network tab.

Edit: the last build that detected the forms was on March 25 (Netlify App):

9:28:33 PM: Section completed: postprocessing
9:28:33 PM: Processing form - email
9:28:33 PM: Detected form fields:
 - email
9:28:33 PM: Processing form - feedback
9:28:33 PM: Detected form fields:
 - bot-field
 - email_form
 - help
9:28:34 PM: Site is live ✨

On May 5th we added robots.txt (Netlify App), after which point no forms are found:

3:52:34 PM: Post processing - Forms
3:52:34 PM: Post processing - header rules
3:52:34 PM: Starting post processing
3:52:34 PM: Post processing - redirect rules
3:52:34 PM: Post processing done
3:52:34 PM: Section completed: postprocessing
3:52:35 PM: Site is live ✨

Edit: moving index.html to public/form.html resulted in the form being detected during build:

1:46:59 PM: Processing form - email
1:46:59 PM: Detected form fields:
 - email
1:46:59 PM: Post processing done
1:46:59 PM: Section completed: postprocessing
1:46:59 PM: Starting post processing
1:47:00 PM: Site is live ✨
1:46:59 PM: Post processing - Forms
1:46:59 PM: Post processing - header rules
1:46:59 PM: Post processing - redirect rules

However submissions are still not recorded.

Chrome devtools reports the submission body as:

form-name=email&bot-field=&email=<redacted>%40gmail.com

Edit: modifying the fetch parameter from / to /form.html did the trick.

1 Like

I dug up the solution from here:

If you post to the /contact-form route (which is a known static HTML page), and not the /success route (which is handled by next.js), it should work.

I had to manually add a form.html that contains a static HTML version of the form so that the build could find it. Then I had to modify the ‘fetch’ path parameter.

It would be great if the Netlify Team could document this in the official Netlify with Next JS guide! :pray:

1 Like

The form being in HTML somewhere in your build output has always been a requirement of Netlify detecting the form.

The more recent explicit recommendation of creating a known static HTML file route is because the system was originally designed for static sites, and Next sites are operating on edge functions in front of Netlify’s other handling, causing them not to play nice with those existing features.

I agree Netlify should ensure the documentation is updated in some way to try and help Next users before they inevitably encounter the issue.

Hi Nathan,

Thank you for the information!

Can you please clarify how exactly the form parsing works? We didn’t have the HTML before and we were successfully collecting email addresses. Is it possible something else changed?

My concern is to avoid this situation from recurring in the future. I would very much like to avoid losing leads!

Thanks,
Richard

@abrichr I can provide no specific implementation details because I do not work for Netlify.

The forms documentation is here:

It starts with an explanation of “Automatic forms detection”.
I’m unaware of that base functionality having changed for many years.

It’s entirely possible that something specifically related to Netlify’s handling of Next has changed though.
Next seems to change quite frequently and Netlify are constantly changing/tweaking things regarding their handling of it.

I don’t use Next so can’t advise on anything Next specific.

Hey Nathan – thanks for that note, I’ve tagged the documentation team on this missing information and have requested they add this caveat to the official documentation. :saluting_face: I’m seeing it existed here, but is not on the official docs site:

Thanks for this discussion!

Awesome, thanks both!