Subscribe in js

يمكنك عمل ذلك باستخدام HTMl  فقط بدون الحاجة الي استخدام js :

    <form
      action="mailto:yourEmail@gmail.com"
      method="POST"
      encType="multipart/form-data"
    >
            <input type="email" name="email-form"  placeholder="Email" />
    </form>

وبهذا يمكنك ارسال محتوي الفورم الي بريدك الإلكتروني مباشرة

ويمكنك عمل نفس الفكرة ونظام الإشتراك في البريد باستخدام JavaScript بشكل متقدم عن طريق بعض المكتبات مثل:

• Nodemailer

• EmailJS

شكرا

بتاريخ 39 دقائق مضت قال أحمد رضا5:

يمكنك عمل ذلك باستخدام HTMl  فقط بدون الحاجة الي استخدام js :

 

    <form
      action="mailto:yourEmail@gmail.com"
      method="POST"
      encType="multipart/form-data"
    >
            <input type="email" name="email-form"  placeholder="Email" />
    </form>

 

وبهذا يمكنك ارسال محتوي الفورم الي بريدك الإلكتروني مباشرة

ويمكنك عمل نفس الفكرة ونظام الإشتراك في البريد باستخدام JavaScript بشكل متقدم عن طريق بعض المكتبات مثل:

• Nodemailer

• EmailJS

 لا يمكن استخدام "mailto:" في عنوان الإجراء (action) في النموذج لإرسال البريد الإلكتروني من خلال الجانب العميل (المتصفح)، بل يستخدم فقط لفتح برنامج البريد الإلكتروني على الكمبيوتر المحلي.

لا يمكن استخدام JavaScript وحده لإرسال رسائل بريد إلكتروني من المستخدم مباشرةً، لأن JavaScript لغة برمجة تعمل على الجانب العميل (المتصفح) وليست على الخادم. ومع ذلك، يمكن استخدام JavaScript لإرسال طلب إلى الخادم ليتم معالجتها هناك.

يمكن تنفيذ نموذج البريد الإلكتروني باستخدام HTML و CSS و JavaScript بالشكل التالي، لكن سيتطلب معالجة البيانات المرسلة بواسطة php او node.js في الخلفية:

HTML:

<form id="email-form" method="POST">
  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email" placeholder="ادخل بريدك الإلكتروني" required>

  <button type="submit" id="submit-btn">اشتراك</button>
</form>

<div id="success-msg" class="hidden">تم إرسال البريد الإلكتروني بنجاح.</div>
<div id="error-msg" class="hidden">حدث خطأ أثناء إرسال البريد الإلكتروني، يرجى المحاولة مرة أخرى.</div>

CSS:

.hidden {
  display: none;
}

JavaScript:

const form = document.querySelector('#email-form');
const submitBtn = document.querySelector('#submit-btn');
const successMsg = document.querySelector('#success-msg');
const errorMsg = document.querySelector('#error-msg');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  const emailInput = document.querySelector('#email');
  const emailValue = emailInput.value;

  fetch('path/to/email/handler.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `email=${emailValue}`
  })
  .then(response => {
    if (response.ok) {
      // إخفاء زر الإرسال وعرض رسالة النجاح
      submitBtn.classList.add('hidden');
      successMsg.classList.remove('hidden');
    } else {
      // إخفاء زر الإرسال وعرض رسالة الخطأ
      submitBtn.classList.add('hidden');
      errorMsg.classList.remove('hidden');
    }
  })
  .catch(error => {
    console.error(error);
    // إخفاء زر الإرسال وعرض رسالة الخطأ
    submitBtn.classList.add('hidden');
    errorMsg.classList.remove('hidden');
  });
});

يستخدم fetch() لإرسال طلب POST إلى ملف المعالجة handler.php، مع إرفاق رأس Content-Type والجسم المحتوي على بيانات البريد الإلكتروني. يتم التعامل مع الاستجابة باستخدام then()، حيث يتم التحقق من معلومة الحالة للاستجابة وإظهار رسالة النجاح أو الخطأ وفقًا لذلك. يتم التعامل مع أي أخطاء باستخدام catch()، حيث يتم عرض رسالة الخطأ في هذه الحالة. يمكن تغيير الملف المعالج و Content-Type حسب حاجتك وتكوين الخادم الذي تستخدمه.

هناك العديد من خدمات ومواقع البريد الإلكتروني الذي يمكن استخدامها لإضافة نماذج الاشتراك على موقعك بدون الحاجة إلى كتابة الكود بنفسك. هذه الخدمات عادةً ما تتيح إنشاء نماذج الاشتراك بسهولة وبشكل سريع، ويتم تضمينها في موقعك باستخدام قطعة من الكود الذي توفره الخدمة. ومن بين الخدمات المشهورة لذلك:

• Mailchimp: يتيح Mailchimp إنشاء نماذج الاشتراك المخصصة التي يمكن تضمينها في موقعك باستخدام كود HTML الذي توفره الخدمة.
• Constant Contact: هذه الخدمة تتيح إنشاء نماذج الاشتراك بشكل سهل وبدون الحاجة إلى كتابة الكود بنفسك.
• AWeber: هذه الخدمة تتيح إنشاء نماذج الاشتراك المخصصة بسهولة وتضمنها في موقعك باستخدام الكود HTML الذي توفره الخدمة.
• GetResponse: يتيح GetResponse إنشاء نماذج الاشتراك المخصصة التي يمكن تضمينها في موقعك باستخدام كود HTML الذي توفره الخدمة.

هذه الخدمات لها تكاليف، وتختلف الأسعار والميزات المتاحة في كل منها. يمكنك البحث عن خدمة مناسبة لاحتياجاتك وميزانيتك.

بتاريخ 6 ساعة قال Mustafa Suleiman:

بتاريخ 6 ساعة قال أحمد رضا5:

يمكنك عمل ذلك باستخدام HTMl  فقط بدون الحاجة الي استخدام js :

 

    <form
      action="mailto:yourEmail@gmail.com"
      method="POST"
      encType="multipart/form-data"
    >
            <input type="email" name="email-form"  placeholder="Email" />
    </form>

 

وبهذا يمكنك ارسال محتوي الفورم الي بريدك الإلكتروني مباشرة

ويمكنك عمل نفس الفكرة ونظام الإشتراك في البريد باستخدام JavaScript بشكل متقدم عن طريق بعض المكتبات مثل:

• Nodemailer

• EmailJS

أظهر المزيد  

 لا يمكن استخدام "mailto:" في عنوان الإجراء (action) في النموذج لإرسال البريد الإلكتروني من خلال الجانب العميل (المتصفح)، بل يستخدم فقط لفتح برنامج البريد الإلكتروني على الكمبيوتر المحلي.

طبعاً ذلك ممكن فعند فتح البريد يتم ارسال البيانات التي ادخلتها بواسطة البريد الإلكتروني ويكون شكل البيانات المستلمة كالتالي:

وشكل الفورم كالأتي:

وهذا من موقع قائم بالفعل ولا يوجد مشكلة 

وهذه الطريقة تصلح للعمليات البسيطة وتوفر عليك استخدام مكتبات خارجية أو عمل كود back-end 

ولا يوجد مشكله مع هذه الطريقة غير أنها ليست أفضل ممارسة بالنسبة لتجربة المستخدم