EmailJS

使用 NPM 安裝 EmailJS

npm install @emailjs/browser

<script setup>
import { ref, onMounted } from 'vue';
import emailjs from '@emailjs/browser';

// 初始化 emailjs
onMounted(() => {
  emailjs.init("1weg54we64");  // 替換為你的 EmailJS 公開 API 金鑰
});

// 定義表單資料
const formData = ref({
  to_email: '',
  from_name: '',
  message: '',
  pageTitle: '',
  currentURL: '',
});

const sending = ref(false);
const status = ref('');
const isError = ref(false);

const handleSubmit = () => {
  sending.value = true;
  status.value = 'Sending...';
  isError.value = false;

  // 設定當前頁面資訊
  formData.value.pageTitle = document.title;
  formData.value.currentURL = window.location.href;

  emailjs.send(
    "service_qzarp8m",  // 你的 EmailJS 服務 ID
    "template_f3pkjrv", // 你的 EmailJS 模板 ID
    formData.value
  ).then(
    (response) => {
      console.log('Email sent successfully!', response);
      status.value = 'Sending successfully!';
      sending.value = false;

      // 清空表單
      formData.value = {
        pageTitle: '',
        currentURL: '',
        to_email: '',
        from_name: '',
        message: ''
      };
    },
    (error) => {
      console.error('Error sending email:', error);
      status.value = 'Sending error, try later...';
      isError.value = true;
      sending.value = false;
    }
  );
};
</script>

<template>
  <div class="card">
    <h1><i class="fa-solid fa-envelope"></i> FEEDBACK!</h1>
    <form @submit.prevent="handleSubmit">
      <div class="input-container">
        <input type="email" v-model="formData.to_email" placeholder="Recipient Email" required>
      </div>
      <div class="input-container">
        <input type="text" v-model="formData.from_name" placeholder="Your Name" required>
      </div>
      <div class="input-container">
        <textarea v-model="formData.message" placeholder="Your Message" required></textarea>
      </div>
      <button type="submit" :disabled="sending">
        {{ sending ? "Sending..." : "Send Email" }}
      </button>
      <p v-if="status" :class="{ 'error': isError }">{{ status }}</p>
    </form>
  </div>
</template>

<style scoped>
.error {
  color: red;
}
</style>

---

Be the first one to support oldfesixsixsix.

---