Emailjs

Emailjs 寄信

申請Emailjs帳號

Emailjs 官網

Email Service獲取到一組 Service Id =>import.meta.env.VITE_SENDMAIL_SERVICE

選擇Gmail

Email Templates 這邊建立樣板，獲取到一組 Templates Id =>import.meta.env.VITE_SENDMAIL_TEMPLATE

Account ＝>API keys=>Public Key，獲取到一組 Public Key => import.meta.env.VITE_SENDMAIL_USERID

Vite使用方式參考官網
Vite使用方式參考官網

安裝emailjs-com

emailjs 安裝

1
npm install emailjs-com --save

綁定表單的name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
<div>
  <el-form @submit.prevent="sendMail">
        <el-form-item label="姓名" prop="name">
            <el-input name="form_name" v-model="Forms.name" placeholder="請輸入你的姓名" type="test" />
        </el-form-item>
        <el-form-item label="email" prop="email">
            <el-input name="form_email" v-model="Forms.email" placeholder="請輸入你的email" type="email" />
        </el-form-item>
        <el-form-item label="行動電話" prop="phone">
            <el-input name="form_phone" v-model="Forms.phone" placeholder="請輸入你的行動電話" type="text" />
        </el-form-item>
  </el-form>
</div>
</template>

<script setup lang="ts">
import emailjs from 'emailjs-com';
    const form_name = ref<string | null>('');
    const form_email = ref<string | null>('');
    const form_phone = ref<string | null>('');
   
   
//送出的表單
const sendMail = (e: { target: string | HTMLFormElement; }) => {
    try {
        const templateParams = {
         
            form_name: form_name,
            form_email: form_email,
            form_phone: form_phone,
          
        }
     //   console.log(templateParams)
        
        emailjs.sendForm(import.meta.env.VITE_SENDMAIL_SERVICE, import.meta.env.VITE_SENDMAIL_TEMPLATE, e.target,
            import.meta.env.VITE_SENDMAIL_USERID, templateParams)

    } catch (error) {
        console.log({ error })
    }
}


</script>