Form Submissions Empty

Hello :wave:

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:


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.


`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( {
    setFormState({ ...formState, []: prefillValue })


const handleInputChange = event => {
const target =
const value = target.value
const name =
[name]: value,

const handleSubmit = event => {
const body = encode({
‘form-name’: formName,
console.log(‘Encoded body’, body)
console.log(‘Parsed body’, {
‘form-name’: formName,

fetch('/?no-cache=1', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  .catch(error => alert(error))


const handleSuccess = () => {

const closeModal = () => {

return (

{/* The form-name hidden field is required to support form submissions without JavaScript */}

Don’t fill this out:{’ '}

({ name, placeholder, required, type, options, id, label }) => (
<React.Fragment key={id}>

text={required ? ${label.text}* : label.text}

{submitButton && submitButtonText && (
<SubmitButton {…submitButton} name=“contact-submit”>


Thank you for reaching out to us! We will be in touch shortly.


Hi, @SBRoberts. Our support team can troubleshoot this issue with the following details:

  1. The URL for your live form as you want visitors to use it
  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 ”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse

From my first assessment of this issue, my best guess is that there is no HTML only form with all the options in it. I know your form is dynamically generated as browse time. However, the HTML only form is required for the build system to create the backend form handler.

I did look at index.html for the staging deploy link provided and there is not a single <form> tag in that file. This reinforces the hypothesis that the HTML form is missing and that is the root cause.

If there are questions about the HTML form requirement (or if you have a link to where that form is found), please let us know.

Thanks for taking the time to respond, Luke!

I do see what you’re saying now. You’re totally right that there isn’t a static/plain html form and that I am generating the form dynamically.

I managed to resolve my issues by adding a second, non-functional form to my page that is hidden with read-only properties. This second form is static is not generated dynamically and its inputs match my dynamic form exactly. While this isn’t the most scalable solution, it totally works for my needs right now.

I appreciate the help and prompt response!

1 Like