Learn-to-send-email-via-google-script-html-no-server: readyState remains at 1
I noticed that my old implementation was missing some updates (e.g., honeypot field, form-elements class), so I am trying to upgrade it. However, even with the following updates to my code, the .form-elements class is not hiding, and neither is the .thankyou_message element appearing:
- Copied/pasted latest
google-apps-script.jsinto script editor of existing Google Sheet, added back customTO_ADDRESS, and published newest version. Did not change web app URL. - Incorporated latest example form code (e.g., honeypot field) into existing HTML page. Confirmed the following:
<form>has a class ofgform.<form>contains a child element<div class="form-elements>.- Each form field is wrapped in its own
<fieldset>within.form-elements. - The thank-you message content is outside of
.form-elementswhile still being inside.gformwith an inline style ofdisplay: none;and a class ofthankyou_message. - My CSS file does not hide
.thankyou_message.
- Copied/pasted latest
form-submission-handler.js. No code customizations.
I appended detailed key code snippets at the bottom.
When debugging in Chrome, I noticed that xhr.readyState always remains at 1, and the debugger never jumps inside of the onreadystatechange callback function. Oddly enough, the form fields do end up getting saved to my Google Sheet.
What am I missing? Thanks in advance for your help!
Google Sheet script
var TO_ADDRESS = "[email protected]";
...
function doPost(e) {
// send email if to address is set
if (sendEmailTo) {
MailApp.sendEmail({
to: String(sendEmailTo),
subject: "Form submitted by " + mailData.name,
replyTo: String(mailData.email),
htmlBody: formatMailBody(mailData, dataOrder)
});
}
...
}
HTML form
<form class="gform" method="POST" action="https://script.google.com/macros/s/.../exec">
<div class="form-elements">
<fieldset>
<label for="name">Name</label>
<input id="name" type="text" name="name" placeholder="First and last" required />
</fieldset>
...
<button class="button button--primary button-submit full_width">Submit</button>
</div>
<div class="thankyou_message" style="display: none;">
<h2 class="heading__beta">Thank you so much!</h2>
</div>
</form>
tiffting
All 4 comments
Oddly enough, the form fields do end up getting saved to my Google Sheet.
So forms have a default submit action which will send most of their data to the Google Script and still save it / send an email. Some functionality isn't supported (like hiding fields, honeypot, hiding form, thank you message, ordering fields, etc.), but basically it would work. This is also beneficial so that clients without JS enabled can still use your site/form.
Typically, I've seen this occur when either A) the clientside JS fails to load in some way or B) the clientside JS is not finding the form in order to override the default and use the custom submit functionality. You mentioned you debugged it - what happens on page load, is it triggering forms[i].addEventListener("submit", handleFormSubmit, false) for your form? When you hit submit, it is going into handleFormSubmit? It sounds like it is, if you are getting values on the XHR. What is in your Google Script, have you for sure updated it to the latest version and published it per the steps in the tutorial? (publishing can be a little weird/convoluted). I know the end of the doPost function needs to return the success results, otherwise the form would sit and wait for a response, and that could explain why onreadystatechange is never getting called...
I took the HTML form you provided, added HTML tags around it, and a script tag to load the clientside JS on master here. It worked to submit the form, hide it, and show the thank you message.
<html>
<script src="form-submission-handler.js"></script>
<form class="gform" method="POST" action="https://script.google.com/macros/s/.../exec">
<div class="form-elements">
<fieldset>
<label for="name">Name</label>
<input id="name" type="text" name="name" placeholder="First and last" required />
</fieldset>
...
<button class="button button--primary button-submit full_width">Submit</button>
</div>
<div class="thankyou_message" style="display: none;">
<h2 class="heading__beta">Thank you so much!</h2>
</div>
</form>
</html>
If none of this helps, could you maybe whip up an example on Codepen, like here? It would be great to see what you are seeing.
https://codepen.io/mckennapsean/pen/gdYzNY
mckennapsean
on 13 Aug 2019
Thanks, @mckennapsean! Your diagnosis was spot on: one of my Chrome extensions must be interfering with the client-side JS doing its thing, but I'm not sure which one (maybe Ghostery, even while it's disabled). So I tried the form in an incognito window, and the readyState changes, .gform is hidden, and the thank-you message appears as expected. I'm a little bit concerned that actual users of the website may also run into this issue, but I don't know that there's much that can be done to prevent it.
tiffting
on 13 Aug 2019
That is correct. If JS is blocked then most functionality will be limited to browser defaults. You could use a page redirect to a thank you page if you wanted those users to see one.
mckennapsean
on 13 Aug 2019
Yep, that makes sense. Thanks for your help tracking this down!
tiffting
on 13 Aug 2019
Related issues
Brothman
路
3Comments
mckennapsean
路
3Comments
mckennapsean
路
4Comments
EugeneFitzher
路
4Comments
onurusluca
路
4Comments
Most helpful comment
Thanks, @mckennapsean! Your diagnosis was spot on: one of my Chrome extensions must be interfering with the client-side JS doing its thing, but I'm not sure which one (maybe Ghostery, even while it's disabled). So I tried the form in an incognito window, and the
readyStatechanges,.gformis hidden, and the thank-you message appears as expected. I'm a little bit concerned that actual users of the website may also run into this issue, but I don't know that there's much that can be done to prevent it.