كيف تضيف نموذج الاتصال (صفحة اتصل بنا) في Blogger؟

نشرت: 2020-11-10

تعد إضافة نموذج اتصل بنا في Blogger مهمة شاقة لأنها لا تدعم المكونات الإضافية مثل WordPress.

ما يفعله معظم المدونين في Blogspot هو طلب المساعدة من مواقع الجهات الخارجية (foxyform ، jotform ، 123contactform ، إلخ).

صفحة نموذج الاتصال في Blogger ولكنك ستتعلم اليوم كيفية إضافة صفحة الاتصال بنا الرسمية في Blogger.

كما قلت سابقًا ، من الممكن إدخال أكواد الجهات الخارجية في صفحات جديدة مثل السير في الحديقة. ومع ذلك ، فإن نموذج الاتصال الرسمي أفضل بكثير من هؤلاء.


مزايا نموذج المدون الرسمي

  1. ستصلك الرسالة بمجرد إرسالها. وقابلية التسليم 100٪ كذلك.
  2. الواجهة البسيطة تجعل من السهل على الزائرين الاتصال بك.
  3. إذا كنت تعرف لغة Cascade Style Sheet (CSS) ، فسيكون من السهل عليك تخصيص النموذج حسب رغبتك.
  4. لن يتم إعادة تحميل الصفحة بأكملها لإرسال الرسالة.

لقد قسمت هذا البرنامج التعليمي إلى ثلاثة أقسام ، مع إضافة أداة الاتصال ، وإخفائها وتنفيذ الكود الرسمي في صفحة جديدة.

الجزء 1: إضافة أداة جهات الاتصال

اتبع الخطوات الواردة أدناه لإضافة أداة الاتصال بنا على مدونتك.

الخطوة 1 : قم بزيارة blogger.com وقم بتسجيل الدخول إلى حسابك. إذا كنت تقوم بتشغيل مدونات متعددة ، فأنت بحاجة إلى اختيار المدونة المطلوبة من القائمة.

الخطوة 2 : انقر فوق Layout من الشريط الجانبي الأيسر للحصول على خيار لإضافة أدوات.

blogger- تخطيط الخيار
  • حفظ

الخطوة 3 : يمكنك رؤية رابط إضافة أداة على اللوحة الرئيسية على الجانب الأيمن. سيؤدي النقر فوقه إلى نقلك إلى قائمة الأدوات.

مدون إضافة أداة
  • حفظ

الخطوة 4 : بعد ذلك ، اختر المزيد من الأدوات من الجانب الأيسر. الآن ، سترى نموذج الاتصال . فقط أضف نفس الشيء.

نموذج الاتصال Gadget-Blogger
  • حفظ

الجزء 2: إخفاء الأداة

الآن ، ستتعلم كيفية إخفاء أداة الاتصال.

الخطوة 1 : نحن بحاجة للعب مع قسم القالب هنا. لذلك ، انقر فوق القوالب من القائمة اليسرى.

إعدادات قالب Blogger
  • حفظ

الخطوة 2 : بعد ذلك ، انقر فوق تحرير HTML وسيتم تزويدك بكود مدونتك بالكامل في حقل كبير.

مدونة- قالب- تحرير- HTML
  • حفظ

الخطوة 3 : ابحث عن ]]> </ b: skin> ثم ضع الكود التالي قبله مباشرة.

div # ContactForm1 {
العرض: لا شيء!
}

نموذج الاتصال كود المدون
  • حفظ

بعد ذلك ، انقر فوق حفظ للاحتفاظ بالتغييرات.

بعد الخطوة الثالثة ، لن ترى أداة جهات الاتصال في مدونتك.

الجزء - 3: إضافة نموذج الاتصال إلى الصفحة

ستحصل على رمز نموذج الاتصال الرسمي المخصص للمدون هنا لإضافته ليتم عرضه في صفحة منفصلة.

الخطوة 1 : اذهب إلى Pages وانقر على صفحة جديدة.

New-Page-in-Blogger
  • حفظ

الخطوة 2 : الصق الكود التالي في محرر منشورات HTML بعد إزالة كل شيء بداخله.

Blogger-Contact-Us-Page-Code
  • حفظ

<div id = ”custom_ContactForm1 ″ class =” عنصر واجهة المستخدم ContactForm ”>
<div class = ”contact-form-widget”>
<p> تواصل معنا عن طريق ملء النموذج أدناه. </ p>
<div class = ”form”>
<اسم النموذج = "نموذج الاتصال">
<p> </p>
اسم
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </p>
البريد الإلكتروني
<span style = ”font-weight: bolder؛”> * </span>
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” email ”id =” ContactForm1_contact-form-email ”class =” contact-form-email ”>
<p> </p>
رسالة
<span style = ”font-weight: bolder؛”> * </span>
<br>
<textarea rows = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </textarea>
<p> </p>
<input type = ”button” value = ”Send” id = ”ContactForm1_contact-form-submit” class = ”contact-form-button contact-form-button-submit”>
<p> </p>
<div style = ”text-align: center؛ أقصى عرض: 222 بكسل ؛ العرض: 100٪ ">
<p id = ”ContactForm1_contact-form-error-message” class = ”contact-form-error-message”> </p>
<p id = ”ContactForm1_contact-form-Success-message” class = ”contact-form-success-message”> </p>
</div>
</form>
</div>
</div>
<div class = ”clear”> </div>
<span class = ”widget-item-control”>
<span class = ”item-control blog-admin”>
<a title = "Edit" target = "configContactForm1 ″ onclick =" return _WidgetManager._PopupConfig (document.getElementById (“ContactForm1 ″)) ؛" href = ”// www.blogger.com/rearrange؟blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img width = "18 ″ height =" 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</ span>
</ span>
<div class = ”clear”> </div>
</div>

الخطوة 3: أضف عنوانًا (مثل اتصل بنا) ثم قم بتغيير الإعدادات الموضحة أدناه.

اتصل بنا صفحة المدون
  • حفظ

الخطوة 4: أخيرًا ، انقر فوق الزر نشر. هذا كل شئ.

سيتم تسليم الرسائل المرسلة من نموذج الاتصال هذا إلى البريد الإلكتروني للمسؤول. إذا كانت المدونة بها أكثر من مسؤول واحد ، فسيحصلون عليها جميعًا.


➜ دروس Blogspot المفيدة الأخرى:

  • كيفية إضافة ملف Robots.txt مخصص في Blogger؟
  • كيفية إرسال خريطة موقع Blogger إلى Google Search Console؟

تغليف

أتمنى أن تعرف الآن كيفية إضافة صفحة اتصل بنا في المدون. إذا وجدت أي صعوبة مثل عدم إمكانية التسليم حتى بعد رسالة النجاح ، فإنني أوصي بإعادة تثبيت أداة جهات الاتصال.

ونعم ، إذا كانت لديك معرفة كافية بالتعامل مع مقتطفات CSS وجافا سكريبت ، فيمكنك الاستمرار في تخصيص الصفحة للحصول على مظهر مرئي أفضل.

لا تنس مشاركة هذا المنشور مع أصدقائك المدونين.