Liquid, JavaScript, themes, sales channels
I am creating a contact us page with the following tutorial:
https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how
It all works fine, but I am trying to figure out the make it look good step. It talks about: Download the following Javascript file and update your index.html to point to it at the end of your file (*before the closing </body> tag)
Where is the index.html that I need to look for? I went into edit code but this was not listed as an option
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:
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023