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!
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.
I’m seeing it existed here, but is not on the official docs site: