حصريا: نموذج الإتصال Contact Form للمواقع والمدونات.

بسم الله الرحمن الرحيم

إخوتي، زائري الكرام ،،،

قد تلقيت طلبات كثيرة عن كيفية تصميم نموذج الإتصال ' إتصل بي ' والتي في معضمها إما تجارية أو لا تدعم العربية إن وجدت مجانا ،وكنت قد وجهت الإخوة الى موقع Email-forms.com الذي به شرح مفصل باللغة الانجليزية لكيفية تصميم وإعداد نموذج الإتصال بطريقة بسيطة مستخدمين خدمة موقع MyContactForm.com الذي يوفر نماذج يمكنك إعدادها والتحكم فيها مع مزايا أخرى لمن لهم اشتراك في خدمتهم،إلا أنه يتعذر للبعض التعديل وفقا للتنسيق المناسب للمدونة العربية . وعدت الإخوة بإعداد شرح لنموذج الإتصال واليوم أوفيت بوعدي والحمد لله...

سنستعمل نموذج إتصال آخر موفر من Kontactr ولقد إخترته لأنه:

* واضح و بسيط والجميل والمميز أنه مجاني وجاهز فور تسجيلك.
* آمن ، فنموذج الإختبار الـ CAPTCHA للتمييز بين الحاسب والإنسان (يحميك من الرسائل المزعجة SPAM،البوت،،،)
* موفر بشكل : - إضافة بتقنية AJAX.
                    - كود HTML حيث يمكننا التحكم في التصميم والتعديل عليه .

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

هنا مثال للنموذج الذي عدلت عليه

الخطوات :

1- ما عليكم الآن إلا التسجيل في الموقع هنا بعدها يطلب منك تفعيل حسابك برسالة على بريدك المسجل به.

2- عند الإنتهاء من التسجيل وتأكيد بياناتك المسجلة قم بالدخول على الموقع Kontactr توجه مباشرة الى الأسفل HTML Embed Widget.

3- أنقر بالمشيرة (الماوس) على الكود فيتم تظليل وإختياره كاملا ثم قم بنسخه (Copy).

4- قم بفتح أحد محررات النصوص كالـ Wordpad مثلا وقم بلصق الكود:
يمكنك التعديل عليه والقيام بترجمة الكلمات الإتجليزية الى العربية،،،

5-على مدونتك قم بإنشاء صفحة جديدة (إرسال | صفحات التحرير) واختر لها عنوانا مثلا : إتصل بي.

في صندوق تحرير المشاركات  تجد تبويبين: قم بالنقر على التبويب 'تحرير HTML' ثم انسخ كود نموذج الاتصال الخاص بك .الآن يمكنك معاينة النموذج ومن ثم نشر الرسالة .


* لمن أعجبه نموذج الإتصال الذي عدلت عليه (أيضا تفاديا للأخطاء الفنية) ما عليه إلا أن ينسخ الرقم الخاص لنموذجه في الكود الذي حصل عليه من الموقع مكان النص الملون بالأحمر في الكود المرفق اسفله : value="الرقم الخاص بنموذجك" (تجده مع بداية الكود) ومن ثم أنسخه كما ذكرت في الخطوة 5.

<form method="post" action="http://kontactr.com/euser.php"><input name="id" value="رقم النموذج الخاص بك" type="hidden"><table style=";font-family:Tahoma,Tahoma;font-size:13px;" border="0" cellpadding="10px"><tbody><tr><td align="right"><span style="font-weight: bold;">اسمك الكريم :</span> </td><td><input name="sender_name" style="width: 250px;" type="text"></td></tr><tr><td align="right"><span style="font-weight: bold;">بريدك الإلكتروني :</span> </td><td><input name="sender_email" style="width: 250px;" type="text"></td></tr><tr><td align="right"><span style="font-weight: bold;">الموضوع :</span> </td><td><input name="subject" style="width: 250px;" type="text"></td></tr><tr><td align="right" valign="top"><span style="font-weight: bold;">الرسالة :</span> </td><td><textarea rows="10" cols="40" name="message" style="padding: 3px; font-size: 13px; font-family: Tahoma,Tahoma;"></textarea></td></tr><tr><td align="right" valign="middle"><span style="font-weight: bold;">تحقق من الصورة </span><span style="font-weight: bold;">:</span>

<div style="text-align: right;"><span style="font-weight: bold;">(</span><span style="color: rgb(255, 0, 0); font-weight: bold;">إنتبه لحالة الأحرف</span><span style="font-weight: bold;">)</span></div> </td><td><img src="http://kontactr.com/captcha.php" /> <input name="captcha_code" style="padding: 3px; margin-bottom: 10px; " type="text"></td></tr><tr><td colspan="2" align="center"><input name="send" id="send" value="أرسل" style=" width: 100px; letter-spacing: 0px;" type="submit"></td></tr></tbody></table></form>

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

لا تنسونا من صالح دعائكم وطيب كلامكم