我想实现发送邮件的功能但是又不了解后台,正愁着我该怎么写这个功能,然后就发现了一个好东西——formspree 。
它相当于一个第三方平台帮我们把表单信息提交发送到我们指定的邮箱里。只不过每次提交表单都需要有信息验证环节,有点点麻烦,而且 但是 它不适用于所有的邮箱(至少QQ邮箱是没问题的)。
我参考的资料有:
https://blog.csdn.net/Abez_c/article/details/82347469
https://formspree.io/
HTML
- form标签: action=“https://formspree.io/接收信息的邮箱”
- input / textarea 标签都需要设定相应的 name 属性,否则就无法获取到填入的信息了哦。收到的邮件信息为name属性值和对应的表单信息。
<div class="left-wrap">
<form id="myForm" target="_blank" action="https://formspree.io/1131844379@qq.com" method="post">
<!--左上-->
<div class="left-top">
<div class="input-group">
<input type="text" name="name" class="input__field input-carrier">
<label class="input__label" for="input-1">
<span class="input__label-content input__label-content--nao">您的姓名</span>
</label>
</div>
<div class="input-group input-group-r">
<input type="email" name="eamil" class="input__field input-carrier" type="text">
<label class="input__label" for="input-1">
<span class="input__label-content input__label-content--nao">您的邮箱</span>
</label>
</div>
</div>
<!--左下-->
<div class="send-content">
<textarea name="message" class="contact-area required" placeholder="您的建议..."></textarea>
<button class="btn-send" type="submit" id="submit" name="submit">
<span>发送</span>
<i class="fa fa-send"></i>
</button>
</div>
</form>
</div>
JS (判断内容不能为空才提交表单)
$(document).on('click', '#submit', function(evt){
if($(".contact-area").val()==""){
$(".contact-area").val("您的建议不能为空 !");
evt.preventDefault(); //阻止提交表单到第三方网站去
}
});