دليل شامل لإنشاء نموذج اتصال باستخدام HTML، CSS، PHP، وSQL
محتويات
دليل شامل لإنشاء نموذج اتصال باستخدام HTML، CSS، PHP، وSQL
نموذج الاتصال هو أداة مهمة على أي موقع ويب، حيث يسمح للزوار بالتواصل مع مالك الموقع أو فريق الدعم بسهولة. في هذا المقال، سأقدم لك شرحًا شاملاً حول كيفية إنشاء نموذج اتصال باستخدام لغات HTML، PHP، CSS، وSQL.
المتطلبات لإنشاء نموذج الاتصال
- HTML: لإنشاء هيكل النموذج.
- CSS: لتصميم النموذج.
- PHP: لمعالجة البيانات المرسلة من النموذج.
- 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 لتخزين الرسائل في قاعدة البيانات. هذا النموذج يمكن أن يكون نقطة انطلاق جيدة لأي موقع ويب يحتاج إلى ميزة الاتصال.
؟.jpg)
.png)
