使用Google Apps Mail从静态HTML表单发送电子邮件

时间:2017-08-14 00:53:26

标签: html twitter-bootstrap email google-drive-api

我一直在处理这个链接https://www.npmjs.com/package/html-form-send-email-via-google-script-without-serverhttps://github.com/dwyl/html-form-send-email-via-google-script-without-server,但无法通过点10& 11 - 感谢您的留言'提醒而不是JSON响应/警报。

我已经在线与谷歌进行了交谈,现在他们已经在这里推荐我了。我在引导程序中使用它 - 我的代码在下面,任何想法都会很棒。

<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>

3 个答案:

答案 0 :(得分:0)

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

在上面一行代码中,action=应该引用Google提供的链接。在您提供的github链接的第5点,您应该在deploy web app之后获得一个链接。使用该链接而不是示例代码。

给您的提示:只复制您理解的代码。

答案 1 :(得分:0)

好的 - 这已经花了很长时间但我想通了。首先使用顶部的Github链接而不是另一个 - 这并不容易理解。

JSON / Ajax的问题​​在于我试图在示例中使用与Google工作表不同的模式。重要的是,在您的个人生成的电子邮件地址链接中插入了id =“gforms”行。

然后我从github获取了索引示例,并有条理地移动了所有名称数据。这很乏味但是很有效

  <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>

答案 2 :(得分:0)

  1. 确保您的表单具有“ gform”类
  2. 确保直接在表单下直接添加一个具有“ form-elements”类的div,并在“ thankyou_message” Div之前关闭该div