在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表单的提交