📁 آخر الأخبار

كود صفحة اتصل بنا HTML جاهز للمدونات على بلوجر

في هذا المقال نقدم لك نموذج كود اتصل بنا 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>
  

ما تنساش تحط رقم الـ id الخاص بمدونة بلوجر بتاعتك واللي هو بيكون رقم موجود في آخر رابط صفحة بلوجر الرئيسية لمدونتك زي ما موضح في الصورة دي.

كيفية الحصول على id مدونة بلوجر الخاصة بك

عند الدخول إلى لوحة تحكم مدونتك على بلوجر، تجد في نهاية رابط الصفحة الرئيسية رقم هو معرف مدونتك (blog ID). هذا الرقم هو ما يجب وضعه في مكان "ضع هنا id بلوجر الخاص بك" داخل الكود السابق.

طريقة إضافة الكود في مدونة بلوجر

  • قم بإنشاء صفحة جديدة في بلوجر باسم "اتصل بنا" أو أي اسم تريده.
  • افتح صفحة التحرير في وضع HTML.
  • الصق الكود السابق مع التأكد من استبدال id الخاص بالمدونة.
  • اضغط على نشر.
  • بهذا يكون لديك نموذج اتصال يعمل بكفاءة عالية وسهل الاستخدام.

لماذا تستخدم صفحة اتصل بنا في مدونتك؟

1. تسهل على زوار مدونتك التواصل معك بشكل مباشر وبسيط.

2. تعزز ثقة الزوار وتشجعهم على التفاعل وإرسال الملاحظات أو الاستفسارات.

3. جزء مهم من تحسين تجربة المستخدم على مدونتك.

4. تساعدك في بناء علاقة أفضل مع جمهورك.

نصائح لاستخدام نموذج الاتصال بكفاءة

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