Vue.js में EmailJS का उपयोग करके संपर्क फ़ॉर्म ईमेल भेजें

कुछ दिन पहले मैंने एक साधारण Vue प्रोजेक्ट पर काम करने का फैसला किया और एक संपर्क फ़ॉर्म के माध्यम से ईमेल भेजने की आवश्यकता थी जिसे मैंने अभी बनाया था। मैं हर बार एक स्वचालित ईमेल प्राप्त करना चाहता था जब कोई मेरा संपर्क फ़ॉर्म भरता था।

तो मैंने खोज शुरू की और EmailJS पर ठोकर खाई। मैंने यह लेख लिखने का फैसला किया क्योंकि मुझे लगा कि उनका दस्तावेज़ीकरण बहुत अच्छा था और इसका उपयोग करना वास्तव में आसान था। मुझे उम्मीद है कि यह वहां किसी की मदद करता है :)

आइए शुरू करें!

इस लेख में, मैं आपको दिखाऊंगा कि अपने Vue.js एप्लिकेशन से ईमेल भेजने के लिए EmailJS का उपयोग कैसे करें।

इससे पहले कि मैं जारी रखूं, मैं मान रहा हूँ कि आपके कंप्यूटर पर Vue CLI इंस्टॉल है क्योंकि मैं इसके साथ एक मिनी डेमो प्रोजेक्ट बनाऊंगा। यदि नहीं, तो आप यहां इंस्टॉल करने का तरीका देख सकते हैं।

हम इस कमांड का उपयोग करके प्रोजेक्ट बनाएंगे:

vue create vue-emailjs-demo

फिर हमें डिफ़ॉल्ट प्रीसेट चुनने या मैन्युअल रूप से सुविधाओं का चयन करने के विकल्प के साथ संकेत दिया जाएगा। default चुनें।

एक नया प्रोजेक्ट डायरेक्टरी बनाई जाएगी, और आप इस कमांड का उपयोग करके इसमें नेविगेट कर सकते हैं:

cd vue-emailjs-demo

EmailJS कैसे इंस्टॉल करें

EmailJS आपको केवल क्लाइंट-साइड तकनीकों का उपयोग करके ईमेल भेजने में मदद करता है। किसी सर्वर की आवश्यकता नहीं है – बस EmailJS को समर्थित ईमेल सेवाओं में से एक से कनेक्ट करें, एक ईमेल टेम्पलेट बनाएं, और ईमेल ट्रिगर करने के लिए उनकी JavaScript लाइब्रेरी का उपयोग करें।

कोड लिखना शुरू करने से पहले, आप एक EmailJS अकाउंट बनाना चाहेंगे। अपने अकाउंट के साथ, आप ईमेल टेम्पलेट बनाने और वह ईमेल चुनने में सक्षम होंगे जहां आप अपने स्वचालित ईमेल को भेजना चाहते हैं।

एक बार जब आप अपने नए अकाउंट में साइन इन करते हैं, तो आपको डैशबोर्ड पर निर्देशित किया जाएगा।

ईमेल टेम्पलेट कैसे बनाएं

ईमेल टेम्पलेट्स में लगभग किसी भी फ़ील्ड में वैकल्पिक रूप से डायनामिक वेरिएबल्स हो सकते हैं (उदाहरण के लिए, विषय, सामग्री, TO ईमेल, FROM नाम, आदि)। उन्हें JavaScript कॉल से भरा जाता है। हम इसमें शीघ्र ही जाएंगे।

पहले एक ईमेल सेवा जोड़ें। मैंने Gmail चुना लेकिन आप अपनी आवश्यकताओं के लिए सबसे उपयुक्त सेवा चुनने के लिए स्वतंत्र हैं।

साथ ही, यदि आप अपने Service ID के लिए नाम सोचना नहीं चाहते हैं, तो खोज आइकन पर टैप करें और यह आपके लिए स्वचालित रूप से जनरेट हो जाएगा।

अब, हम अपना ईमेल टेम्पलेट बनाएंगे। टेम्पलेट्स पेज पर जाएं। एक नया टेम्पलेट बनाएं। हमारा ईमेल टेम्पलेट हमारे ईमेल के विषय को परिभाषित करेगा, इसमें क्या सामग्री होगी, इसे कहां भेजा जाना चाहिए, आदि।

EmailJS टेम्पलेट उदाहरण

ऊपर दिखाए गए डबल कर्ली ब्रेसिज़ के सेट जैसे {{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

हम एक बहुत ही साधारण संपर्क फ़ॉर्म से ईमेल भेजने जा रहे हैं। यह डेटा एकत्र करेगा जिसमें शामिल हैं: नाम (प्रेषक का), ईमेल (प्रेषक का), और संदेश सामग्री। सरल सामान!

आप HelloWorld.Vue कंपोनेंट को संपादित कर सकते हैं जो Vue CLI का उपयोग करते समय हमारे लिए स्वचालित रूप से बनाया गया था या आप 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 पर खोलें और आपको अपना फॉर्म दिखाई देना चाहिए:

Vue.js संपर्क फ़ॉर्म उदाहरण

हम 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() सेवा ID, टेम्पलेट ID, यूजर ID और sendEmail() में पास किए गए फॉर्म डेटा को पास करके EmailJS को डेटा भेजने का तरीका है। हम catch() ब्लॉक के साथ सामना की गई किसी भी त्रुटि को console.log() करते हैं।

यह ध्यान रखना महत्वपूर्ण है कि sendForm() निर्दिष्ट ईमेल टेम्पलेट और पास किए गए फॉर्म डेटा के आधार पर एक ईमेल भेजता है। इसलिए सुनिश्चित करें कि आपके फॉर्म इनपुट का नाम आपके EmailJS टेम्पलेट में वेरिएबल के समान है।

नीचे मेरा संशोधित EmailJS टेम्पलेट है जिसमें नाम (प्रेषक का), ईमेल (प्रेषक का), और संदेश सामग्री है।

संशोधित EmailJS टेम्पलेट

बस इतना ही!

आपके टेम्पलेट में शामिल To Email पते की जांच करें और आपके पास पहले से ही अपना ईमेल वहां भेजा हुआ होना चाहिए। आप टेम्पलेट के ऊपरी दाएं कोने पर Test it या playground सुविधा के साथ भी खेल सकते हैं यदि आप चाहते हैं।

GitHub रेपो

आप इस लेख के लिए कोड मेरे GitHub अकाउंट में पा सकते हैं।

यदि आपको यह लेख उपयोगी लगा तो इसे साझा करने के लिए स्वतंत्र महसूस करें। पढ़ने के लिए धन्यवाद!