Learn-to-send-email-via-google-script-html-no-server: Form field values collected in the incorrect order

[athenaozanich]

My question is: "Will I need to follow the markup in the index.html file here to get this to work correctly."

Seems the form fields are being collected in an order that does not match the order of my form fields. I have been looking into this and the only difference between my version of this and yours seems to be the fact that in your form you have the input and labels grouped with a fieldset tag for each pairing. I am only using two fieldset tags for the entire form for the sake of maintaining semantic markup.

<fieldset>
          <legend><h2>Contact Information</h2></legend>

          <label for="name">Full Name</label>
          <input id="name" aria-label="name" type="text" name="name" placeholder="This field is required" required>

          <label for="email">Email Address</label>
          <input id="email" aria-label="email" type="email" name="email" placeholder="This field is required" required>

          <label for="phone-number">Phone Number</label>
          <input id="phone-number" aria-label="phone-number" type="tel" name="phone-number" placeholder="(xxx)xxx-xxxx">

          <label for="address">Street Address</label>
          <input id="address" aria-label="address" type="text" name="address" placeholder="1234 Elm Street">

          <label for="city">City</label>
          <input id="city" aria-label="city" type="text" name="city" placeholder="Haven">

          <!--Select and its corresponding options and label-->

          <label for="state">State</label>
          <select id="state" aria-label="state" name="state">
            <option value="" disabled selected >Choose State</option>
            <option>Ohio</option>
            <option>Michigan</option>
            <option>New York</option>
            <option>Florida</option>
          </select>

          <label for="zip">Zip Code</label>
          <input id="zip" aria-label="zip" type="text" name="zip" placeholder="xxxxx">
        </fieldset>


      <!--Newsletter section of the form.-->


        <fieldset id="newsletter">
          <legend><h2>Newsletter</h2></legend>
          <p>Select the newsletters you would like to recieve.</p>

          <!--Checkboxes-->

          <input id="html" aria-label="html" type="checkbox" name="html">
          <label for="html">Html Newsletter</label>

          <input id="css" aria-label="css" type="checkbox" name="css">
          <label for="css">Css Newsletter</label>

          <input id="jscript" aria-label="jscript" type="checkbox" name="javascript">
          <label for="jscript">Javascript Newsletter</label>

          <p>Newsletter format prefernce.</p>

          <!--Radio buttons-->

          <input id="html-format" aria-label="html-format" type="radio" name="format-choice" value="html">
          <label for="html-format">Html</label>

          <input id="plain-text" aria-label="plain-text" type="radio" name="format-choice" value="plain-text">
          <label for="plain-text">Plain Text</label>

          <p>Other topics you'd like to hear about.</p>

          <!--Textarea and label-->

          <label for="message"></label>
          <textarea id="message" aria-label="message" name="message" placeholder="Type your messaage here."></textarea>
        </fieldset>
        <button type="submit">Submit</button>

Update: after testing a change to the html structure in my files I am not seeing any changes in the order that the information is being collected in. I can say that the cells in the spreadsheet are being populated with the appropriate information per column. All in the correct order as well which leads me to believe the issue to be in the way the keys are being added to the object?
(Sorry still learning a lot, doubly so with regards to working with github to collaborate like this, so I apologize in advance for any issues with this.... issue 😜... see what I did there?)

[mckennapsean]

Seems the form fields are being collected in an order that does not match the order of my form fields.

Is this in the email or in the spreadsheet? (or both)

I do not believe the order is handled in the spreadsheet - or it may add fields in the top row if they are missing otherwise it will use the column headers to place data in the sheet for you (in whatever order you have in your spreadsheet). You can delete or reorder those fields to have the desired order. Unfortunately, dynamic sorting of the columns is not supported (it would require transposing all data in the entire spreadsheet after writing each new row).

I do not believe the fieldset should break anything, it just processes the fields in the order they are in the DOM. If the field elements in the DOM do not match what you see visibly on the page (due to CSS) then that could cause a discrepancy. I am guessing it isn't this though based on your description!

Are you for sure utilizing the provided clientside Javascript code when submitting the form? You could add a breakpoint or debugger call inside the handleFormSubmit() function - if the breakpoint is hit you can see what order is being set and sent to the server (the server also needs to process this order correctly but if we send the wrong order then that would be what's wrong). If the breakpoints are never hit, then that means we aren't loading the clientside JS and instead it will send a plain object which I think sorts based on alphabetical key ordering by default, so the order is always deterministic based on the keys (you could alternatively change the names of the elements to include a number?). This means we aren't tying in our custom JS callback event to the form, so it uses the native browser submit callback.

[athenaozanich]

Thank you for your prompt feedback, I will try to debug this as described above and I will post an update accordingly once I have more information!

[athenaozanich]

Update: Not entirely sure what I did wrong but this issue was definitely on my end. After using a debugger statement to test the appropriate loading of the clientside form handler JS file I was able to ascertain that I was indeed NOT connected to it. I'm assuming it had something to do with the path I used for the file. I followed your VERY thorough walk through for connecting that file and was able to get it connected. After confirming that the JS was being loaded correctly I can also see that the form data is being sent to my email in the correct order! This is an awesome repository powerful, useful and easy to work with especially for someone like myself a Mid level developer under... development? (I know I'm bad with the wordplay 😝)

Jokes aside, thank you for your feedback and assistance in sorting this out!
(P.S. Not sure if the proper etiquette is to close this myself or leave that for you? If you could advise me on how to proceed in this respect for this and future situations.)

[mckennapsean]

Super glad you figured it out and got the form working!

You are more than welcome to close an issue you opened if your issue has been fixed. If you have any ideas on how we could help others (say our FAQs at the end) who face similar problems, that would also be neat. Thanks for the updates!

[athenaozanich]

Ok I'll close this out and make a pull request with an additional FAQ on this issue so that if someone else struggles with this they will have access to information without needing to open an issue! Thank you much for your time!!