اضافة نموذج اتصال للصفحات الثابتة

اضافة نموذج اتصال للصفحات الثابتة

يوجد الآن مشاهدة التعليقات : 45

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

وهذه الإضافة من نموذج الإتصال هي التصميم الإفتراضي ومن يود أشكال عصرية فليتابع تدوينة اضافة خاصية اتصل بنا منزلقة أو إضافة نموذج الإتصال منبثقة 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. اضغط على نشر  وقم بعرض الصفحة لترى النتيجة
اذا واجهتك مشكلة فراسلنا عبر صندوق التعليقات بالاسفل
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 45 تعليقًا:

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

    ردحذف
  2. مشكور يا ملك علي الموضوع

    ردحذف
  3. غير معرف3/21/2016

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

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

      حذف
    2. غير معرف3/22/2016

      لم افهم شيء

      حذف
  4. اين استقبل الرسائل ؟؟؟؟؟؟

    ردحذف
    الردود
    1. علي بريدك الالكترونى على " Gmail "

      حذف
  5. غير معرف3/21/2016

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

    ردحذف
    الردود
    1. @علاء إبراهيم ، شكرا لتعليقك

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

    ردحذف
    الردود
    1. عليكم السلام
      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="" />

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

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

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

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

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

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

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

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

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

      al7otwebinfo@gmail.com

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

    ردحذف
  13. أنا في انتظارك أخي الكريم

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

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

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

    ردحذف
  16. بارك الله فيك

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

    ردحذف
  18. عندما اضغط على زر الارسال لا يعمل

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

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

    ردحذف
  21. oui moi aussi j'ai le même problème

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

    ردحذف
  23. أخي عندما أضغط على ارسال لا يضغط

    ردحذف
  24. اضافه جميله جدااااااا استمير انت مبدع

    ردحذف
  25. غير معرف6/13/2016

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

    ردحذف
  26. غير معرف6/15/2016

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

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

    ردحذف
  28. اخي طبقت كل الخطوات وزر ارسال لايعمل

    ردحذف
  29. الو السلام عليكم خلاص عرفت كيف اجيب نموذج الاتصال بس ما ينكتب شي
    تبي تعرف المشكلة ادخل مدونتي وشوف http://qmafia0.blogspot.com/

    ردحذف
  30. شكرا جزيلا ~ تمت الأستفادة :)

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم