حل مشكلة عدم عمل اكواد صفحة إتصل بنا بقالب سيو بلاس وسكويز ونازا وليفون وطريقة إظافتها لبقية القوالب
السلام عليكم ورحمة الله تعالى وبركاته
أهلا و مرحبا بكم متابعي مدونة سوفت بيديا
مالا يعلمه الكثيرون أنك لو جربت كل الأكواد تقريبا المقترحة لإنشاء صفحة إتصل بنا Contact Us بقالب سيو بلاس او غيره ونشرها ثم محاولة إرسال رسالة ستلاحظ ظهور عبارة "جاري الإرسال" ولن يتم إرسال رسالتك ابدا (الا في حالات نادرة ينجح الارسال ثم يتوقف)..
والسبب في كون أكواد صفحة اتصل بنا لاتعمل ووجود مشكلة في صفحة اتصل بنا Contact Us لقالب سيو بلاس وقالب سكويز وقالب نازا وقالب ليفون هو وجود الصفحة مضمنة سابقا من طرف المبرمج أي أنه ليس عليك إظافة صفحة إتصل بنا بقالبك سيو بلاس اصلا لأنها متوفرة أصلا بالقالب ،وما عليك إلا إستدعاء صفحة إتصل بنا بكود بسيط جدا ستجده بالأسفل سواءا كنت تستخدم قالب سيو بلاس او قالب ليفون او قالب نازا او قالب سكويز ، وبعد أن تقوم باستدعاء صفحة اتصل بنا فإنها ستعمل معك جيدا وبكل سهولة..
ولا يخفى علينا مدى أهمية صفحة إتصل بنا Contact Us في أي موقع إلكتروني او مدونة الكترونية ،فهي السبيل الوحيد ليتمكن العميل من التواصل معنا من خلالها لطرح انشغالاته استفسار الابلاغ عن اسائة بيع خدمة الخ وخاصة بالمواقع التجارية فهي الركيزة الاساسية وبدون صفحة اتصل بنا يستحيل ان يعمل الموقع اصلا.
كيفية اظافة صفحة اتصل بنا لقالب سيو بلاس نازا سكويز وليفون وحل مشكلتها جذريا وكذلك اظافتها لبقية القوالب
لإظافة صفحة اتصل بنا بقالبك ببلوجر اذا كنت تستخدم أي قالب بما فيها وقوالبنا السابق ذكرها (سيو بلاس، نازا، سكويز، ليفون) عليك إتباع الخطوات التالية:
- اولا لابد من إظافة نموذج اتصل بنا Contact Us الخاص ببلوجر في اي مكان تريده المهم ان تكون مظافة فعليا ويمكنك اخفاء الاداة (وذلك بالتعليم على عدم اظهار الأداة) فهذا أمر مهم جدا لتعمل اداة اتصل بنا فيما بعد، يغفل عنه الكثير من المدونين على بلوجر ، فعدم إظافة اداة اتصل بنا الخاصة ببلوجر لن تعمل معك صفحة اتصل بنا مهما كان نوع القالب الذي تستعمله ،تابع الشرح المصور بالاسفل لكيفية إظافة أداة إتصل بنا اضغط على الصور للتكبير:
اولا نضغط على اظافة ادات ثم نختار بالاسفل "استمارة التواصل"
.PNG "حل مشكلة صفحة إتصل بنا قالب بلوجر سيو بلاس سكويز ليفون نارا")
ثم نختار اخفاء استمارة التواصل ونضغط على حفظ
.PNG "حل مشكلة صفحة إتصل بنا قالب بلوجر سيو بلاس سكويز ليفون نارا")
.PNG)
- بعد ذلك نتوجه للصفحات ببلوجر وننقر عليها.
- بعد ذلك نقوم بإنشاء صفحة جديدة.
- نقوم بوضع عنوان للصفحة والافضل ان نكتبها هكذا contact us
- نقوم بنشر الصفحة كي نحصل على رابط جيد لها.
- نفتح صفحة contact us مجددا.
- نغير إسم الصفحة للعربية ب: إتصل بنا (مثلا).
- نتوجه للزر بأعلى اليمين ونختار وضع HTML للتحرير.
- نمسح كل الأكواد الموجودة.
- والآن الخطوة الثانية وهي إلصاق أكواد صفحة إتصل بنا حسب القالب المستخدم:
1- إذا كنت تستخدم قالب سيو بلاس قم بنسخ الكود بالاسفل الخاص بجلب صفحة إتصل بنا ولصقه ثم إضغط على حفظ
<div id='Pagecontactus'></div>
2- إذا كنت تستخدم قالب سكويز قم بنسخ الكود بالاسفل الخاص بجلب صفحة إتصل بنا ولصقه ثم إضغط على حفظ
<div class="post-contact-form"></div>
3- إذا كنت تستخدم قالب نازا قم بنسخ الكود بالاسفل الخاص بجلب صفحة إتصل بنا ولصقه ثم إضغط على حفظ
<div class="post-contact-form"></div>
4- إذا كنت تستخدم قالب ليفون قم بنسخ الكود بالاسفل الخاص بجلب صفحة إتصل بنا ولصقه ثم إضغط على حفظ
<div class="contact"></div>
5- إذا كنت تستخدم أي قالب آخر (عموم القوالب الافتراضية والعادية تعمل بهذا الكود) قم بنسخ الأكود بالاسفل واستبدل العبارة باللون الاحمر "ضع هنا id بلوجر الخاص بك" بمعرف مدونتك (اذا كنت لاتعرفه فهو الذي تجده بالاعلى في المتصفح انظر الصورة بالاسفل) ، ثم وبعد وضع معرف مدونتك بالكود قم بلصق الكود بصفحة اتصل بنا ثم إضغط على حفظ..
صورة توضح مكان ID "id" اي دي مدونة بلوجر (اضغط للتكبير)
.PNG "صورة توضح مكان ID \"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>
- ثم بعدها قم بفتح صفحة اتصل بنا contact us التي أنشأتها لمعاينتها.
- يمكنك بعدها نسخ رابط صفحة اتصل بنا contact us الخاص بك وإظافتها في أي مكان مناسب لك ليتمكن الزوار من التواصل معك من خلالها.
كيفية اظافة صفحة اتصل بنا باللغة الإنجليزية أو أي لغة تريدها لقالب سيو بلاس مع التخصيصات وإظافة لأكثر من واجهة لصفحة إتصل بنا بنفس الصفحة
لإظافة صفحة اتصل بنا بقالبك ببلوجر باللغة الإنجليزية قمنا باستعمال سكريبت خاص يقوم بفتح id لصفحة إتصل بنا غير ظاهر باستخدام قالب سيو بلاس 7 ثم بعدها نقوم بإنشاء كلمات وتعريفات جديدة تظهر بالواجهة ، ستجدها باللغة الإنجليزية بالكود بالأسفل، يمكنك تغييرها بأي لغة تريد وستعمل جيدا مثل النسخة العربية تماما، أيضا ستجد بالكود مجموعة تخصيصات للcss تمكنك من تغيير شكل صفحة إتصل بنا كما تريد، ويمكنك الcss أيضا من تغيير صفحة إتصل بنا العربية إذا قررت إظافتها بهذا الكود ولاتنسى تغيير (direction: ltr;) ليناسب اللغة العربية إلى (direction: rtl;) وتغيير العبارات الأربعة باللون الأحمر وهي التي ستظهر بالواجهة والكود هو:
<div id="displayfff"></div>
<style>
.form {
background-color: #f5f5f5;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
direction: ltr; }
.contact-form-name,
.contact-form-email,
.contact-form-email-message {
width: calc(100% - 22px);
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: left; }
.contact-form-button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer; }
.contact-form-button:hover {
background-color: #0056b3; }
.contact-form-error-message,
.contact-form-success-message {
margin-top: 10px;
font-size: 14px; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var pageContactUsContent = document.getElementById("ContactForm200").innerHTML;
var englishContent = pageContactUsContent
.replaceAll("الاسم", "Name")
.replaceAll("بريد إلكتروني", "Email")
.replaceAll("رسالة", "Message")
.replaceAll("إرسال", "Send")
document.getElementById('displayfff').innerHTML = englishContent;
});
</script>
إذا كنت تريد تخصيص وتعديل لغة صفحة إتصل بنا لأي قالب آخر يمكنك إستخدام نفس الكود السابق ووضعة بصفحة جديدة مع تغيير العبارة باللون الأحمر بعد البحث بقالبك عنها وسيعمل معك الكود بصفة جيدة (طبعا اذا كانت الكلاسات بنفس أسماء الكلاسات المستعملة بالكود بالأعلى كما يمكنك تغييرها) ، إذا لم يظهر الفورم أو لايعمل قم بالبحث مجددا عن إسم الفورم الصحيح الذي يبدأ بالإيدي مثلا: id=ContactForm.... ثم قم بتغييره هنا:
document.addEventListener("DOMContentLoaded", function() {
var pageContactUsContent = document.getElementById("ContactForm200").innerHTML;
بالنهاية كان هذا شرحنا لكيفية إظافة كود صفحة اتصل بنا لمختلف القوالب وحل مشكلة صفحة اتصل بنا لقالب سيو بلاس وقالب سكويز وقالب نازا وقالب ليفون .. ، الكود مجاني ويعمل بسهولة وستصلك رسالة ببريدك الالكتروني بمجرد ان يتم ارسالها باستخدام نموذج اتصل بنا الذي اظفته للتو.
.png "English"){kind=small}
