Home
Support Forums

Empty payload for form submission: nextJS statically deployed site

Solutions I’ve tried

Debug info

  • site name: priceless-swartz-c27cfd.netlify.app

Notes

  • I followed the official steps to add an HTML form, including the hidden input field.
  • but note that I’m statically deploying the site, meaning there’s no SSR.
  • the index HTML contains the form and it matches the code.
  • however, when i hit submit, the payload is empty. Screenshot below

Update: If you look at the code, every input has a disabled form which gets set to true on form submission. Unfortunately, if i’m not mistaken, disabled fields are never submitted. Removing that behavior and it’s now working locally. Gonna deploy…

Update: yea the disabled fields were making the payload empty :doh: :smile:

Code is below:

<Form
          name="contact"
          data-netlify="true"
          method="POST"
          onSubmit={handleSubmit}
          action="/thanks"
        >
          <input type="hidden" name="form-name" value="contact" />
          <label htmlFor="name">Name:</label>
          <input
            disabled={disabled}
            type="text"
            name="name"
            autoComplete="name"
            required
          />
          <label htmlFor="email">Email:</label>
          <input
            disabled={disabled}
            type="email"
            name="email"
            autoComplete="email"
            required
          />
          <label htmlFor="phone">Phone:</label>
          <input
            disabled={disabled}
            type="tel"
            name="phone"
            autoComplete="tel"
            maxLength={10}
            minLength={10}
            required
          />
          <label htmlFor="message">Message:</label>
          <textarea
            disabled={disabled}
            name="message"
            autoComplete="off"
            maxLength={1000}
            minLength={10}
            required
          ></textarea>
          <input type="submit" value="Contact us!" />
        </Form>

Hi @adancingteddybear

Welcome to the Netlify community.

It appears you found a problem then discovered a solution. Is that correct?

That is correct @coelmay