（formspree + vue + elementui ）

原文地址：https://blog.csdn.net/aiiiszrh/article/details/122041974

<template>
  <div class="aside">
    <span href="#" style="color:#fff" target="_blank" title="預約演示" @click="appointment">預約</span>
    <el-dialog class="appointmentContent" width="560px" top
 
="9vh" :modal="false" :close-on-click-modal="false"
      :visible.sync="appointmentVisible">
      <div class="input-content" v-if="appointmentVisible">
        <form action="https://formspree.io/[email protected]" method="post" id="content">
          <h1 class="yuyueTitle">立即預約，免費演示</
 
h1>
          <input type="text" name="name" placeholder="姓名" class="contact-area" v-model="contactArea">
          <input type="text" name="company" placeholder="公司名稱">
          <input type="text" name="position" placeholder="職位">
          <input type="text" name="phone" placeholder
 
="聯絡電話">
          <input type="email" name="_replyto" placeholder="郵箱">
          <div class="commit" @click="sendMessage">點選預約</div>
        </form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      appointmentVisible: false,
      contactArea:""
    }
  },
  methods: {
    appointment() {
      this.appointmentVisible = true
    },
    // 傳送郵件
    sendMessage() {
     if(this.contactArea==''){
        this.$message.warning('您的姓名不能為空 !')
        return
      }
      var obj = $('#content').serialize() //獲取id為content的form表單裡面的內容
      console.log(obj)
      $.ajax({
        type: 'post', //必須post請求
        url: 'https://formspree.io/f/test', //test換成你要接收的郵箱地址
        async: true,
        data: obj,
        dataType: 'json',
        success: res => {
          alert('郵件已傳送!!!') //傳送成功後的操作
        },
        error: res => {
          alert('未知錯誤,傳送失敗')
        },
      })
    },
  },
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
.yuyueTitle {
  text-align: center;
  color: coral;
}
.appointmentContent {
  text-align: center;
}
.input-content input {
  width: 400px;
  height: 40px;
  text-indent: 10px;
  border-radius: 6px;
  margin-top: 10px;
  border: none;
  border: 1px solid #ccc;
}
.commit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 46px;
  margin: 20px 0 50px 60px;
  border-radius: 6px;
  background: coral;
  color: #fff;
}
.aside span {
  display: block;
  margin-top: 30px;
  text-align: center;
  color: #fff;
}
</style>

formspree操作步驟：
1、在https://formspree.io/註冊賬號

2、登入完成之後點右上角的Account來設定要接收郵件的賬號

3、回到首頁新建專案和新表格

4、建立表格完成就得到一個如上程式碼的url