طريقة عمل صفحة “اتصل بنا” في بلوجر بشكل احترافي (مهم جداً لأي مدونة)
طريقة عمل صفحة “اتصل بنا” في بلوجر بشكل احترافي
لو عندك مدونة على بلوجر وعايز تطورها وتخلي شكلها احترافي قدام الزوار، لازم يكون عندك صفحة اتصل بنا.
الصفحة دي بسيطة جدًا، لكنها بتفرق جامد في ثقة الزائر، وكمان بتزود قبول موقعك في جوجل وأدسنس لأنها تعتبر جزء أساسي من الصفحات القانونية.
المميز إنك تقدر تعمل الصفحة دي بسهولة جدًا ومن غير أي إضافات معقدة.
ليه لازم تعمل صفحة اتصل بنا؟
- بتدي انطباع إن مدونتك محترمة ومش مدونة عشوائية.
- بتخلي الزائر يقدر يوصل لك بسهولة لو عنده مشكلة أو استفسار.
- بتزود ثقة جوجل في موقعك وبتحسّن السيو (SEO).
- من متطلبات جوجل أدسنس إن يكون عندك صفحة تواصل واضحة.
لو بتتعامل مع شركات أو بتعرض خدماتك، وجود وسيلة اتصال ثابتة حاجة مهمة جدًا.
المكونات الأساسية لأي صفحة “اتصل بنا”
علشان تكون الصفحة فعّالة ومريحة للزائر، لازم تحتوي على:
- اسم الشخص اللي بيبعت الرسالة.
- البريد الإلكتروني أو وسيلة تواصل.
- موضوع الرسالة.
- نص الرسالة نفسه.
- زر إرسال واضح وبارز.
ويا سلام لو تضيف كمان:
✔ كابشا – لحماية الصفحة من السبام.
✔ رسالة نجاح بعد الإرسال علشان الزائر يعرف إن رسالته وصلت.
إزاي تعمل صفحة “اتصل بنا” في بلوجر؟
الخطوات سهلة جدًا:
افتح لوحة التحكم في Blogger.
- اختار الصفحات Pages.
- اضغط صفحة جديدة.
- اكتب العنوان: اتصل بنا.
- غيّر وضع التحرير إلى HTML.
الصق كود نموذج التواصل (من نفس المصدر اللي اسفل المقال قم بنسخ كود صفحه اتص بنا من المصدر باللغه العربي أو الانجليزي ).
أو انسخ الكود الاتى ولا تنسى وضع id المدونه بداخل الكود فى الجز المظلل :
<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="contact-form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="بريد إلكتروني" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<br />
<div style="text-align: center;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>
<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارٍ الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة، يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغًا.', 'title': 'نموذج الاتصال', 'blogId': 'ضع هنا id بلوجر الخاص بك', 'contactFormNameMsg': 'الاسم إجباري', 'contactFormEmailMsg': 'بريد إلكتروني إجباري', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script></div>
اضغط نشر… وكده الصفحة جاهزة!
نصيحة مهمة مني ليك
خلي صفحة "اتصل بنا" مش بس نموذج
خلي فيها:
نبذة صغيرة عنك أو عن الموقع.
وسائل تواصل تانية زي فيسبوك – واتساب – صفحة فيسبوك الرسمية.
جملة ترحيب بسيطة تخلي الزائر يحس إنه مرحب بيه.
ولو بتقدم خدمات، عرف الزائر إزاي يطلبها.
الفكرة إن الصفحة دي هي "باب بيتك"… لو شكلها كويس، الزائر هيرجعلك تاني وهيثق فيك.
المصدر
https://www.tarekhco.site/2025/12/creating-a-contact-us-page-on-blogger.html
