Gatsby/React Form conditionally rendered elements failing to be submitted to Netlify

Support
,
1

Hi,

I have a form with an address textarea which I conditionally render depending if a user selects the ‘delivery’ option otherwise this textarea remains hidden.

The form works fine for all other fields but when the ‘address’ field renders it fails to send the target name or value.

My website form can be found at the bottom of this page: Picked Organic - Honest sustainable local

Troubleshooting I’ve done:

  • Using the React Chrome add-on I am able to see that state is being updated for ‘address’ name and value. But not when submitted the fields are not present.

      props
       new prop  :  ""
  state
      email   "hello@gmail.com"
      frequency   "weekly"
      isValidated  false
      message  "Hello!"
      name  "My Name"
      phone  "5654654654"
      size  "Large"
      showAddress  true  
      transport  "delivery"
      address  "123 Any Road"
  rendered by  
      react-dom@16.13.1

  • I have also tested without any conditional rendering and the address textarea content submits fine. So the issue I believe lies in how ‘this.state’ (form values) are handled on submit for the conditional rendered elements. I’m new to React so likely missing something obvious maybe?

Here is the code used to conditionally show ‘address’ field when the ‘delivery’ option is selected.

  state = {
    showAddress: false
  };

  showAddress(event) {
    if (event.target.value === "delivery") {
      this.setState({ showAddress: true });
    } else {
      this.setState({ showAddress: false });
    }
  }

And I am using a ternary operator for conditionally rendering the ‘address’ element when showAddress equals ‘true’.

             {this.state.showAddress ? (
                <>
                  <div className="field">
                    <label className="label" htmlFor={"address"}>
                      Delivery Address
                    </label>
                    <sub>(£1.50 charge)</sub>
                    <div className="control">
                      <textarea
                        name={"address"}
                        className="textarea"
                        id={"address"}
                        type={"textarea"}
                        onChange={(this.handleChange} 
                        required={true}
                        placeholder={"delivery address"}
                      />
                    </div>
                  </div>
                </>
              ) : null}

I appreciate any help you are able to give.

Kind Regards
Chris

2

Hi, @theirishkiwi.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

We do cover this issue in that support guide.

This the the summary of the issue. There is a requirement that all fields which could possibly be sent be defined in an HTML version of that form somewhere. This field isn’t in the HTML so it doesn’t work.

It doesn’t have to be in the same HTML file but all possible fields must be defined in HTML somewhere in the site’s files before they will work.

Because this form doesn’t have that field defined in the HTML, the backend is not configured to accept it as an input. It won’t work until it exists in an HTML version of the form which, again, can be a separate file only used to create the backend form handler and not used for anything else.

If there are other questions or concerns, please let us know.

3

Hi, @luke,

I have already checked and read the existing support guides. This was indeed and is always, my first port of call. I have also been searching the forums as well as Google. Now I will admit I may have been too narrow in my search as I am using React+Gatsby and was specifically looking React+Gatsby+conditional rendering as this is specifically where my issue lies, from what I can tell.

You mention the need to have an HTML version of my form somewhere. Is this required with Gatsby? Aside from the conditional address field, my form is working fine and gets submitted and I can view the contents in Netlify. Is there something If there is specifically something I need to do additionally with my conditionally rendered address field I would be very grateful for your guidance here as I have been unable to find anything in the guides around conditionally rendered fields in a form using Netlify.

Here is the HTML I can see looking in Dev Tools, when I select “Delivery” and below this the comment field which is always visible and works fine.

address_html
address_html807×268 14.2 KB

Kind Regards
Chris

4

Hi, @theirishkiwi. About this:

You mention the need to have an HTML version of my form somewhere. Is this required with Gatsby?

Yes, I’m 100% sure the HTML form with all fields in required. That is the solution here.

The field/input named “address” is created by the site javascript. The systems that create the form handler parse the site HTML when the deploy occurs.

Those systems don’t run your javascript. Those systems only parse the HTML as it is at the time of the deploy without any changes by the javascript.

The form in the pure HTML format of the form doesn’t have this field/input. This is found in the file named /veg-boxes/index.html. The form there is the one below (reformatted for reading):

<form name='subscription' method='post' action='/contact/thanks/'><input type="hidden" name="form-name" value="subscription" />
  <div hidden=""><label>Don’t fill this out:
      <!-- --> <input name="bot-field" /></label></div>
  <div class="field"><label class="label" for="name">Your name</label>
    <div class="control"><input type="text" class="input" name="name" id="name" placeholder="your name" /></div>
  </div>
  <div class="field"><label class="label" for="email">Email</label>
    <div class="control"><input type="email" class="input" name="email" id="email" placeholder="email" /></div>
  </div>
  <div class="field"><label class="label" for="phone">Contact Number</label><input type="tel" class="input" name="phone" id="phone" placeholder="contact number" /></div>
  <div class="field"><label class="label" for="size">Box Size</label><select name="size" class="input" id="size">
      <option value="" disabled="">- select size -</option>
      <option value="Small">Small - £10</option>
      <option value="Large">Large - £15</option>
    </select></div>
  <div class="field">
    <div class="control"><label class="label" for="frequency">Frequency</label>
      <div class="control"><label class="radio"><input type="radio" name="frequency" component="input" id="weekly" value="weekly" /> <!-- -->Weekly</label><label class="radio"><input type="radio" name="frequency"
            component="input" id="fortnightly" value="fortnightly" /> <!-- -->Fortnightly</label></div>
    </div>
  </div>
  <div class="field">
    <div class="field">
      <div class="control"><label class="label" for="transport">Transport</label>
        <div class="control"><label class="radio"><input type="radio" name="transport" component="input" id="collection" value="collection" /> <!-- -->Collection</label><label class="radio"><input type="radio"
              name="transport" component="input" id="delivery" value="delivery" /> <!-- -->Delivery</label></div>
      </div>
    </div>
  </div>
  <div class="field"><label class="label" for="message">Comment/Requests</label>
    <div class="control"><textarea class="textarea" name="message" id="message" placeholder="comment/requests"></textarea></div>
  </div>
  <div class="buttons"><button class="button is-link" type="submit">Subscribe!</button><button class="button is-link" type="reset">Reset</button></div>
</form>

There is no input for the named “address” in that form. Because of that, the form handler won’t access inputs with that name. It only accepts fields/inputs in the HTML deployed and the HTML deploy doesn’t have “address”.

The solution for this will be to create a pure HTML version of the form which contains all possible inputs/fields. You don’t have to use that HTML form on the site but it must exist.

For example, could you make sure all fields were showing in the browser, copy the form from devtools to a new HTML file (for example, one named /not-used/form.html) and then the form handler would process all the fields. You can even set up a redirect so that this form isn’t visible on the deployed site with a _redirects rule like so:

/not-used/* /404 404!

The key here is that an HTML version with all possible fields/inputs must exist or the form handler won’t accept them.

If there are other questions, please let us know.

1 Like
5

@luke, thank you for the detailed explanation. This makes sense now. I will come back with any questions I might still have.

Much appreciated!
Chris

6

Hi, @luke,

I can confirm the issue is now fixed and.

The solution was to add a new directory here /pages/not-used containing form.js containing all possible inputs/fields. Which would be rendered on build.

/pages/not-used/form.js

Thanks again for all your help!
Chris

1 Like