Post Top Ad

Your Ad Spot

الأحد، 5 مايو 2013

صناعة نموذج اتصل بنا Contact Us بواسطة جوجل درايف Google Drive


السلام عليكم ورحمة الله وبركاتة درسنا اليوم مهم لكل مدون ولا غنى عنه لأن من خلال هذا الدرس البسيط سنتعلم سويا كيفية صناعة نموذج اتصل بنا او الأتصال بنا او المرسالة كما تحب تسميتة فهذا النموذج البسيط سيتم صناعتة من خلال شركة جوجل الرائعة وبالاخص من خدمة جوجل درايف Google Drive الخدمة الممتازة اعتقد ومن الافضل بأن يكون محتوى خدمات موقعك من جوجل Google نفسة يكون افضل بدل ما يكون خدمات مدونتك متفرقة من موقع الى اخر ماذا اقصد بذلك ؟ اقصد بأن مدونة بلوجرمن شركة جوجل وعمل خرائط للمدونة من شركة جوجل خدمات الــRSS من شركة جوجل ورفع ملفات الجافا سكربت من شركة جوجل والمزيد فأعتقد بأن خدمات المدونة تكون افضل من موقع واحد لأن لمن يستخدم بلوجر فأكيد يمر على حسابة بجوجل ارجو بأن مفهوم ما اقصدة وضح للجميع فمعنى ان نقوم بوضع نموذج الأتصال بنا من خدمة Google Drive فأكيد سنشاهد الرسائل المرسلة من قبل الزائرين فمن الصعب ان نصنع نوذج اتصل بنا من موقع اخر ونقوم بزيارتة كل مرة لكى نشاهد الرسائل المرسلة ومن الممكن ان نتجاهل او يحدث عملية نسيان وبالتالى لا نعرف بأن يكون فى رسائل ام لا فمن خلال Google Drive سنشاهد الرسائل المرسلة بأسرع وقت من خلال حسابنا جوجل اعتقد بأن هذه الخدمة ستكون ممتازة لكل صاحب مدونة وبالاخص لمن يمتلكون مدونات بلوجر .

شرح صناعة النموذج :

اضغط على رابط الموقع مباشرة https://drive.google.com
 بعد تسجيل الدخول اضغط على CREATE هيفتح معك قائمة منسدلة اختار FROM



بعد الضغط على from ستنقلك الى صفحة اخرى تابع معى 
  1. ضع اسم النموذج على سبيل المثال (( الأتصال بنا ))
  2. اختار شكل الأستايل الذى يعجبك 
  3. اضغط على زر Ok

بعد الضغط على زر Ok ستنقلك الى صفحة صناعة النموذج تابعو معى :
  1. اضافة عنوان النموذج كما ذكرنا الاتصال بنا 
  2. اكتب بداخل هذا الصندوق اى شيى تريدة على سبيل المثال(( للاستفسار والتواصل ضع بيانتك بشكل صحيح )) صورة موضحة لذلك :


الأن ماذا نفعل ؟
  1. قم بحذف هذا المحتوى لكى ننشاء جدول جديد كما واضح بالصورة التالية
  2. اضغط على زر Add item لأضافة جدول جديد

بعد حذف الجدول والضغط على زر Add item ستفتح لك قائمة منسدلة قم بالضغط على خيار Text


بعد الضغط على خيار Text سيظهر لك جدول جديد فهذا الجدول عبارة عن اضافة خانة الأسم الذى سيظهر بالنموذج كما تلاحظون بالصورة التالية شكل الجدول :
  1. اضافة كلمة الاسم او اضف اسمك او Name ارجو بأن تكون المعلومة وضحت للجميع
  2. اضافة وصف على سبيل المثال ضع كلمة (( اضف اسمك الثلاثى ))


كما تلاحظون بالصرة التالية شكل اضافة خانة الاسم :
  1. تم وضع كلمة name الذى تدل على اضافة اسم المرسل 
  2. تم وضع وصف لخانة الاسم كأضف اسمك الثلاثى 
  3. ضع علامة على Required question 


تم الأنتهاء من وضع خانة الأسم ماذا نفعل الأن ؟
الأن سنضع خانة البريد الاليكترونى لصل بريد المرسل 
كما ذكرنا عندما نقوم بأضافة خانة جديدة نضغط على زر Add item لتفتح لنا قائمة منسدلة ومنها نختار خيار Text

 
الأن ستظهر لك شكل جدول جديد وكما فعلنا بالسابق 
  1. ضع اسم خانة البريد الأليكترونى على سبيل المثال بريدك الاليكترونى او  Email Address
  2. ضع وصف لخانة البريد الاليكترونى على سبيل المثال (( ضع بريد اليكترونى صحيح ))
  3. ضع علامة على Required question للتثبيت كما واضح بالصورة التالية :

الأن انتهينا من وضع الاسم والبريد الاليكترونى اذا كنت تريد وضع خانات جديدة اضغط على زرAdd item واختار Text لاضافة جدول جديد .
الأن نأتى الى طريقة اضافة صندوق محتوى الرسالة كيف ذلك ؟
قم بالضغط على زر Add item ستفتح لك قائمة منسدلة قم بالضغط على خيار Paragraph Text

الأن سيظهر جدول الأضافة كما تلاحظون بالصورة التالية :
  1. اضف عنوان خانة الرسالة على سبيل المثال (( الرسالة )) (( الاستفسار )) (( Message ))
  2. اضف وصف الخانة على سبيل المثال (( اضف محتوى واضح )) (( اضف محتوى مفهوم ))
  3. ضع علامى على خيار Required question للتثبيت كما واضح بالصورة التالية :

الان انتهينا من صنع النموذج بكل بساطة وباسرع وقت ومع اماكنية التحكم الكامل ماذا نفعل الأن ؟
كلنا نعلم جميعا بأن عندما نذهب الى نموذج الاتصال بنا ونبعت رسالة لموقع ما وبعد الضغط على زر ارسال تظهر لنا رسالة تفيد بأن الطلب ارسل بنجاح اعتقد بأنكم تريدون ذلك تعالو نتعرف سويا على كيفية صنع هذه الخاصية ؟
كيفية وضع رسالة تنبية للمرسل بنجاح ارسال الرسالة او الطلب :
من الاسفل وبأخر الصفحة ستجد عنوان بأسم Confirmation message ويوجد صندوق وبداخلة هذه المحتوى Your response has been recorded كما تلاحظون بالصورة التالية للتوضيح اكثر :

ماذا نفعل الأن ؟
الأن سنحذف المحتوى بداخل هذا الصندوق واكتب اى شيى تريدة الذى يظهر للراسل عند تقديم الطلب على سبيل المثال اكتب (( تم ارسال طلبك بنجاح )) (( تم تقديم طلبك )) بالأخير اضغط على زر Send Form كما ظاهر لنا بالصورة التالية :


بعد الضغط على زر Send Form ستفتح لك نافذه جديدة قم بالضغط على صندوق Send Form Via email ليفتح لك محتوى ضع بريدك الأليكترونى ومن بعدها اضغط على زر Send كما واضح بالصورة التالية :



بعد الضغط على زر Send سيظهر لك نافذه فهذه النافذه مهمة جدا لأن من خلال هذه النافذه سيتم صناعة جدول طلبات الرسال المرسلة فمن خلال هذا الجدول ستجد الرسائل بشكل بسيط وخفيف على حسابك  Google Drive الأن قم بالضغط على زر Create كما واضح لنا بالصورة التالية :


الأن انتهينا من صناعة نموذج الأتصال بنا + صناعة جدول به استقبال الرسائل
======================
ماذا نفعل الأن ؟ 
علينا بتجربة النموذج اولا قبل تقديمة للمدونة لكى نشاهد الأخطاء لكى يتم تصليحة فلكى تقوم بعمل معاينة وتجربة اضغط على زر View live form المتواجد بأعلى الصفحة كما واضح لنا بالصورة التالية :

كما تلاحظون بالصورة التالية الشكل النهائى مع التجربة :

الأن سأقوم بتجربة النموذج لكى اشاهد النتيجة تابع معى :

كما تلاحظون من خلال الصورة السابقة لقد قمت بوضع طلب للتجربة لكى اشاهد النتيجة كما تلاحظون وضعت اسمى مع بريدى الاليكترونى مع وضع عنوان الطلب + محتوى الرسالة كما تشاهدون ومن بعد ارسال الطلب تم لى ظهور هذه الرسالة كما تلاحظون بالصورة التالية : تفيد بنجاح ارسال الطلب 
اعتقد بأن النموذج الأن يعمل بشكل سليم ولكن كيف اصل الى جدول الرسائل لكى اشاهد الرسائل ؟
من خلال  Google Drive ستجد عنوان بأسم النموذج الى صنعتة وايضا تجد عنوان الجدول الذى ستجد بداخلة الرسائل كما واضح بالصورة التالية :


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


 الأن انتهينا من التجارب من معاينة النموذج ومعاينة جدول استقبال الرسائل 
الأن نأـى الى تركيب النموذج بالمدونة :

من خلال الضغط على زر File المتواجد بأعلى النموذج سيفتح لك نافذه جديدة قم بالضغط على خيار Embad 


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



انتهى الدرس وارجو بأن هذه التدوينة اعجبتكم واعذورنى على اطالة الشرح والدقة ولكن من الواجب على ان اشرح الطريقة لمن يواجهة بعض الصعوبة وبالأخص المبتدائين (( لا خير فى كاتم العلم ))

هناك 3 تعليقات:

  1. اخي الكريم على الشرح ينتبق على المواقع
    ولا فقط البلوجر

    لان عندي موقع وحابب اوفر الخدمه هذه
    هذا موقعي اذا ممكن تساعدني
    www.leech24.net

    ردحذف
  2. شكراا أخي شرح رائع وواضح جدا

    ردحذف
  3. موضوع جميل جدا ، بارك الله فيك

    ردحذف

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

Post Top Ad