纯前端实现发送电子邮件功能——formspree

我想实现发送邮件的功能但是又不了解后台,正愁着我该怎么写这个功能,然后就发现了一个好东西——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();  //阻止提交表单到第三方网站去
    }
});
  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值