The body and head tags for your entire site (in the themes I have used) are in theme.liquid
The closing tag is </body> so you'd paste in the proper javascript before that line. I used ctrl+f to find it.
What you might want to do instead of pasting in that long javascript directly into your theme.liquid:
Go into your theme editor, and then create a new file in the "Assets" folder, name it something (we'll use "send-email.js" as an example), and then paste in the javascript to that file. Save it, then go back to your theme.liquid and paste the following before the closing </body> tag:
{{ 'send-email.js' | asset_url | script_tag }}
so if I were to do that the above screenshot would instead look like this:
I'm not a liquid/js developer but I've done this many times and it seems to work well. Maybe someone more knowledgeable has a better solution. Good luck!
Thanks
I have added created the send-email.js in assets
that asset contains the code from githut (originally titled form-submission-handler.js
I have added the line of code to the theme.liquid
my form code looks like this
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="contact form example">
</head>
<body>
<!-- START HERE -->
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Style The Contact Form How Ever You Prefer -->
<link rel="stylesheet" href="style.css">
<form class="gform pure-form pure-form-stacked" method="POST" data-email="example@email.net"
action="https://script.google.com/macros/s/AKfycbwnwr73aW7bEZ-jKPE3rXC1_G3wjW3wEN7o9ZzH/exec">
<!-- change the form action to your script url -->
<div class="form-elements">
<fieldset class="pure-group">
<label for="name">Name: </label>
<input id="name" name="name" placeholder="What your Mom calls you" />
</fieldset>
<fieldset class="pure-group">
<label for="message">Message: </label>
<textarea id="message" name="message" rows="10"
placeholder="Tell us what's on your mind..."></textarea>
</fieldset>
<fieldset class="pure-group">
<label for="email"><em>Your</em> Email Address:</label>
<input id="email" name="email" type="email" value=""
required placeholder="your.name@email.com"/>
</fieldset>
<fieldset class="pure-group">
<label for="color">Favourite Color: </label>
<input id="color" name="color" placeholder="green" />
</fieldset>
<fieldset class="pure-group honeypot-field">
<label for="honeypot">To help avoid spam, utilize a Honeypot technique with a hidden text field; must be empty to submit the form! Otherwise, we assume the user is a spam bot.</label>
<input id="honeypot" type="text" name="honeypot" value="" />
</fieldset>
<button class="button-success pure-button button-xlarge">
<i class="fa fa-paper-plane"></i> Send</button>
</div>
<!-- Customise the Thankyou Message People See when they submit the form: -->
<div class="thankyou_message" style="display:none;">
<h2><em>Thanks</em> for contacting us!
We will get back to you soon!</h2>
</div>
</form>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" src="send-email.js"></script>
<!-- END -->
</body>
</html>
I still get this screen though when I submit the form:
