Technical Q&A

Shop_Ski_Tak_Hu · ‎10-26-2021

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

lance_w · ‎10-26-2021

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:

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!

Shop_Ski_Tak_Hu · ‎10-28-2021

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>&nbsp;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:

Technical Q&A

Index.html

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links