هل ترغب في استقبال رسائل الزوار من مدونتك على بلوجر مباشرة إلى تيليجرام؟ في هذا ال شرح سنوضح طريقة سهلة وآمنة لإنشاء صفحة "اتصل بنا" بدون الحاجة إلى إعدادات برمجية معقدة، باستخدام بوت جاهز ومجاني.
الخطوة 1: احصل على معرف الشات (Chat ID)
- افتح تيليجرام وابحث عن البوت: @userinfobot
- أرسل له أي رسالة.
- سيظهر لك Your ID — هذا هو معرف الشات الخاص بك.
الخطوة 2: فعّل الاستلام من البوت
- ابحث عن البوت: @contactBlfymBot
- أرسل له أي رسالة، مثل "مرحبا".
- الآن أصبح بإمكان البوت إرسال الرسائل لك من خلال صفحة الاتصال.
الخطوة 3: أضف صفحة "اتصل بنا" في بلوجر
- من لوحة تحكم بلوجر، انتقل إلى "الصفحات" ثم اضغط على "صفحة جديدة".
- اختر العنوان مثلاً: اتصل بنا.
- انتقل إلى وضع HTML والصق الكود التالي:
صفحة اتصل بنا
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>اتصل بنا</title>
<link href="https://cdn.jsdelivr.net/gh/mr-abu-guda/blfym-scripts@refs/heads/main/stylesheet-contact-page.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="contact-container">
<h1>اتصل بنا</h1>
<form id="contactForm">
<div class="form-group">
<label for="name">الاسم الكامل</label>
<input type="text" id="name" required placeholder="أدخل اسمك الكامل">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#6c757d">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
</div>
<div class="form-group">
<label for="contact">البريد الإلكتروني أو رقم الهاتف</label>
<div class="input-wrapper">
<input type="text" id="contact" required placeholder="أدخل بريدك الإلكتروني أو رقم هاتفك">
<svg id="phoneIcon" class="input-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#6c757d">
<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
</svg>
<svg id="emailIcon" class="input-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#6c757d">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</div>
</div>
<div class="form-group">
<label for="message">الرسالة</label>
<textarea id="message" required placeholder="أدخل رسالتك هنا"></textarea>
</div>
<div id="chatId" class="hidden-data">ضع هنا الشات اي دي</div>
<div id="successMessage" class="message success-message">
تم إرسال رسالتك بنجاح! سنتواصل معك قريبًا.
</div>
<div id="errorMessage" class="message error-message">
حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى لاحقًا.
</div>
<button type="submit" id="ahmed"><span>إرسال الرسالة</span></button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/gh/mr-abu-guda/blfym-scripts@refs/heads/main/script-to-contact-page.js"></script>
</body>
</html>
مهم: لا تنسَ تعديل السطر:
<div id="chatId" class="hidden-data">ضع هنا الشات اي دي</div>
واستبداله بـ Chat ID الخاص بك الذي حصلت عليه من @userinfobot.
مميزات هذه الطريقة
- لا حاجة إلى توكن أو أي معلومات حساسة.
- سهولة الاستخدام لجميع الزوار.
- تصميم أنيق ومتجاوب مع جميع الشاشات.
بهذا تكون قد أنشأت صفحة تواصل احترافية وآمنة تمامًا. استمتع بتجربة جديدة في التواصل مع جمهورك على بلوجر مباشرة من تيليجرام!
