How To Receive Messages On Gmail Using Html,Css,JavaScript / استقبال الرسائل Frontend (2025)
كيفية إرسال واستقبال الرسائل عبر Gmail باستخدام HTML وCSS وJavaScript
مقدمة
يوجد العديد من المطورين الذين يحتاجون الي نموذج اتصال فعال يتم ارسال الرسائل من خلاله الي البريد الالكتروني من خلال ال Frontend بدون استخدام لغة ال PHP او اي لغة اخري backend اليوم هعلمكم ازاي تقدرو تعملو ده بإستخدام لغات HTML , CSS , JS .
الخطوة الأولى: إنشاء واجهة نموذج الإتصال باستخدام HTML
هنبدأ بتصميم نموذج الإتصال يحتوي على الحقول المطلوبة مثل الاسم والبريد الإلكتروني والهاتف والرسالة، بالإضافة إلى زر للإرسال.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="contact-form">
<div class="logo">
<img src="images/logo.jpg" alt="Logo" width="150px">
</div>
<h2>Contact Us</h2>
<input type="text" id="fullName" placeholder="Full Name" required>
<input type="email" id="email" placeholder="Email Address" required>
<input type="tel" id="phone" placeholder="Phone Number" required>
<textarea id="message" placeholder="Your Message" rows="4" required></textarea>
<button id="sendMessage">Send Message</button>
</div>
</div>
</body>
</html>
الخطوة الثانية: تنسيق النموذج باستخدام CSS
استخدم CSS لتحسين مظهر النموذج وجعله متجاوبًا مع الأجهزة المختلفة.
/* إعدادات عامة */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* خلفية بيضاء ونموذج في المنتصف */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f9f9f9;
}
/* صندوق النموذج */
.container {
width: 100%;
max-width: 400px;
}
/* تصميم نموذج الاتصال */
.contact-form {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* اللوجو */
.logo img {
margin-bottom: 10px;
}
/* العنوان */
h2 {
margin-bottom: 15px;
color: #333;
}
/* حقول الإدخال */
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
/* زر الإرسال */
button {
width: 100%;
padding: 10px;
background-color: #5E17EB;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
button:hover {
background-color: #4a0ecf;
}
الخطوة الثالثة: إضافة التفاعل باستخدام JavaScript & Emailjs
-
تثبيت اكواد Emailjs
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init({
publicKey: "YOUR_PUBLIC_KEY",
});
})();
</script>-
إنشاء حساب جديد علي Emailjs.
-
Email Services (Gmail) ثم قم بعمل اتصال بينه وبين الجيميل الخاص بك.
Email Templates قم بإنشاء نموذج الاتصال وقم بالتعديل عليه مثل ما هوا بالفيديو المرفق
Fantastic article! So glad I found this.