Send Email from a Static HTML Form using Google Apps Mail

Question

I have been working through this link https://www.npmjs.com/package/html-form-send-email-via-google-script-without-server also https://github.com/dwyl/html-form-send-email-via-google-script-without-server but can't make it through points 10 & 11 - getting a 'thank you for your message' alert instead of JSON response/alert.

I have talked to Google online and they have referred me here now. I'm using it with bootstrap - my codes is below, any ideas would be great.

<section class="test">
<a name="index"></a>
  <div class="container">
    <div class="row index_section">
      <div class="col-md-10 col-md-push-1">
      <h2 class="index_h2">The RE Ledger Foundation is a consortium of east coast real estate and financial services executives with the purpose of exploring the applications and advantages of harnessing a blockchain backed peer-to-peer network.</h2>
      <p><a class="btn btn-secondary btn-lg index_button" role="button" href="#contact" data-toggle="modal" >Contact Us</a></p>
      </div>
    </div>
  </div>

</section>

  <div class="modal fade" id="contact" role="dialogue">
    <div class="modal-dialog">
      <div class="modal-content">
        <form class="form-horizontal" method="POST" action="https://script.google.com/a/macros/headlandholdings.co/s/AKfycbyA1uVrYJK3dowguYNKo65hPfQKLGCFh8_865dFMhXzfE__Io8/exec">
          <div class="modal-header">
            <h4>Contact RE Ledger</h4>
          </div>
          <div class="modal-body">

            <div class="form-group"><!-- For every row -->
              <label for="Contact-name" class="col-lg-2 control-label"> Name: </label>
              <div class="col-lg-10">

                <input type="text" class="form-control" id="contact-name" name="contact-name" placeholder="Please put your full name">
              </div>
            </div>

            <div class="form-group"><!-- For every row -->
              <label for="contact-email" class="col-lg-2 control-label"> Email: </label>
              <div class="col-lg-10">

                <input type="email" class="form-control" id="contact-email" name="contact-email" placeholder="email@siteexample.com">
              </div>
            </div>

            <div class="form-group"><!-- For every row -->
              <label for="contact-message" class="col-lg-2 control-label"> Message: </label>
              <div class="col-lg-10">

                <textarea type= "text" name="message" rows="8" class="form-control"> </textarea>
              </div>
            </div>

            <div class="modal-footer">
              <a href="#index" class="btn btn-default" data-dismiss="modal">Close it</a>
              <button class="btn btn-primary" type="submit"> Submit</button>
            </div>
            <div style="display:none;" id="thankyou_message">
              <h2><em>Thanks</em> for contacting us!</h2>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</div><!-- /.container -->

<!-- Included so that when you complete a contact request you get a message -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>

Answer 1

<form class="form-horizontal" method="POST" action="https://script.google.com/a/macros/headlandholdings.co/s/AKfycbyA1uVrYJK3dowguYNKo65hPfQKLGCFh8_865dFMhXzfE__Io8/exec">

In the above line of code, the action= should be referring the link provided by Google. In point 5 of the github link you provided, you should get a link after deploy web app . Use that link instead of the example code.

A tip for you: only copy codes you understand.

Answer 2

Ok - this has taken ages but I figured it out. First of all use the Github link at the top not the other one - it's not as easy to follow.

The issue with the JSON/Ajax was that I was trying to use a different modal to the google sheets one in the example. The important bit is that the id="gforms" line is inserted where your personal generated email address link.

I then took the index example from github and methodically moved across all of the name data. It's tedious but it worked

  <div class="modal fade" id="contact" role="dialogue">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="gform" class="form-horizontal" method="POST" action="--- YOUR LINK HERE ---">

          <div class="modal-header">
            <h4>Contact RE Ledger</h4>
          </div>

          <div class="modal-body">




            <fieldset class="form-group">
              <label for="name" class="col-lg-2 control-label">Name: </label>
              <div class="col-lg-10">
              <input type="text" class="form-control" id="name" name="name" placeholder="Please put your full name" />
            </fieldset>

            <fieldset class="form-group">
              <label for="email" class="col-lg-2 control-label">Email: </label>
              <div class="col-lg-10">
              <input type="email" class="form-control" id="email" name="email" value="" required placeholder="email@siteexample.com"/>
            </fieldset>

            <fieldset class="form-group">
              <label for="message" class="col-lg-2 control-label">Message: </label>
              <div class="col-lg-10">
              <textarea type= "text" id="message" name="message" rows="8" class="form-control"></textarea>
            </fieldset>

            <div class="modal-footer">
              <a href="#index" class="btn btn-default" data-dismiss="modal">Close it</a>
              <button class="btn btn-primary" type="submit"> Submit</button>
            </div>


          </div>
        </form>
        <!-- Customise the Thankyou Message People See when they submit the form: -->

        <div style="display:none;" id="thankyou_message">
          <h2 class='col-lg-10 model_message'>  Thanks for your message - We will get back to you soon</h2>
        </div>

      </div>
    </div>
  </div>






</div><!-- /.container -->

<!-- Included so that when you complete a contact request you get a message -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

Answer 3

1. make sure that your form has class 'gform'
2. make sure to add another div under the form directly has class 'form-elements' and close this div before 'thankyou_message'Div