Learn-to-send-email-via-google-script-html-no-server: Thankyou Message not working in hugo-icon theme : [Violation] Parser was blocked due to document.write(<script>) (anonymous) @ (index):572

[mckennapsean]

Thanks for sharing your issue in a codepen! You need class="gform" set on the form.

After this change, I am seeing the mythical CORS policy request for the first time ever after doing this though, so may need to check further. I have never known how/why this has occurred for so many people, so it'd be nice to figure that one out.

[EricTalv]

FIXED

I found the even bigger conclusion!

Turns out the _Error_ I was pointing out was completely irrelevant and was actually HUGOs builtin fault.

As for why the form was forwarded to another tab was due to as @mckennapsean pointed out I was missing the class="gform" from the form.

Yet still, I was missing the message.
After a bit of debugging turned out this was just a simple _grammatical error_.

My _thankyou_message_ was firstly using ID not CLASS and since the query selector is adding form.
it's looking for the message inside the <form> brackets and I had not put it there.

Another thing there was also missing was the whole form contents had to be in a div called form-elements since the script is looking inside of there!

One somewhat odd thing I found is that you should hold your script indefinitely below the form, otherwise it doesn't seem to work and I dont know about that.

What did we learn?

1. Debug a lot! The DevTools are awesome
2. Always double check the tutorial example where things should be.
3. If not sure, DEBUG!

Thank you @mckennapsean for your reply!

The only question i might have is what is data-cfasync leaving it true or false doesn't seem to affect much of anything

[mckennapsean]

Turns out the Error I was pointing out was completely irrelevant and was actually HUGOs builtin fault.

What error is that? I am curious if that pertains to the issue in the codepen you shared. I would like to get to the bottom of that. If there is something wrong on Hugo's end, might be good to share with that community.

One somewhat odd thing I found is that you should hold your script indefinitely below the form, otherwise it doesn't seem to work and I dont know about that.

Unfortunately the script has important things that must be set if you want those features to work. To get the thank-you, we need to be able to find it, and same if you want the form to hide. :) And the order of HTML+JS affects that too, the HTML must exist when you call the JS on page load in order to target and override the default submission behavior. Glad to hear you were able to get that all working together!

The only question i might have is what is data-cfasync leaving it true or false doesn't seem to affect much of anything

That is for CloudFlare's Rocket Loader. If you are using that on a domain with their support for that feature, then you could notice a difference. Not 100% certain, but it could affect runtime if some scripts are loaded & ran faster than the order provided by the HTML (I have no clue): https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-specific-JavaScripts-

[EricTalv]

The error is explained more indepth here -> Error

Basically in our case, Hugo when it starts it's localhost needs to add a script to the whole site
<script src="/livereload.js?port=1313&amp;mindelay=10"></script>

BUT It uses a method that shouldn't be used anymore thus chrome kinda warns you about it.
After I fixed my mailing problem now even that violation seems to be gone, which is interesting.

[mckennapsean]

Thanks for the follow-up! Sounds like everything is working as intended now, so I will close this (correct me if I am wrong!). I appreciate the updates and glad to hear it is all working for you!