اذهب إلى المحتوى
  • 0

ارسال ايميل عن طريق نموذج في الجافا سكربت

ماجد النجار

السؤال

Recommended Posts

  • 0

لقد جربت الموقع الذي تذكره وهو يعمل على ما يرام، 

ما عليك القيام به هو التسجيل في الموقع وربط الايميل الخاص بك مع الموقع بحيث يقوم الموقع بإرسال الرسائل الواصلة إلى هذا الإيميل.

بعد ذلك يجب ان تقوم باختبار هذا الإيميل كما يظهر في الصورة :

1.thumb.png.157b316308402df84a91f59aab2e95f7.png

ومن ثم الضغط على send test email ويجب ان تكون النتيجة "200 OK".

بعد ذلك يبج ان تقوم بإنشاء الـ Template بالذهاب إلى الـ Email Templates يمكنك انشاء Templates جديدة بكل سهولة أو الإبقاء على الـ Templates الافتراضية.

بعد ذلك يمكنك اختبار الـ Templates كما يظهر في الصورة :

2.thumb.png.72d1fa5dd1d0584968b19bd90d0fd6d8.png

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.emailjs.com/dist/email.min.js"></script>
    <script>
      (function () {
        emailjs.init("YOUR_USER_ID");
      })();
    </script>
  </head>
  <body>
    <form id="myForm">
      <input type="text" name="from_name" placeholder="From name" />
      <input type="text" name="to_name" placeholder="To name" />
      <input type="email" name="to_email" placeholder="To email" />
      <textarea name="message" placeholder="Your message"></textarea>
      <input type="submit" value="Send" />
    </form>

    <script>
      window.onload = function () {
        document.getElementById("myForm").addEventListener("submit", function (event) {
          event.preventDefault();
          emailjs.sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", this);
        });
      };
    </script>
  </body>
</html>

يمكنك الوصول إلى `YOUR_USER_ID` و `YOUR_SERVICE_ID` و `YOUR_TEMPLATE_ID` من خلال حسابك في موقع EmailJS:

1. قم بتسجيل الدخول إلى حسابك في موقع EmailJS.
2. انقر على "Account" في القائمة العلوية.
3. ستجد `YOUR_USER_ID` في قسم "API Keys".
4. انقر على "Email Services" في القائمة العلوية.
5. ستجد `YOUR_SERVICE_ID` في قائمة الخدمات المتاحة.
6. انقر على "Email Templates" في القائمة العلوية.
7. ستجد `YOUR_TEMPLATE_ID` في قائمة القوالب المتاحة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

في جافاسكربت، لا يمكن ذلك بصورة مباشرة إذ أنك ستحتاج إما الاعتماد على عميل البريد الالكتروني في تطبيق العميل لتأكيد الإرسال: 

let body = document.querySelector('#mailbody').value
let subject = document.querySelector('#mailsubject').value

window.open(`mailto:test@example.com?subject=${subject}&body=${body}`);

وهو حل عملي في أغلب الحالات،

أو استعمال طلبية اجاكس لإرسال الطلب الى خادمك للتعامل معه في جهة الخادم. أو استعمال خدمات طرف ثالث تقوم لك بذلك من مثل مكتبة EmailJS. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لا يمكن إرسال البريد الإلكتروني مباشرة من خلال نموذج HTML <form> باستخدام الجافا سكريبت. يمكن استخدام الجافا سكريبت لجمع البيانات من نموذج HTML <form> وإرسالها إلى سكريبت على الخادم الذي يمكنه إرسال البريد الإلكتروني.

هناك العديد من الخدمات المتاحة لإرسال البريد الإلكتروني من الخوادم. يمكنك استخدام خدمة بريد إلكتروني مثل SendGrid أو Mailgun أو أي خدمة أخرى تدعم API لإرسال البريد الإلكتروني.

يمكن استخدام الكود التالي في الجافا سكريبت لجمع البيانات من نموذج <form> وإرسالها إلى خدمة البريد الإلكتروني المحددة:

const form = document.getElementById('myForm'); // تحديد النموذج
form.addEventListener('submit', (event) => {
  event.preventDefault(); // إيقاف إرسال النموذج الافتراضي
  const formData = new FormData(form); // جمع البيانات من النموذج
  const data = {
    to: 'recipient@example.com', // بريد المستلم
    subject: 'New email from form', // عنوان البريد الإلكتروني
    body: formData // جسم البريد الإلكتروني (البيانات من النموذج)
  };
  fetch('/send-email', { // إرسال البيانات إلى خدمة البريد الإلكتروني المحددة باستخدام ال API
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(response => {
    console.log('Email sent successfully');
    // يمكن إضافة رسالة تأكيد إلى المستخدم هنا
  })
  .catch(error => {
    console.error('Error sending email:', error);
    // يمكن إضافة رسالة خطأ إلى المستخدم هنا
  });
});

يجب استبدال recipient@example.com بعنوان البريد الإلكتروني للمستلم الفعلي، ويجب أيضًا استبدال '/send-email' برابط API الخاص بخدمة البريد الإلكتروني المستخدمة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...