Html静态页面邮件的发送和JQuery表单的提交

web前端 workingTime 222℃ 0评论

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

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

联系我:rm@rmworking.com