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

Question

我一直在通过这个链接工作 https://www.npmjs.com/package/html-form-send-email-via-google-script-without-server 也 https://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="[e-mail]">
</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">

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

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

Answer 2

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

JSON/Ajax 的问题在于我试图使用与示例中的谷歌表格不同的模式。重要的一点是，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="[e-mail]"/>
</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. 请确保您的表单具有类"gform">
2. 确保在表单下添加另一个div 直接具有类"form-elements"，并在"thankyou_message"Div之前关闭此div