21‏/03‏/2016

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

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




2. من داخل القالب ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه
#ContactForm1 {display:none;}
اضغط على حفظ النموذج
3. انتقل الى قسم الصفحات واضغط على صفحة جديدة ضع في العنوان Contact (يمكنك تغييره للعربية بعد أن تنشر الصفحة)
4. انتقل من وضع تأليف الى HTML وضع الكود التالى
<form name="contact-form">
الاسم الكريم 
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

البريد الإلكتروني <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

الرسالة <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  
<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>
<style scoped="" type="text/css">
#comments {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;width: 100%;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px 0;background:#fafafa;color:#444;border:1px solid #ccc;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#0099CC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#2A2B2B;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
5. تقوم بعمل الاعدادات مثل الصورة التوضيحية التالية



6. اضغط على نشر  وقم بعرض الصفحة لترى النتيجة
اذا واجهتك مشكلة فراسلنا عبر صندوق التعليقات بالاسفل
اضافة نموذج اتصال للصفحات الثابتة - مع اضافة هذه الاداة الى الصفحات الثابتة تمكن الزوار من طرح الاسئلة والمشاكل وتقديم الاقتراحات للمدونة الخاصة بك ، وبتأكيد نعلم جميعا ما وظيفة هذه الاداة لذلك يكفي تفسيراً ، ايضاً اذا قمت بوضع هذه الاداة فى الشريط الجانبى " السايدبار " ، سوف تبطئ من تحميل المدونة الخاصة بك ، لذا يجب عليك وضع نموذج الاتصال المقصود فى صفحة من الصفحات الثابتة

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




2. من داخل القالب ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه
#ContactForm1 {display:none;}
اضغط على حفظ النموذج
3. انتقل الى قسم الصفحات واضغط على صفحة جديدة ضع في العنوان Contact (يمكنك تغييره للعربية بعد أن تنشر الصفحة)
4. انتقل من وضع تأليف الى HTML وضع الكود التالى
<form name="contact-form">
الاسم الكريم 
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

البريد الإلكتروني <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

الرسالة <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  
<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>
<style scoped="" type="text/css">
#comments {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;width: 100%;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px 0;background:#fafafa;color:#444;border:1px solid #ccc;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#0099CC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#2A2B2B;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
5. تقوم بعمل الاعدادات مثل الصورة التوضيحية التالية



6. اضغط على نشر  وقم بعرض الصفحة لترى النتيجة
اذا واجهتك مشكلة فراسلنا عبر صندوق التعليقات بالاسفل
42 Blogger تعليقات
Disqus
42 التعليقات
المشرف
avatar

اضافة مهمة وجميلة جدا , استمر بأبداع

المشرف
avatar

@عمر ون شكرا لك

المشرف
avatar

مشكور يا ملك علي الموضوع

المشرف
avatar

اخي حسام ، بخصوص قالب صحافة 2 . رابط الموضوع : http://goo.gl/B4Uj4u .
اضفت اليه تعليقات ديسكس و نجحت العملية .
لكن المشكلة ان التعليقات تظهر في التبويب الخاص بتعليقات فيسبوك .
كما ترى في الصورة :
http://www.m5zn.com/newuploads/2016/03/21/png//5ba0a667fa866d6.png

المشرف
avatar

اين استقبل الرسائل ؟؟؟؟؟؟

المشرف
avatar

علي بريدك الالكترونى على " Gmail "

المشرف
avatar

شكرا لتعليقك

المشرف
avatar

مشكوووووور ياغالى

المشرف
avatar

هل اضفت التعليقات من شرحنا؟ لأن القالب فعلا يحتوي على تعليقات ديسكس ويمكنك أن تخفي تعليقات بلوجر وفيسبوك لذا ان كنت اضفت التعليقات فاحذفها ثم اتجه الى التخطيط وحرر اداة رسائل المدونة الإلكترونية ثم ضع في خانة التعليقات Disqus للمزيد من الشرح افتح ملف index المرفق مع القالب
* وارجو منك في المرة المقبلة أن تضع التعليق في مكانه المناسب (تدوينة القالب) وشكرا

المشرف
avatar

@علاء إبراهيم ، شكرا لتعليقك

المشرف
avatar

السلام علبكم ورحمة الله وبركاتة
س 1/ عندي مشكلة في نموذج الاتصال في بلوجر لايستقبل الرسائل على الايميل
س 2/ هل استطيع اظافة خانات اخرى للنموذج
مثال رقم الجوال او الموقع ....
والف شكر على المواضيع الرائعة

المشرف
avatar
المشرف
avatar

عليكم السلام
1. بخصوص عدم استقبال الرسائل على Gmail فالمشكلة انك لم تقوم باضافة نموذج اتصال فى الشريط الجانبى " السايدبار " او هناك مشكلة بالقالب الذي تستخدمه

2. تسطيع اضافة الجوال والموقع باضافة الكود التالي اسفل الاسم او البريد الالكترونى

الجوال <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span>
<input id="ContactForm1_contact-form-mob" name="email" size="30" type="text" value="" />

الموقع <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span>
<input id="ContactForm1_contact-form-blog" name="email" size="30" type="text" value="" />

المشرف
avatar

اسف بس عندى سوأل خارج التدوينة ودخلت ركن الاسئلة لقيت مكتوب انه مغلق هواطلبات اعلانات جوجل ادسنسن بيقبلوها فى مدة قد ايه 6 شهور ولا اقل

المشرف
avatar

تفضل بالدخول الى صفحة اتصل بنا ، واعرض سؤالك

http://www.ar1web.com/p/contact-us.html

المشرف
avatar

ممكن كود رسالة "عذرا فصاحب المدونة غير متواجد هذه الفترة"

المشرف
avatar

السّلام عليكم
اضفت نموذج الاتصال المقترح من بلوغر دون ادراجه ضمن صفحة ثابتة و بالفعل العملية بسيطة و لكن المشكل انّي لا استقبل الرّسائل على الايميل الذي سجّلت به فارجو ان ترشدني الى حل
و شكرا

المشرف
avatar

عليك بتغيير قالبك ، لتواجد كود css فى القالب الاصلى ، عليك بحذفه من داخل القالب او تغيير القالب

المشرف
avatar

السلام عليكم اخي عملت مثل الخطوات ويظهر لي تم ارسال الرسالة ولكن عندما اذهب لجيميل لا اجد اي رسالة وانت ذكرت في التعليق السابق ان السبب هو كود في css هو السبب فممكن تشرح كيف نيل هذا الكود ارجوك

المشرف
avatar

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

المشرف
avatar

ضعنى مشرف فى المدونة التى تريد وضع النموذج بها

al7otwebinfo@gmail.com

المشرف
avatar

أوّلا بارك الله فيك
ثانيا لقد قمت بدعوتك و أنتظر فقط موافقتك

المشرف
avatar

أنا في انتظارك أخي الكريم

المشرف
avatar

تم قبول الدعوة ، ضعنى مشرف

المشرف
avatar

السّلام عليكم هل تنجز لي مدوّنة من الالف الى الباء يعني فيها ارشفة و مهياة لجميع محركات البحث و فيها rss و مرتبطة بصفحة الفايسبوك و تويتر و يوتوب مقروءة من الجوّال يعني مكتملة و مقبولة من ادسنس و لا تتطلب الا وضع تدوينات
اذا كنت مستعدّ لذلك اتصل على imed.kr@gmail.com
أو الفايسبوك https://web.facebook.com/garoui.imed
اذا قبلت ذلك أخبرني عن الثّمن و طريقة الدّفع
أرجو أن لا تظهر التعليق و أجبني في كل الأحوال

المشرف
avatar

تعقيبا على الرّد السّابق أنت الآن مشرف في المدوّنة
و هي مليئة بالأخطاء هل تعيد صياغتها كما قلت لك سابقا
مقابل ثمن معقول

المشرف
avatar

بارك الله فيك

المشرف
avatar

بعد اذنك انا عملت كل حاجه وتابعت الخطواط خطوه بخطوه وفي الاخر مش عارف بتظهر فين ولا اجيبها منين

المشرف
avatar

عندما اضغط على زر الارسال لا يعمل

المشرف
avatar

شكراً لك أخي ((((متابع قديم منذ شهر 3 2015))))

المشرف
avatar

لقد حدث خطا
عندما ذهبت لرؤية نموذج الاتصال فى المدونة لا يمكن الضغط على البريد الالكترونى او الرسالة

المشرف
avatar

oui moi aussi j'ai le même problème

المشرف
avatar

السلام عليكم
هناك سؤال خاص بلون النص الخاص بالحقول المطلوبة في الصفحة
لونها هو نفس الخلفية
كيف يمكنني تغير لون النص ؟

المشرف
avatar

أخي عندما أضغط على ارسال لا يضغط

المشرف
avatar

اضافه جميله جدااااااا استمير انت مبدع

المشرف
avatar

أخي عندما أضغط على ارسال لا يضغط وعندما اضغط على كتابة الاسم او الايميل او الرسالة لا يظهر عمود الكتابة و لا يكتب

المشرف
avatar

أخي الرسالة لا ترسل

المشرف
avatar
المشرف
avatar

السلام عليكم
أخي أريد أن أضع أتصل بنا بالمدونة من أعلي!!
فكيف!!؟

المشرف
avatar

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة