Gửi email form liên hệ trong Vue.js với EmailJS – Hướng dẫn từng bước

Vài ngày trước tôi quyết định làm một project Vue đơn giản và cần gửi email qua contact form vừa tạo. Tôi muốn nhận email tự động mỗi khi ai đó điền form.

Tìm kiếm và phát hiện EmailJS. Viết bài này vì documentation của họ tuyệt vời và rất dễ dùng. Hy vọng giúp ích cho ai đó :)

Bắt đầu!

Bài viết hướng dẫn dùng EmailJS gửi email từ ứng dụng Vue.js.

Giả định bạn đã cài Vue CLI (sẽ tạo mini demo project với nó). Nếu chưa, xem cách cài tại đây.

Tạo project:

vue create vue-emailjs-demo

Chọn preset default.

Thư mục project mới tạo, navigate vào:

cd vue-emailjs-demo

Cài đặt EmailJS

EmailJS giúp gửi email chỉ dùng client-side technologies. Không cần server – chỉ connect EmailJS đến supported email services, tạo email template, dùng JavaScript library trigger email.

Trước khi code, tạo tài khoản EmailJS. Với tài khoản, tạo email templates và chọn email nhận automated emails.

Đăng nhập, đến dashboard.

Tạo Email Template

Email templates có thể chứa dynamic variables trong hầu như mọi field (subject, content, TO email, FROM name...). Chúng được populate từ JavaScript call. Sẽ đi vào chi tiết sớm.

Thêm email service. Tôi chọn Gmail nhưng bạn tự chọn service phù hợp.

Nếu không muốn nghĩ tên Service ID, nhấn search icon - tự generate.

Tạo email template. Vào trang templates, tạo mới. Template định nghĩa subject, content, destination, v.v.

Các double curly braces như {{from_name}} là variables. Khi user điền form, chúng ta pass thông tin đó đến EmailJS dùng variables này.

Giải thích các fields trong template:

• Subject: Subject của email.
• Content: Body của email. Pass user message, name, return address.
• To Email: Destination email.
• From Name: Tùy chọn. Có thể viết tên bạn.
• From Email: Sender email hiển thị cho recipient. Nếu checkbox default email enabled, EmailJS dùng email của email service đang dùng.
• Reply To: Set email address để replies gửi đến.
• BCC and CC: Gửi copy message cho listed people. Reply To, BCC and CC không dùng trong guide để giữ đơn giản. Xem docs EmailJS tại đây nếu cần.

Lưu ý: Sẽ dùng Service ID, Template ID, User ID. Tìm User ID ở phần integration dashboard. Copy details để dùng khi cần.

Cài EmailJS trong ứng dụng

Chuyển sang code :) Cài EmailJS:

npm install emailjs-com --save

Gửi email từ contact form đơn giản. Thu thập: name (người gửi), email (người gửi), message content. Simple!

Edit component HelloWorld.Vue (tự tạo khi Vue CLI) hoặc tạo component mới ContactForm.vue. Tôi làm sau.

Xây 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>

Giải thích markup

Gửi email từ contact form đơn giản. Tạo div chứa form content. Thêm style, class container cho div.

<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>

Khởi động server:

npm run serve

Mở browser localhost:8080 - thấy form:

Tạo method sendEmail xử lý submit data. Trước đó, import emailjs trong file. Thêm dòng dưới script:

import emailjs from 'emailjs-com';

Phần còn lại code trong 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>

Code làm gì

Dùng try...catch nhưng không bắt buộc. Nhớ khi nào tôi bảo copy Service ID, Template ID, User ID? Bây giờ cần chúng! Thay phần snippet bằng details thực tế.

emailjs.sendForm() gửi data đến EmailJS sau khi pass Service ID, Template ID, User ID và form data vào sendEmail(). Console.log error với catch() block.

Lưu ý: sendForm() gửi email dựa trên email template chỉ định và form data passed. Đảm bảo form input name trùng với variable trong EmailJS template.

Dưới là modified EmailJS template với name, email, message content:

Xong!

Check To Email trong template - email đã gửi đến đó. Có thể chơi với Test it hoặc playground feature góc trên phải template.

GitHub Repo

Code bài viết tại GitHub account của tôi.

Share bài viết nếu hữu ích. Cảm ơn đã đọc!