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

ماجد النجار · 3 يوليو 2023

كيف ارسل ايميل مباشرة عن طريق نماذج <form> في الجافا سكربت ؟؟

جربت عن موقع EmailJS بس ما اشتغل معايا علما انه الصفحة local (موقعي محلي)

عمر قره محمد · 3 يوليو 2023

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

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

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

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

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

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

<!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` في قائمة القوالب المتاحة.

Adnane Kadri · 3 يوليو 2023

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

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

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

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

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

عبدالباسط ابراهيم · 3 يوليو 2023

لا يمكن إرسال البريد الإلكتروني مباشرة من خلال نموذج 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 الخاص بخدمة البريد الإلكتروني المستخدمة.

Youssef Alrawy · 29 يناير

Youssefalrawy64

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

السؤال

ماجد النجار

4 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Adnane Kadri

عبدالباسط ابراهيم

Youssef Alrawy

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية