Vue.js-এ EmailJS ব্যবহার করে কন্ট্যাক্ট ফর্ম ইমেল পাঠান: ধাপে ধাপে গাইড

কয়েক দিন আগে আমি একটি সিম্পল Vue প্রজেক্টে কাজ শুরু করলাম এবং আমার তৈরি করা একটি কন্ট্যাক্ট ফর্মের মাধ্যমে ইমেল পাঠাতে চেয়েছিলাম। আমি চেয়েছিলাম কেউ যখন আমার কন্ট্যাক্ট ফর্ম পূরণ করবে, তখন আমি একটি অটোমেটেড ইমেল পাই।

তাই আমি সার্চ করতে শুরু করলাম এবং EmailJS খুঁজে পেলাম। তাদের ডকুমেন্টেশন চমৎকার লাগল এবং এটি ব্যবহার করা খুব সহজ। এই আর্টিকেলটি লিখছি কারণ আশা করি এটি কাউকে সাহায্য করবে :)

শুরু করা যাক!

এই আর্টিকেলে, আমি দেখাব কীভাবে EmailJS ব্যবহার করে আপনার Vue.js অ্যাপ্লিকেশন থেকে ইমেল পাঠাতে হয়।

আগে চলতে, আমি অনুমান করছি আপনার কম্পিউটারে Vue CLI ইনস্টল আছে কারণ আমি এটি দিয়ে একটি মিনি ডেমো প্রজেক্ট তৈরি করব। যদি না থাকে, তবে এখানে ইনস্টল করার পদ্ধতি দেখতে পারেন।

প্রজেক্টটি এই কমান্ড দিয়ে তৈরি করব:

vue create vue-emailjs-demo

তারপর আমাদের ডিফল্ট প্রিসেট বেছে নেওয়া বা ম্যানুয়ালি ফিচার সিলেক্ট করার অপশন আসবে। default সিলেক্ট করুন।

একটি নতুন প্রজেক্ট ডিরেক্টরি তৈরি হবে, এবং আপনি এই কমান্ড দিয়ে সেটির ভিতর যেতে পারেন:

cd vue-emailjs-demo

EmailJS ইনস্টল করার পদ্ধতি

EmailJS আপনাকে ক্লায়েন্ট-সাইড টেকনোলজি মাত্র ব্যবহার করে ইমেল পাঠাতে সাহায্য করে। কোনো সার্ভার প্রয়োজন নেই — শুধু EmailJS কে সমর্থিত ইমেল সার্ভিসের সাথে কানেক্ট করুন, একটি ইমেল টেমপ্লেট তৈরি করুন, এবং তাদের JavaScript লাইব্রেরি ব্যবহার করে একটি ইমেল ট্রিগার করুন।

কোড লিখার আগে, আপনাকে একটি EmailJS অ্যাকাউন্ট তৈরি করতে হবে। আপনার অ্যাকাউন্টের সাথে, আপনি ইমেল টেমপ্লেট তৈরি করতে পারবেন এবং চুনতে পারবেন আপনি আপনার অটোমেটেড ইমেল কোথায় পাঠাতে চান।

নতুন অ্যাকাউন্টে সাইন ইন করলে আপনাকে ড্যাশবোর্ডে নিয়ে যাবে।

ইমেল টেমপ্লেট তৈরি করার পদ্ধতি

ইমেল টেমপ্লেটে অপশনালি প্রায় সব ফিল্ডে ডাইনামিক ভেরিয়েবল থাকতে পারে (উদাহরণস্বরূপ, সাবজেক্ট, কন্টেন্ট, TO ইমেল, FROM নাম, ইত্যাদি)। এগুলো JavaScript কল থেকে পপুলেট হয়। আমরা শীঘ্রই এতে যাব।

প্রথমে একটি ইমেল সার্ভিস যোগ করুন। আমি Gmail সিলেক্ট করলাম কিন্তু আপনি আপনার প্রয়োজনের हिसাবে যেকোনো সার্ভিস বেছে নিতে পারেন।

এছাড়া, আপনি যদি আপনার Service ID-র জন্য নাম ভাবতে চান না, তবে সার্চ আইকনে ট্যাপ করুন এবং এটি অটোমেটিক্যালি জেনারেট হবে।

এরপর, আমরা আমাদের ইমেল টেমপ্লেট তৈরি করব। টেমপ্লেটস পেজে যান। একটি নতুন টেমপ্লেট তৈরি করুন। আমাদের ইমেল টেমপ্লেটটি ডিফাইন করবে আমাদের ইমেলের সাবজেক্ট, এটি কী কন্টেন্ট ধারণ করবে, কোথায় পাঠাতে হবে, ইত্যাদি।

উপরে দেখানো ডবল কার্লি ব্রেসসগুলো যেন {{from_name}} ভেরিয়েবল। যখন একজন ইউজার আমাদের ফর্ম পূরণ করবে, আমরা সেই ইনফরমেশন EmailJS-এ এই ভেরিয়েবলগুলো ব্যবহার করে পাস করব।

নিচে আমাদের টেমপ্লেটে উপলব্ধ ফিল্ডগুলোর ছোট্ট ব্যাখ্যা:

• Subject: ইমেলের সাবজেক্ট।
• Content: ইমেলের বডি। আমরা এখানে ইউজারের মেসেজ, তাদের নাম, এবং তাদের রিটার্ন অ্যাড্রেস পাস করব।
• To Email: এই ইমেলের গন্তব্য ধারণ করে।
• From Name: এটি অপশনাল। কিন্তু আপনি এখানে আপনার নাম লিখতে পারেন।
• From Email: সেন্ডারের ইমেল ঠিকানা যা রিসিপিয়েন্টের কাছে দেখাবে। যদি ডিফল্ট ইমেল ঠিকানা চেকবক্স ইনেবল থাকে তবে EmailJS ব্যবহার 중인 ইমেল সার্ভিসের সাথে জড়িত ইমেল ঠিকানা ব্যবহার করবে।
• Reply To: রিপ্লাই পাঠানো উচিত সেই ইমেল ঠিকানা সেট করে।
• BCC and CC: এই দুটি ফিল্ড সাধারণত যারা লিস্টেড তাদের সবার কাছে মেসেজের একটি কপি পাঠাতে ব্যবহৃত হয়। Reply To , BCC and CC এই গাইডে ব্যবহার করা হয়নি কারণ আমরা এটাকে 최대한 সিম্পল রাখতে চাই। আপনি যদি আরও ইনফো চান, তবে EmailJS ডক্স এখানে চেক করতে পারেন।

নোট: এই আর্টিকেলের এক পয়েন্টে, আমরা Service ID, Template ID এবং User ID ব্যবহার করব। আপনি আপনার User ID ড্যাশবোর্ডের integration পার্টে পাবেন। আপনি ডিটেইলগুলো কপি করে ক্লিপবোর্ডে রাখুন এবং প্রয়োজনে পেস্ট করুন।

আপনার অ্যাপ্লিকেশনে EmailJS ইনস্টল করা

কোডে যাই :) আপনার অ্যাপ্লিকেশনে EmailJS ইনস্টল করতে এই কমান্ড ব্যবহার করুন:

npm install emailjs-com --save

আমরা একটি খুব সিম্পল কন্ট্যাক্ট ফর্ম থেকে ইমেল পাঠাব। এটি ডেটা সংগ্রহ করবে: নাম (সেন্ডারের), ইমেল (সেন্ডারের), এবং মেসেজ কন্টেন্ট। সিম্পল জিনিস!

আপনি Vue CLI দিয়ে আটোমেটিক্যালি তৈরি হওয়া HelloWorld.Vue কম্পোনেন্টটি এডিট করতে পারেন বা একটি নতুন কম্পোনেন্ট তৈরি করতে পারেন ContactForm.vue নামে। আমি دومটো করব।

নিচে আমরা কন্ট্যাক্ট ফর্ম কম্পোনেন্ট, 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>

আমাদের মার্কআপ ব্যাখ্যা

যেমন আমি আগে বললাম, আমরা একটি খুব সিম্পল কন্ট্যাক্ট ফর্ম থেকে ইমেল পাঠাব। তাই একটি div এলিমেন্ট তৈরি করুন যেটি আমাদের ফর্ম কন্টেন্ট ধারণ করবে। আমরা আমাদের ফর্মে স্টাইল যোগ করব, তাই div এলিমেন্টে container ক্লাস যোগ করুন।

<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

এখন, ব্রাউজারে localhost:8080 খুলুন এবং আপনার ফর্মটি দেখতে পাবেন:

আমরা একটি sendEmail মেথডও তৈরি করব যা আমাদের ডেটা সাবমিশন হ্যান্ডেল করবে। কিন্তু তার আগে, আমাদের ফাইলে emailjs ইম্পোর্ট করতে হবে।

script ট্যাগের ঠিক নিচে নিচের লাইনটি যোগ করুন:

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}) } // ফর্ম ফিল্ড রিসেট this.name = '' this.email = '' this.message = '' }, } } </script>

এই কোডটি কী করছে

আমি উপরে try...catch ব্যবহার করলাম কিন্তু আপনাকে অবশ্যই ব্যবহার করতে হবে না। মনে আছে আমি আপনাকে আপনার Service ID, Template ID এবং User ID ডিটেইলগুলো কপি করে ক্লিপবোর্ডে রাখতে বলেছিলাম এবং প্রয়োজনে পেস্ট করতে বলেছিলাম? ঠিক এখন সেটি আপনার প্রয়োজন! তাই স্নিপেটের সেই অংশটি আপনার আসল ডিটেইল দিয়ে রিপ্লেস করুন।

emailjs.sendForm() হচ্ছে কীভাবে আমরা EmailJS-এ ডেটা পাঠাই Service ID, Template ID, User ID এবং sendEmail()-এ পাস করা ফর্ম ডেটা দিয়ে। catch() ব্লকে কোনো এরর কনসোল.লগ করছি।

এটি নোট করা গুরুত্বপূর্ণ যে sendForm() নির্দিষ্ট ইমেল টেমপ্লেট এবং পাস করা ফর্ম ডেটা অনুযায়ী ইমেল পাঠায়। তাই নিশ্চিত করুন যে আপনার ফর্ম ইনপুটের name আপনার EmailJS টেমপ্লেটের ভেরিয়েবলের সাথে মিলে যাচ্ছে।

নিচে আমার মডিফাইড EmailJS টেমপ্লেট যাতে নাম (সেন্ডারের), ইমেল (সেন্ডারের), এবং মেসেজ কন্টেন্ট আছে।

এটাই সব!

আপনার টেমপ্লেটে অন্তর্ভুক্ত To Email ঠিকানা চেক করুন এবং আপনার ইমেল সেটি ইতিমধ্যে পাঠানো হয়ে যেতে পারে। আপনি টেমপ্লেটের টপ-রাইট কর্নারের Test it বা playground ফিচারটাও ট্রাই করতে পারেন যদি চান।

GitHub Repo

এই আর্টিকেলের কোড আমার GitHub অ্যাকাউন্টে পাবেন।

আপনি যদি এটি হেল্পফুল পান তবে এই আর্টিকেল শেয়ার করতে পারেন। পড়ার জন্য ধন্যবাদ!