在html页面,我们经常会看到这样的一块发送邮件给作者的功能,大多都是摆设,很少有真正实现这个功能的。

今天我说一下这个功能在静态页面中具体如何实现。以及利用jquery的表单提交表单中的内容。
如下邮件发送的form表单:
<div class="contact-form">
<h3 style="color: white;">联系我:</h3>
<form action="#" id="contact-form" class="subscribe">
<div class="input-group name-email">
<div class="input-field">
<input type="text" name="title" id="title" placeholder="邮件标题" class="form-control">
</div>
<div class="input-field">
<input type="email" name="email" id="email" placeholder="Email" class="form-control" value="rm@rmworking.com" readonly="readonly">
</div>
</div>
<div class="input-group">
<textarea name="message" id="message" placeholder="邮件内容" class="form-control"></textarea>
</div>
<div class="input-group" style="">
<button type="button" id="form-submit-email" class="btn btn-lg btn-success">
<i class="fa fa-envelope-o fa-lg"></i>发送邮件
</button>
</div>
</form>
</div>
提交表单利用系统配置的默认邮箱发送邮件:
<script type="text/javascript">
$("#form-submit").click(function(e){
var _this = $(event.target);
var title = $(_this.parent().siblings()[0]).find("#title").val();
var addr = $(_this.parent().siblings()[0]).find("#email").val();
var message = $(_this.parent().siblings()[1]).find("#message").val();
//邮件发送
window.location.href="Mailto:" + addr + "?Subject=" + title + "&Body=" + message;
});
</script>
- 参数说明:
CC:抄送地址;
BCC:密件抄送地址;
Subject:主题;
Body:邮件内容。
注:多个邮件地址用";"隔开。
转载请注明:R&M » Html静态页面邮件的发送和JQuery表单的提交