Old form fields stuck in dashboard after changing fields in code

Hey Netlify! I’ve been down the rabbit hole of support threads and but can’t seem to find anything that fixes my issue:

I had a form working (responses came up correctly in the dashboard) with “form-name” = “contact”, with the fields “guest-amount” (text input for integers, “guest-names” (text input for names), and “food-allergies” (text input for allergies).

Now, I edited that form in my Gatsby JS code to no longer have “guest-amount” or “guest-names” and I’ve renamed “food-allergies” to “foodAllergies”. Now when submitting the form, the dashboard still includes the old names, that show up with blank values, and does not show the new fields.

I’ve tried renaming the “form-name” to “rsvp” instead of “contact”, to maybe trick the crawler into re-parsing the form. However, when it is named “rsvp”, it 404s.

Completely substituting the code I’ve written with the Netlify form example still didn’t trigger the dashboard on figuring out the fields. Here’s the code I’ve anyway if it helps!

class RsvpForm extends React.Component {
  state = {
    attending: [],
    invited: this.props.user.names.join(","),
    foodAllergies: "",
  }

  encode = data => {
    return Object.keys(data)
      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&')
  }

  handleCheckboxChange = event => {
    const target = event.target
    const name = target.name
    if (!this.state.attending.includes(name)) {
      this.setState({
        attending: this.state.attending.concat(name),
      })
    } else {
      this.setState({
        attending: this.state.attending.filter((attendee) => attendee !== name),
      })
    }
  }

  handleChange = (event) => {
    this.setState({[event.target.name]: event.target.value })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    const form = e.target
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: this.encode({
        'form-name': form.getAttribute('name'),
        ...this.state,
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch((error) => alert(error))
  }

  render() {
    return (
    <React.Fragment>
      <p>Please check the box of each guest attending. If none are attending, please leave boxes unchecked:
        {this.props.user.names.map((attendee, i) => 
          (
            <React.Fragment key={`attendee-${i}`}>
              <br />
              <label><input type="checkbox" name={attendee} value="checked" onChange={this.handleCheckboxChange}/> {attendee}</label>
            </React.Fragment>
          )
        )}
      </p>
      <form
      name="contact"
      method="POST"
      action="/success"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      onSubmit={this.handleSubmit}
    > 
      <p>
        <label>Food allergies <input type="text" name="foodAllergies"
                                     placeholder="none"
                                     autoComplete="off"
                                     onChange={this.handleChange}
                                     /></label>
      </p>
      <input type="hidden" name="invited" value={this.state.invited}/>
      <input type="hidden" name="attending" value={this.state.attending.join(",")}/>
      <input type="hidden" name="form-name" value="contact" />
      <p>
        <button type="submit">Send</button>
      </p>
    </form>
    </React.Fragment>)
  }
}

export default RsvpForm;

Hi, @rowin1. The starting place for all forms debugging is here:

If there are still questions after reading that, please send us the following information:

  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 ”)

Hey Luke! I’ve read that before but decided to give it another look through, and stumbled on this line:

If you’re using Gatsby, or any other static site generator, try browsing your site with JavaScript disabled – if you can’t see the form in the source code, the Netlify bots probably won’t either.

I tried that and realized since making updates to my form, the form wasn’t able to be shown without Javascript. So as a solution, I added a new page to my Gatsby that mimics my JS form and that is very simple so that it will be converted to static html properly. AND IT WORKED! If you haven’t linked those docs, I wouldn’t have re-read them. Thank you!

import React from "react"

import Layout from "../components/layout"

const FormPage = () => (
  <Layout>
    <form
      name="contact"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
    > 
      <p>
        <label>Food allergies <input type="text" name="foodAllergies"
                                     /></label>
      </p>
      <input type="hidden" name="invited"/>
      <input type="hidden" name="attending"/>
      <input type="hidden" name="form-name"/>
      <p>
        <button type="submit">Send</button>
      </p>
    </form>
</Layout>
);

export default FormPage
1 Like