حل مشكلة صفحة اتصل بنا Contact Form على مدونة بلوجر

 حل مشكلة صفحة اتصل بنا Contact Form على مدونة بلوجر


اتصل بنا بلوجر,انشاء صفحة اتصل بنا,صفحة اتصل بنا بلوجر,صفحة اتصل بنا,اضافة صفحة اتصل بنا لمدونة بلوجر,خاصية اتصل بنا لمدونة بلوجر,طريقة انشاء صفحة اتصل بنا في مدونة بلوجر,حل مشاكل صفحة اتصل بنا,اتصل بنا,عمل صفحة اتصل بنا,صفحة اتصل بنا جاهزة,اضافة صفحة اتصل بنا في مدونة بلوجر,اضافة صفحة اتصل بنا,كود اتصل بنا,اضافة اتصل بنا بلوجر,نموذج اتصل بنا بلوجر,صفحة اتصل بنا احترافية,طريقة انشاء صفحة اتصل بنا,انشاء صفحة اتصل بنا 2019,بلوجر

شرح حول كيفية إصلاح الخطأ في نموذج صفحة اتصل بنا بلوجر الذي لا يعمل بشكل صحيح أو لا يرسل رسائل إلى البريد الإلكتروني.


يأتي Blogger مع أداة نموذج اتصال افتراضية. ولكن في بعض الأحيان تحدث مشكلة في نموذج اتصال blogger الذي لا يرسل أي رسائل بريد إلكتروني عند النقر فوق زر الإرسال.


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


اذا كنت تسعي الي تحقيق الربح او تسعي لانشاء مدونة أحترافية يجب عليك إنشاء الصفحات الالزامية لمدونة بلوجر وتركيبها الي المدونة الخاصة بك.


سبق لنا أن قمنا بشرح طريقة إنشاء صفحة إتصل بنا  Contact Us” في دورة بلوجر الخاص بنا إليك كيفية إنشاء جميع الصفحات الالزامية لمدونة بلوجر .

- صفحة من نحن  : About-us
صفحة سياسة الخصوصية :  Privacy-Policy
- صفحة أتصال بنا : Contact Us
- صفحة اتفاقية الاستخدام  : “ Terms of use “
- صفحة فهرس  :  Index “

1- ما هي صفحة اتصل بنا Contact Form

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


يأتي Blogger مع أداة نموذج الاتصال التي يمكن استيرادها من خلال قسم التخطيط. تعمل هذه الأداة بسلاسة في معظم القوالب القديمة ؛ ومع ذلك ، قد لا تعمل في بعض الجديدة.


عندما يضغط المستخدمون على زر الإرسال ، لا توجد استجابة ولا يتم أيضًا تلقي رسائل بريد في gmail عبر نموذج اتصال Blogger.


لقد تلقيت عددًا كبيرًا من الرسائل حول كيفية إصلاح أداة نموذج اتصال blogger لا تعمل أو أن زر الإرسال لا يعمل بشكل صحيح.كما أنني واجهت نفس المشكلة.  


كان كل شيء يعمل على ما يرام إلا عندما أضغط على زر الإرسال ، لم يكن هناك استجابة.بعد إجراء بعض الأبحاث وكسر رأسي ، تمكنت من إصلاح هذه المشكلة.


 وكان نموذج الاتصال الخاص بي على مدونة يعمل كالمعتاد.لكن قبل الكشف عن الحل ، دعنا نعرف سبب ظهور المشكلة.

2- لماذا لا يعمل نموذج الاتصال بلوجر؟

السبب بسيط جدا. هذا لأن وظائف استدعاءات نموذج الاتصال موجودة في حزمة جافا سكريبت الافتراضية في blogger ،تأتي معظم القوالب الحديثة في متناول اليد .


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


3- إزالة أدوات حزمة بلوجر الافتراضية

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


 لذلك يضطر معظم مصممين القوالب بالأستغناء عنها لتسريع تحميل مدونة بلوجر.

  1. عند النقر فوق الزر "إرسال"
  2. يشير نموذج صفحة الأتصال إلى إشعار مثل "جاري الإرسال ...". 
  3. بالإضافة إلى ذلك 
  4. يشير إلى أنه "تم إرسال رسالتك"
  5.  مما يعني أنه تم إرسال الرسالة إلى مسؤول البريد الإلكتروني أو مالك المدونة.


حسنًا، بالنسبة للذين يستخدمون نموذجًا مخصصًا، يرجى محاولة التحقق من نموذج الاتصال في مدونتك لمعرفة أن نموذج الاتصال يعمل بشكل صحيح أم لا؟ 


إذا لم يكن هناك إشعار يقول "جاري الإرسال ..." و "تم إرسال رسالتك".


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


4- كيفية إصلاح زر الإرسال لا يعمل أو أن نموذج الاتصال بلوجر لا يعمل؟

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


  1. > اذهب إلى التخطيط
  2. > انقر فوق إضافة أداة
  3. > اضغط على "+" الموجود على يمين نموذج الاتصال.


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

  1. كيفية إصلاح الخطأ في صفحات / أدوات نموذج الاتصال في بلوجر
  2. قم بتسجيل لدخول إلي حسابك ثم إذهب إلى لوحة تحكم بلوجر
  3. إنتقل للمدونة التي ستطبق عليها الأداة  ثم إلى المظهر  ثم إضغط على تحرير  تعديل HTML  
  4. إضغط داخل المحرر  ثم   F + Ctrl لإضهار مربع البحث
  5. بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بالحث عن الوسم Head و قبله أو فوقع قم بوضع الكود التالي


<b:if cond='data:view.isPage'><style>

        /* Contact Form imintweb.com */

        #comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:right;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-right:5px}.post-body input{width:initial}

        </style></b:if>


الأن إضغط علي حفظ القالب الأن نتجه إلي كيفية إنشاء وضبط صفحة اتصل بنا على مدونة بلوجر.


1- انتقل إلى لوحة تحكم بلوجر 

2- قم بفتح الصفحات  صفحة جديده. 

3- عند إنشاء صفحة جديدة .

4- تأكد من اختيار الوضع HTML ، وليس إنشاء.

5-  الآن قم بلصق الكود التالي


<form id="kontak" name="contact-form">

  <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

  <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />

  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

  <input id="ContactForm1_contact-form-submit" type="button" value="Send Message"/>

  <div style="max-width: 222px; text-align: center; width: 100%;">

    <div id="ContactForm1_contact-form-error-message"></div>

    <div id="ContactForm1_contact-form-success-message"></div>

  </div>

</form>


<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>

<script>//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '86048000000000000395 ';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d86048000000000000395 ','//www.chrohat.com/','86048000000000000395 ');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '86048000000000000395', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]></script>



6- قم بإستبدال المحدد بالأسفل بما يتناسب مع مدونتك

7- قم بتغيير www.chrohat.com برابط المدونة الخاصة بك

8- قم بتغيير الكود 86048000000000000395 مع رقم معرّف مدونتك. معرّف مدونتك تجده هنا:


4- كيفية عمل نموذج الاتصال نسخة بالعربية



<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>


هذا كل ما لدي أيها الناس. كان من السهل أليس كذلك؟ إصلاح بسيط لنموذج الاتصال لا يعمل في بلوجر. أيضًا ، سيعمل زر الإرسال أو الإرسال.


لقد اختبرت ذلك في مدونتي وهو يعمل بدقة. تمكنت من تلقي رسائل من نموذج الاتصال في Blogger.لا تنسى أن تترك رسالة شكر. اتمنى لك نهايه اسبوع جميله. 

2 تعليقات

  1. شكر لك
    ولكن يااخي عندما ارسل رسالة لا تصل من الصفحة ويظهر جارٍ الارسال فقط فما السبب؟؟

    شكرا لك اخي
    علی شروحاتك

    https://Tongue3.blogspot.com

    ولك جزيل الشكر

    ردحذف

إرسال تعليق

Comments