معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   دروس بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=11)
-   -   درس عمل نموذج اتصال في مدونتك ؟ او طريقة اضافة نموذج( اتصل بي - الاتصال بنا -راسلني) (https://www.bloggerexp.com/showthread.php?t=2672)

الزعيم 07-03-2012 12:18 PM

درس عمل نموذج اتصال في مدونتك ؟ او طريقة اضافة نموذج( اتصل بي - الاتصال بنا -راسلني)
 
بسم الله الرحمن الرحيم


http://1.bp.blogspot.com/_azG3XwU5w8...mailmeform.png

الحمد لله والصلاة والسلام على رسول الله أما بعد،،،
اليوم إن شاء الله سوف أقدم لكم موقع يقدم نماذج Contact Form ( اتصل بي - الاتصال بنا - راسلني ) وهو موقع EmailMeForm الذي يوفر خدمة مدفوعة بمزايا إضافية وأخرى مجانية محدودة والتي سنتسفيد منها بإذن الله .
النموذج المقدم من طرف هذا الموقع مثل سابقه (مؤمن عن طريق خاصية التحقق الكابتشا) فقط يحتاج إلى إعدادك له وايضا يتميز بإمكانية وصل صفحة خاصة بك عند نجاح الارسال التي نفتقدها في نموذج Kontactr وهي نقطة إضافية له إضافة الى بعض المزايا التي تكتشفها اثناء إنشائك للنموذج.


إليكم الشرح :

أولا: عليك التسجيل في الموقع من هنا ومن ثم تفعيل حسابك عن طريق رسالة تفعيلية مرسلة من طرف الموقع .

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

http://2.bp.blogspot.com/_azG3XwU5w8.../stepform1.png
ب- ننتقل إلى صفحة إدخال معطيات نموذج الإتصال .

علامة * تدل على أن الحقل هام ويجب تعبئته .
قم بإنشاء Thank you page أو صفحة الاستلام أو الشكر على مدونتك كموضوع وانسخ رابط هذه الصفحة في الحقل المخصص له كما هو موضح في الصورة -2- .
يمكنك إضافة أكثر من بريد لاستقبال الرسائل (10 كحد أقصى) مفصولين بفاصلة.


http://4.bp.blogspot.com/_azG3XwU5w8.../stepform2.png ومن ثم أنقر على Next .

جـ- الآن علينا ضبط إعدادات الحقول التي أدخلنا عددها في مثالنا وهي 5 حقول.

required : إذا إخترت yes فالحقل سيكون مطلوبا لدى المرسل اليك و No غير مطلوبا.
Text Effects : لختيار نوع الخط :مائل/عريض.
لا تنس في الحقل الأخير (الرسالة) ضبطه كي يكون نوعه (Large Text) أو متعدد الأسطر.
الأسماء ،البريد الالكتروني ،العنواين اختر لها (Short Text أي سطر واحد ) في نوع الحقل.


http://3.bp.blogspot.com/_azG3XwU5w8.../stepform3.png عند الانتهاء من هذه الخطوة أنقر على Next ،تنتقل إلى صفحة يتم فيها ضبط مساحة الحقول في النموذج (أتركها كما هي فيمكن تعديلها في الأخير إن ظهر مشكل في التنسيق ) واصل وأنقر على Next.

د- نأتي إلى خطوة أهم فيها الجزء السفلي كما هو موضح في الصورة -4 -.

http://1.bp.blogspot.com/_azG3XwU5w8.../stepform4.pngغير ما يجب تغييره واترك الباقي كما هو عليه ثم انتقل الى الخطوة الموالية Next.

هـ- قم بالتغيير إن وجد ليوافق الضبط الذي قمت به كما هو موضح في الصورة ثم انتقل إلى الخطوة الموالية Next.

http://1.bp.blogspot.com/_azG3XwU5w8.../stepform5.png
و- هذه الخطوة تعاين فيها نموذج الإتصال الذي قمت بإنشائه وتذكر أنه يككن الرجوع الى الخطوات السابقة (Back) في حال وددت تغيير اي إعداد رأيت أنه لا يلائم .http://2.bp.blogspot.com/_azG3XwU5w8.../stepform6.png
أنقر فوق إنهاء Finish .

ي- الآن تم الاإنتهاء من إعداد نموذجك.
الموقع يزودك برابط لصفحة الاتصال بك (أنظر الصورة).والأهم أنه يزودنا بكود HTML نموذجنا والذي نحتاجه لإنشاء صفحة الاتصال على مدونتنا.
أنقرعلى Click here أو get the HTML code للحصول على كود النموذج ثم انسخه (copy/copier).


http://4.bp.blogspot.com/_azG3XwU5w8.../stepform7.png
ثانيا : نأتي لأهم جزء وهو إنشاء صفحة الاتصال .
أ- من لوحة التحكم الرئيسية لحسابك على بلوجر أنقر على التبويب : إرسال ،تفتح معك صفحة لإنشاء موضوع (صفحة الإتصال) .

* إن كانت إعدادات مدونتك اللغوية قد ضبطت وفق اللغة العربية فلا مشكل إن شاء الله.

ب- في صفحة الإرسال تجد صندوقا به تبويبين : التأليف وتحرير HTML .
أنقر فوق التبويب تحرير HTML تجد في الصندوق سطرين :

كود:

<div dir="rtl" style="text-align: right;">

</div>

ثم قم بلصق الكود قبل :

كود:

</div>
جـ- قم بالمعاينة لأخذ نظرة وتقييم للنموذج و بإمكانك الآن إجراء بعض التغييرات على :
النص الإنجليزي وترجمته إلى العربية ،نوع الخط وهذا بالبحث عن verdana وتغييره إلى Tahoma.

وكي نختم ، من خيارات الرسائل على صندوق إنشاء المواضيع قم بمنع تعليقات القراء و الوصلات الخلفية والآن يمكنك نشر الرسالة.

هنا تطبيق ومثال على النموذج الذي طبقناه .

انتهى والحمد الله .

لا تنسوا تعليقاتكم ودعائكم لنا بالخير ،،،،

admin 07-03-2012 05:18 PM

رد: درس عمل نموذج اتصال في مدونتك ؟ او طريقة اضافة نموذج( اتصل بي - الاتصال بنا -راسل
 
مشكور على الشرح وأظن أن هذا النموذج "EmailMeForm" هو أفضل النماذج المجانية والمتاحة حاليا

الزعيم 07-04-2012 01:38 AM

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

orix 07-08-2012 11:29 PM

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


الساعة الآن 03:26 PM

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012