كيف يمكن ارسال بيانات من الفورم الى الايميل باستخدام جافاسكربت أو PHP

Mamn Akrm · 30 يونيو 2023

اهلا اريد ان اتعلم كيف يمكنني إرسال البيانات من ال form الى الايميل الخاص بي وهذا هو الform الخاص بي باستخدام js او حتى php


<center>

<form>

<br>

<input id="email" type="email" placeholder="Enter email"><br>

<br>

<input id="pass" type="password" placeholder="Enter Password"><br>

<br>

<input id="button" type="submit">



</form>

اسف ان الكود ليس مرتبا هنا لكنه مرتب في محرر الأكواد اتمنى الرد بسرعة

Adnane Kadri · 30 يونيو 2023

قم بوضع ملف contact.php وضعه على نفس مستوى هذا الملف، ثم قم بتصريح الخواص action و method لتعريف المسار المستهدف وطريقته:

<form action="contact.php" method="POST">

الآن بعد الضغط على زر submit وتقديم النموذج سيتم ارسال الطلب الى صفحة contact.php بطريقة POST بالبيانات التي تدخلها في الحقول داخل form.

سيمكنك استقبال هاته البيانات في ملف contact.php والقيام بباقي العملية، لنقل أننا نريد استقبال قيمة email:

<?php 

$email = $_POST['email'];

الآن لنقم بإرسالها الى الايميل بوساطة الدالة mail في php:

mail("youremail@gmail.co","example", 'الإيميل المدخل هو: ' . $email);

طبعا فإن هذا هو منطق العملية بشكل عام ونمذجة بسيطة لها، سيمكنك التوسع فيها بإضفاء المزيد من المتغيرات أو استعمال تفاصيل أكثر.

يمكنك الاستزادة بالاطلاع على:

Mustafa Suleiman · 30 يونيو 2023

ستحتاج إلى إنشاء نموذج استمارة من خلال HTML ثم استخدام JS من أجل إرسال البيانات إلى الخادم سواء كان ذلك الخادم بلغة PHP أو JS في بيئة Node.js.

وإليك مثال للنموذج وكود إرسال البيانات لخادم بلغة PHP:

<center>
  <form id="myForm">
    <br>
    <input id="email" type="email" name="email" placeholder="Enter email" required><br>
    <br>
    <input id="pass" type="password" name="password" placeholder="Enter Password" required><br>
    <br>
    <input id="button" type="submit" value="Submit">
  </form>

  <script>
    document.getElementById("myForm").addEventListener("submit", async function(event) {
      event.preventDefault(); // يمنع إعادة تحميل الصفحة بعد النقر على زر الإرسال

      // احصل على قيمة الحقول
      const email = document.getElementById("email").value;
      const password = document.getElementById("pass").value;

      try {
        // قم بإرسال البيانات إلى الخادم باستخدام fetch و async/await
        const response = await fetch("send_email.php", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: `email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`
        });

        if (response.ok) {
          // تم إرسال البيانات بنجاح
          console.log("Data sent successfully");
          // يمكنك إضافة رسالة تأكيد هنا
        } else {
          throw new Error("Failed to send data");
        }
      } catch (error) {
        console.error(error);
        // يمكنك إضافة رسالة خطأ هنا
      }
    });
  </script>
</center>

والآن، على الجانب الخادم (Server-Side)، عليك بإنشاء ملف PHP جديد يسمى "send_email.php" (أو أي اسم آخر تفضله)، ثم بوضع الكود التالي لمعالجة البيانات وإرسالها إلى البريد الإلكتروني:

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
  // استقبال البيانات من النموذج
  $email = $_POST["email"];
  $password = $_POST["password"];

  // تهيئة الرسالة البريدية
  $to = "your_email@example.com"; // البريد الإلكتروني الذي ستستلم عليه الرسالة
  $subject = "New Form Submission";
  $message = "Email: " . $email . "\n" . "Password: " . $password;
  $headers = "From: your_email@example.com"; // البريد الإلكتروني الذي سيظهر في حقل المرسل

  // إرسال البريد الإلكتروني
  if (mail($to, $subject, $message, $headers)) {
    // تم إرسال البريد بنجاح
    echo "Email sent successfully";
  } else {
    // حدث خطأ أثناء إرسال البريد
    echo "Failed to send email";
  }
}
?>

مع استبدال "your_email@example.com" بعنوان البريد الإلكتروني الذي ترغب في استلام الرسائل عليه.

علي عبد محسن · 30 يونيو 2023

<!DOCTYPE html>
<html>
<head>
  <title> تواصل معي</title>
  <script src=
    "https://smtpjs.com/v3/smtp.js">
  </script>
  
  <script type="text/javascript">
    function sendEmail() {
      Email.send({
        Host: "smtp.gmail.com",
        Username: "عنوان حساب جيميل الذي ستستخدمه كخادم",
        Password: "كلمة المرور الخاص بالحساب",
        To: 'بريدك الالكتروني الذي تستلم عليه الرسائل',
        From: "البريد الاكتروني للمرسل او الشخص الذي يتواصل معك",
        Subject: "عنوان الرسالة",
        Body: "محتوى الرسالة",
      })
        .then(function (message) {
          alert("تم الارسال بنجاح")
        });
    }
  </script>
</head>
  
<body>
  <form method="post">
    <input type="button" value="Send Email" 
        onclick="sendEmail()" />
  </form>
</body>
</html>

في الواقع تستطيع تحقيق هذا الغرض بأكثر من طريقة نذكر منها الطريقة التالية التي تتيح للمستخدم أو الزائر إرسال بريد الكتروني من صفحة html ولتكن مثلاً صفحة "تواصل معي"، مباشرة الى بريدك الالكتروني دون الحاجة لتطوير خادم backend ولكن بإستخدام مكتبة smtpjs المجانية وإستخدام حساب gmail ليعمل دور الوسيط أو الخادم الذي سيقوم بإرسال رسائل الزوار الى بريدك الالكتروني . كما في المثال المشروح أعلاه. يمكنك الإطلاع أكثر على المكتبة في موقعها الرسمي عند بحثك عن smtpjs في محركات البحث.

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

عدة أمور مهمة يجب أن تعرفها عند إرسال البريد الإلكتروني من PHP:

هناك وظيفة PHP mail() المدمجة وهي بسيطة إلى حد ما.كما في التعليقات السابقة
على الرغم من بساطة وظيفة PHP المدمجة mail() ، إلا أنها توفر وظائف محدودة لإرسال البريد الإلكتروني. لن تكون قادراً على إرفاق المرفقات في البريد الإلكتروني الخاص بك ، وسيكون بناء قالب HTML جميل مع صور مدمجة مهمة صعبة أيضاً.
ترسل وظيفة mail() من PHP البريد الإلكتروني من موقعك ، والتي قد تتسبب في مشاكل مع قابلية التسليم بسبب المخاوف الأمنية مثل الشك بالبريد المزعج والمصادرة السوداء. أيضاً لا تسمح mail() في الغالب بإرسال الرسائل باستخدام خادم SMTP خارجي ، ولا تدعم المصادقة SMTP.

ماهي الخيارات المتاحة لإرسال البريد الإلكتروني في PHP؟
هناك أربعة خيارات شائعة:

الوظيفة المدمجة في PHP mail()
PHPMailer;
Symfony Mailer;
خدمات إرسال البريد الإلكتروني الخارجية مثل Mailtrap, Sendgrid, Mailgun وما إلى ذلك.

ولكل طريقة من الطرق السابقة مميزاتها وعيوبها يمكنك تحديد الطريقة المناسبة بالنسبة لك حسب الأهداف المطلوبة للمشروع

كيف يمكن ارسال بيانات من الفورم الى الايميل باستخدام جافاسكربت أو PHP

السؤال

Mamn Akrm

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

Recommended Posts

Adnane Kadri

Mustafa Suleiman

علي عبد محسن

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية