<!--
هاد الكود كيعطيك صفحة "اتصل بنا" بسيطة واحترافية للمدونة ديالك على Blogger.
ملاحظة مهمة: هاد الكود كيعطيك غير التصميم (HTML و CSS). باش الفورم يخدم ويسيفط ليك الرسائل، خاصك تستعمل "نموذج الاتصال" (Contact Form) ديال Blogger.
تعليمات:
1. دير "تخطيط" (Layout) في البلوغر، زيد "أداة" (Gadget) جديدة، واختار "نموذج الاتصال" (Contact Form).
2. حفظ الأداة (Gadget)، ولكن خليها مخفية. تقدر تخفيها بالـ CSS.
3. سير لـ "الصفحات" (Pages) ديالك فالبلوغر، وزيد صفحة جديدة سميتها "اتصل بنا".
4. بدل وضع التحرير لـ "عرض HTML" (HTML View).
5. لصق هاد الكود كامل في الصفحة.
6. يمكن ليك تبدل الألوان، الخطوط، أو أي حاجة في الـ CSS باش يتناسب مع القالب ديالك.
-->
<!-- CSS Styles for the Contact Page -->
<style>
/* استعملنا Flexbox باش الفورم يكون في الوسط */
.contact-container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #f8f9fa; /* لون خفيف لخلفية الصفحة */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #333;
min-height: 70vh; /* باش الفورم يكون في الوسط حتى ف الصفحات الخاويين */
flex-direction: column;
}
.contact-box {
background-color: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 600px;
}
.contact-box h2 {
font-size: 2.2em;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 10px;
text-align: center;
}
.contact-box p {
color: #666;
margin-bottom: 30px;
text-align: center;
line-height: 1.6;
}
/* تنسيق حقول الفورم */
.contact-form-group {
margin-bottom: 20px;
}
.contact-form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.contact-form-group input,
.contact-form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1em;
transition: all 0.3s ease;
box-sizing: border-box; /* باش العرض يبقى هو هو مع الـ padding */
}
.contact-form-group input:focus,
.contact-form-group textarea:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
outline: none;
}
/* تنسيق الزر ديال "إرسال" */
.contact-form-button {
width: 100%;
padding: 15px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.contact-form-button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.contact-form-button:active {
transform: translateY(0);
}
/* تنسيق خاص باش الفورم يظهر في الصفحة ديال "اتصل بنا" فقط */
.contact-page .ContactForm {
display: block !important;
}
</style>
<!-- HTML Structure for the Contact Page -->
<div class="contact-container">
<div class="contact-box">
<h2>تواصل معنا</h2>
<p>إذا كان عندك أي سؤال، اقتراح، أو مشكل، ما تردش تتواصل معنا!</p>
<!--
هاد الفورم هو غير تصميم.
البلوغر غايعوض هاد الكود بالفورم الحقيقي ديال "نموذج الاتصال" (Contact Form Gadget).
-->
<form id="contact-form-dummy">
<div class="contact-form-group">
<label for="name">الاسم:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="contact-form-group">
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="contact-form-group">
<label for="message">الرسالة:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="contact-form-button">إرسال الرسالة</button>
</form>
<!--
ملاحظة: هاد الـ div هو اللي غيعمر بالفورم الحقيقي ديال البلوغر
اللي غادي تزيدو من "تخطيط" (Layout).
-->
<div id='ContactForm1' class='widget ContactForm'>
<!-- هنا فين غادي يظهر الفورم ديال البلوغر -->
</div>
</div>
</div>
COMMENTS