home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ซอฟต์แวร์ >> อีเมล

ส่งอีเมลจาก Contact Form ใน Vue.js ด้วย EmailJS – คู่มือขั้นตอน

ไม่กี่วันก่อน ผมตัดสินใจทำโปรเจกต์ Vue เรียบง่าย และต้องส่งอีเมลผ่าน contact form ที่เพิ่งสร้าง ผมอยากได้อีเมลอัตโนมัติทุกครั้งที่มีคนกรอก contact form

ค้นหาแล้วเจอ EmailJS ตัดสินใจเขียนบทความนี้เพราะ documentation ของพวกเขาดีและใช้ง่ายมาก หวังว่าจะช่วยใครบางคนได้ :)

เริ่มต้นกันเลย!

ในบทความนี้ จะแสดงวิธีใช้ EmailJS ส่งอีเมลจากแอปพลิเคชัน Vue.js

ก่อนเริ่ม สมมติว่าคุณติดตั้ง Vue CLI แล้ว เพราะจะสร้าง mini demo project ด้วย ถ้ายัง ให้เช็ควิธีติดตั้งที่นี่

สร้างโปรเจกต์ด้วยคำสั่ง:

vue create vue-emailjs-demo

จะถูก prompt ให้เลือก default preset หรือ manually select features เลือก default

โฟลเดอร์โปรเจกต์ใหม่จะถูกสร้าง เข้าไปได้ด้วย:

cd vue-emailjs-demo

วิธีติดตั้ง EmailJS

EmailJS ช่วยส่งอีเมลด้วย client-side technologies เท่านั้น ไม่ต้องมีเซิร์ฟเวอร์ - เพียงเชื่อม EmailJS กับบริการอีเมลที่รองรับ สร้าง email template และใช้ JavaScript library ของพวกเขา trigger อีเมล

ก่อนเขียนโค้ด ต้องสร้างบัญชี EmailJS ด้วยบัญชีนี้ จะสร้าง email templates และเลือกอีเมลปลายทางได้

ล็อกอินเข้า dashboard ใหม่

วิธีสร้าง Email Template

Email templates สามารถมี dynamic variables ได้ในเกือบทุกฟิลด์ (subject, content, TO email, FROM name ฯล฿) ถูก populate จาก JavaScript call เราจะกลับมาที่นี้

ก่อนอื่น เพิ่ม email service ผมเลือก Gmail แต่คุณเลือกได้ตามต้องการ

ถ้าไม่อยากคิดชื่อ Service ID เอง กดไอคอนค้นหา จะ generate ให้อัตโนมัติ

ต่อไป สร้าง email template ไปที่หน้า templates สร้าง template ใหม่ template จะกำหนด subject เนื้อหา ส่งไปไหน ฯล฿

ส่งอีเมลจาก Contact Form ใน Vue.js ด้วย EmailJS – คู่มือขั้นตอน

ชุด double curly braces เช่น {{from_name}} คือ variables เมื่อ user กรอกฟอร์ม เราจะส่งข้อมูลนั้นไป EmailJS ผ่าน variables เหล่านี้

อธิบายฟิลด์ใน template:

  • Subject: หัวข้ออีเมล
  • Content: เนื้อหาอีเมล จะส่ง user message, ชื่อ, และ return address
  • To Email: อีเมลปลายทาง
  • From Name: ออปชั่น แต่วางชื่อได้
  • From Email: อีเมลผู้ส่งที่จะแสดงให้ผู้รับ ถ้า checkbox default email เปิด EmailJS จะใช้อีเมลของ email service ที่ใช้
  • Reply To: ตั้งอีเมลสำหรับตอบกลับ
  • BCC และ CC: ส่ง copy ให้ทุกคนในรายการ Reply To, BCC และ CC ไม่ใช้ในคู่มือนี้ เพื่อความเรียบง่าย ต้องการรายละเอียดเพิ่ม เช็ค EmailJS docs

หมายเหตุ: จะใช้ Service ID, Template ID และ User ID หา User ID ได้ที่ส่วน integration ของ dashboard copy ไปเก็บไว้ใช้

วิธีติดตั้ง EmailJS ในแอปพลิเคชัน

ไปที่โค้ด :) ติดตั้ง EmailJS:

npm install emailjs-com --save

จะส่งอีเมลจาก contact form เรียบง่าย เก็บ: name (ผู้ส่ง), email (ผู้ส่ง), และ message content

แก้ไข HelloWorld.Vue component ที่สร้างอัตโนมัติ หรือสร้าง component ใหม่ ContactForm.vue ผมจะทำตัวหลัง

สร้าง component ContactForm.vue:

เริ่มจาก template:

<template>
  <div class="container">
    <form>
      <label>Name</label>
      <input type="text" v-model="name" name="name" placeholder="Your Name" >
      <label>Email</label>
      <input type="email" v-model="email" name="email" placeholder="Your Email" >
      <label>Message</label>
      <textarea name="message" v-model="message" cols="30" rows="5" placeholder="Message">
      </textarea>
      <input type="submit" value="Send">
    </form>
  </div>
</template>

อธิบาย markup ของเรา

สร้าง div container สำหรับฟอร์ม เพิ่ม class container เพื่อ styling

<style scoped>
* {box-sizing: border-box;}
.container {
  display: block;
  margin:auto;
  text-align: center;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 50%;
}
label { float: left; }
input[type=text], [type=email], textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
</style>

เริ่มเซิร์ฟเวอร์:

npm run serve

เปิด browser ไป localhost:8080 จะเห็นฟอร์ม:

ส่งอีเมลจาก Contact Form ใน Vue.js ด้วย EmailJS – คู่มือขั้นตอน

สร้าง method sendEmail จัดการ submit ข้อมูล แต่ก่อน import emailjs:

import emailjs from 'emailjs-com';

โค้ดส่วนที่เหลือใน script:

<script>
export default {
  name: 'ContactUs',
  data() {
    return {
      name: '',
      email: '',
      message: ''
    }
  },
  methods: {
    sendEmail(e) {
      try {
        emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID', {
          name: this.name,
          email: this.email,
          message: this.message
        })
      } catch(error) {
        console.log({error})
      }
      // Reset form fields
      this.name = ''
      this.email = ''
      this.message = ''
    },
  }
}
</script>

โค้ดนี้ทำอะไร

ใช้ try...catch แต่ไม่บังคับ จำได้ไหมว่าขอให้ copy Service ID, Template ID, User ID ไปเก็บ? ตอนนี้ต้องใช้แล้ว! แทนที่ส่วน snippet ด้วยรายละเอียดจริง

emailjs.sendForm() ส่งข้อมูลไป EmailJS หลังส่ง Service ID, Template ID, User ID และ form data ที่ส่งเข้ามาใน sendEmail() log error ด้วย catch()

สำคัญ: sendForm() ส่งอีเมลตาม email template ที่ระบุและ form data ที่ส่งผ่าน ต้องแน่ใจว่า form input name ตรงกับ variable ใน EmailJS template

EmailJS template ที่ปรับแล้วพร้อม name, email, message:

ส่งอีเมลจาก Contact Form ใน Vue.js ด้วย EmailJS – คู่มือขั้นตอน

เสร็จแล้ว!

เช็ค To Email ใน template ควรได้อีเมลแล้ว ลองเล่น Test it หรือ playground มุมขวาบนของ template ได้

GitHub Repo

โค้ดบทความนี้อยู่ใน GitHub ของผม

แชร์บทความนี้ได้ถ้าช่วยได้ ขอบคุณที่อ่าน!