Hello 
My form is appearing in my admin panel, however all my attempted submissions are appearing empty! I’m really hoping this is an easy fix.
Staging URL
Attempted Solutions:
- [Support Guide] Form problems, form debugging, 404 when submitting
- How to Integrate Netlify’s Form Handling in a React App
- Forms setup | Netlify Docs
Behaviour
The form is submitting “as expected” with status 200 and a properly encoded payload/body and keys that correspond to my inputs’ name attribute. Every submission in the Netlify forms panel is appearing entirely blank, however.
Implementation Details
This is a Gatsby site using Contentful as the CMS. I am getting the data to populate/shape my form inputs from Contentful and rendering them iteratively with a map. Everything appears to be correct on the staging site I linked towards the top of my post, but I’m a running out of ideas.
Form Code
At the risk of proving too much detail, here’s the bulk of my form’s code.
Summary
`const ContactForm = props => {
const { theme, submitButton, submitButtonText, name: formName } = props
let { elements } = props
elements = elements ||
const formSchema = elements.reduce((schema, element) => {
const { name } = element
if (!schema[name]) {
schema[name] = ‘’
}
return schema
}, {})
const [formState, setFormState] = useState(formSchema)
const [showSubmitMsg, setShowSubmitMsg] = useState(false)
const formRef = useRef()
useEffect(() => {
const { current } = formRef
if (current) {
document.addEventListener(‘prefill’, prefillHandler)
}
return () => {
document.removeEventListener(‘prefill’, prefillHandler)
}
}, [formRef])
const prefillHandler = e => {
const {
detail: { prefillValue, targetInput },
} = e
if (targetInput && prefillValue) {
if (formState.hasOwnProperty(targetInput.name)) {
setFormState({ ...formState, [targetInput.name]: prefillValue })
}
}
}
const handleInputChange = event => {
const target = event.target
const value = target.value
const name = target.name
setFormState({
…formState,
[name]: value,
})
}
const handleSubmit = event => {
event.preventDefault()
const body = encode({
‘form-name’: formName,
…formState,
})
console.log(‘Encoded body’, body)
console.log(‘Parsed body’, {
‘form-name’: formName,
…formState,
})
fetch('/?no-cache=1', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body,
})
.then(handleSuccess)
.catch(error => alert(error))
}
const handleSuccess = () => {
setFormState(formSchema)
setShowSubmitMsg(true)
}
const closeModal = () => {
setShowSubmitMsg(false)
}
return (
{/* The form-name hidden field is required to support form submissions without JavaScript */}
Don’t fill this out:{’ '}
{elements.map(
({ name, placeholder, required, type, options, id, label }) => (
<React.Fragment key={id}>
<Heading
{…label}
text={required ?
${label.text}* : label.text}theme={theme}
/>
</React.Fragment>
)
)}
{submitButton && submitButtonText && (
<SubmitButton {…submitButton} name=“contact-submit”>
{submitButtonText}
)}
Thank you for reaching out to us! We will be in touch shortly.
)
}`