دليل شامل لإنشاء نموذج اتصال باستخدام HTML، CSS، PHP، وSQL

دليل شامل لإنشاء نموذج اتصال باستخدام HTML، CSS، PHP، وSQL

Profil
Icons
ياسر صابري
كاتب محتوى في معلومات
منذ: 2024-04-23
آخر تحديث: 2024-08-04

محتويات


دليل شامل لإنشاء نموذج اتصال باستخدام HTML، CSS، PHP، وSQL

دليل شامل لإنشاء نموذج اتصال باستخدام HTML، CSS، PHP، وSQL

نموذج الاتصال هو أداة مهمة على أي موقع ويب، حيث يسمح للزوار بالتواصل مع مالك الموقع أو فريق الدعم بسهولة. في هذا المقال، سأقدم لك شرحًا شاملاً حول كيفية إنشاء نموذج اتصال باستخدام لغات HTML، PHP، CSS، وSQL.

المتطلبات لإنشاء نموذج الاتصال

إنشاء هيكل النموذج باستخدام HTML

<!DOCTYPE html>
<html lang="ar">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>نموذج الاتصال</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div class="contact-form-container">
       <h1>نموذج الاتصال</h1>
       <form action="process_form.php" method="POST">
           <label for="name">الاسم:</label>
           <input type="text" id="name" name="name" required>

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

           <label for="message">الرسالة:</label>
           <textarea id="message" name="message" required></textarea>

           <button type="submit">إرسال</button>
       </form>
   </div>
</body>
</html>

تصميم النموذج باستخدام CSS

/* ملف: styles.css */
body {
   font-family: Arial, sans-serif;
   background-color: #f4f4f4;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

.contact-form-container {
   background-color: #fff;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 400px;
}

.contact-form-container h1 {
   text-align: center;
   margin-bottom: 20px;
}

label {
   display: block;
   margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea {
   width: 100%;
   padding: 10px;
   margin-bottom: 15px;
   border: 1px solid #ddd;
   border-radius: 4px;
}

button {
   width: 100%;
   padding: 10px;
   background-color: #5cb85c;
   border: none;
   color: #fff;
   border-radius: 4px;
   cursor: pointer;
}

button:hover {
   background-color: #4cae4c;
}

معالجة البيانات باستخدام PHP

<?php
// ملف: process_form.php

// التحقق من وجود طلب POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $name = htmlspecialchars($_POST['name']);
   $email = htmlspecialchars($_POST['email']);
   $message = htmlspecialchars($_POST['message']);

   // الاتصال بقاعدة البيانات
   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "contact_db";

   $conn = new mysqli($servername, $username, $password, $dbname);

   // التحقق من الاتصال
   if ($conn->connect_error) {
       die("فشل الاتصال: " . $conn->connect_error);
   }

   // إدخال البيانات في قاعدة البيانات
   $sql = "INSERT INTO contacts (name, email, message) VALUES ('$name', '$email', '$message')";

   if ($conn->query($sql) === TRUE) {
       echo "تم إرسال الرسالة بنجاح!";
   } else {
       echo "خطأ: " . $sql . "<br>" . $conn->error;
   }

   $conn->close();
}
?>

إنشاء قاعدة البيانات باستخدام SQL

-- إنشاء قاعدة بيانات جديدة
CREATE DATABASE contact_db;

-- استخدام قاعدة البيانات
USE contact_db;

-- إنشاء جدول لتخزين رسائل الاتصال
CREATE TABLE contacts (
   id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(50) NOT NULL,
   email VARCHAR(50) NOT NULL,
   message TEXT NOT NULL,
   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

بهذا نكون قد أنشأنا نموذج اتصال بسيط باستخدام HTML لإنشاء الهيكل، CSS لتصميم النموذج، PHP لمعالجة البيانات، وSQL لتخزين الرسائل في قاعدة البيانات. هذا النموذج يمكن أن يكون نقطة انطلاق جيدة لأي موقع ويب يحتاج إلى ميزة الاتصال.

 

الوسوم

شارك المقالة


إقرأ أيضا


مقالات منوعة

صلاة الوتر

كيفيّة أداء صلاة الوتر

الكرة الطائرة

الكرة الطائرة

فهم الفرق بين التداول الآلي واليدوي

الفرق بين المدير والقائد

الفرق بين المدير والقائد

أفضل الطرق في علاج جفاف البشرة الدهني

علاج جفاف البشرة الدهني

ما هي قوانين كرة السلة

ما هي قوانين كرة السلة

فهم الـ NFTs

حكم قراءة الأبراج بين متعة التسلية وضرورة التفكير العقلاني

حكم قراءة الأبراج

 كيفية تنمية المهارات الإدارية؟

تأسيس شركة ناجحة

كيفية تقصير بنطلون الجينز

كيفية تقصير بنطلون الجينز

شكرًا لكم على زيارتكم لمعلومات، ونتطلع لرؤية تقدمكم ونجاحكم في رحلة التعلم.