Form Submissions Empty | Inputs Include Name Attr

Hello :wave:!

My form submissions are coming in blank. Please help me!

I know this is a common problem. Everything seems like it should okay. I’m hoping this is a simple fix.

Staging URL

Solutions Consulted:

Behaviour:

The form submits properly (status 200) and the form data is being encoded/sent properly and the payload has keys that correspond to my form’s rendered name attributes. My form is appearing in Netlify, however all my form’s submissions are totally empty.

Implementation Details:

This is a Gatsby Site. My form’s inputs are coming from my CMS (Contentful) and being rendered in an iterative fashion. Ex. formInputs.map(input => <MyInput {…input} />). I suspect that this might be cause of the issue, but the form seems to be rendering properly.

At the risk of being a bit too verbose here, 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’: ‘contact’,
…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.




)
}`

For efficiency purposes I am wondering if a file or text in a textarea still gets transferred to the server if you omit the name attribute or set it to null. eg

```
<input type="file" id="file" name="">
<textarea id="text" name="">
```

I notice that the data is not available at the server if you do this.

Hey @SBRoberts,
We’re showing that you received one submission to the 365integrated-staging site on 12/1/20. The form fields were name, email, service, message. Maybe you were able to resolve this since writing in? Please let us know if that’s not the case!