البحث في الموقع
المحتوى عن 'استمارة'.
تم العثور على 4 نتائج
-
يوفر Laravel 5 ميزة جديدة تسمى استعلامات الاستمارة Form Requests تساعد في معالجة بيانات الاستمارة والتحقق من صحتها. ستتعلم في هذا الدرس كيفية إنشاء استمارة اتصال في Laravel 5 باستخدام الميزة المذكورة وإمكانيات Laravel في إرسال البريد الإلكتروني. سنعرض طوال الدرس لميزات وحيل تقنية تتعلق بالتطوير على Laravel. تتكون استمارة الاتصال من ثلاثة حقول هي اسم المستخدم، وعنوان بريده الإلكتروني والرسالة التي يود إرسالها. ملحوظة: يفترض الدرس أن Laravel مثبت وجاهز للعمل. نبدأ بإنشاء مشروع Laravel جديد (أسميته academy) ثم الدخول إلى المجلد: laravel new academy cd academyيمكننا إنشاء متحكِّم Controller خاص بمعالجة استمارة الاتصال وعرضها إلا أننا سندمج هذه الوظيفة - للتسهيل - في المتحكِّم الذي يتولى الأمور الإدارية المتعلقة بالتطبيق. سننشئ لهذا الغرض متحكما باسم AboutController ونستخدم إجراءيْ create وstore لعرض استمارة الاتصال والتعامل معها (يقدم create الاستمارة عبر GET فيما يقدمها store عبر POST). سيستخدم AboutController إجراءات create ،index وstore فقط فسنكتفي بإنشاء متحكِّم بسيط عن طريق أمر artisan make:controller على النحو التالي: $ php artisan make:controller --plain AboutController Controller created successfullyنضيف كُنْيتيْن Aliases ضمن ملف app/Http/routes.php لتمكين الوصول إلى الاستمارة عبر المسار contact/: Route::get('contact', ['as' => 'contact', 'uses' => 'AboutController@create']); Route::post('contact', ['as' => 'contact_store', 'uses' => 'AboutController@store']);ينشئ أمر artisan make:controller السابق متحكما خاويا، نتيجة استخدام خيار plain-- مع artisan. أي أنه يتوجب علينا إضافة دالتَيْ create وstore في متحكم AboutController. عدل على المتحكِّم ليبدو على النحو التالي: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; class AboutController extends Controller { public function create() { return view('about.contact'); } public function store() { } } ملحوظة: يوجد المتحكم ضمن المسار app/Http/Controllers الموجود ضمن مجلد المشروع. كل المسارات المذكورة في الدرس تُنسَب إلى مجلد المشروع. ضبطنا إجراء create ليقدم عرضا View باسم contact.blade.php يوجد ضمن المسار resources/views/about. العرض contact.blade.php غير موجود لحد الساعة. فلننشئه. إنشاء استمارة الاتصاليوفر Laravel ميزات عدة لتصْيِير Rendering استمارات HTML. سنستخدم نظام Blade للقَوْلَبة Templating، المضمن في Laravel، لإنشاء الاستمارة. أنشئ مجلدا باسم about في المسار resources/views/ ثم أنشئ داخله ملفا باسم contact.blade.php. وألصق المحتوى التالي: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> {!! Html::style('css/form.css') !!} <title>Academy Contact</title> </head> <body> <div id="page-wrap"> <h1>Academy contact</h1> <ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> <div id="contact-area"> {!! Form::open(array('route' => 'contact_store', 'class' => 'form')) !!} {!! Form::label('Your Name') !!} {!! Form::text('name', null, array('required', 'placeholder'=>'Your name')) !!} {!! Form::label('Your E-mail Address') !!} {!! Form::text('email', null,array('required', 'placeholder'=>'Your e-mail address')) !!} {!! Form::label('Message') !!} {!! Form::textarea('message', null, array('required', 'id'=>'Message', 'cols'=>'20', 'rows'=>'20','placeholder'=>'Your message')) !!} {!! Form::submit('Contact Us!', array('class'=>'submit-button')) !!} {!! Form::close() !!} </div> </div> </body> </html>سنعود لشرح هذه الشفرة بعد قليل. 1- تفعيل مكون HTMLفي الاستمارة أعلاه استخدمنا مُنشِئ الاستمارات Form builder الموجود في مكون HTML؛ هذا المكون غير مفعل افتراضيا في Laravel 5. لتفعيله نفذ الخطوات التالية. عدل على ملف composer.json الموجود في مجلد المشروع وأضف التعليمة التالية ضمن خانة require: "illuminate/html": "~5.0"تصبح خانة require على الهيئة التالية بعد إضافة السطر (انتبه للفاصلة , في نهاية السطر الذي يسبق التعليمة التي أضفناها): "type": "project", "require": { "php": ">=5.5.9", "laravel/framework": "5.1.*", "illuminate/html": "~5.0" },حدث اعتماديات Dependencies المشروع عبر الأمر: composer update بعد انتهاء التحديث عدل على ملف config/app.php وأضف السطر التالي ضمن مصفوفة Providers (انتبه للفواصل): 'Illuminate\Html\HtmlServiceProvider',في نفس الملف أضف السطرين التاليين لمصفوفة Aliases: 'Form' => 'Illuminate\Html\FormFacade', 'Html' => 'Illuminate\Html\HtmlFacade',2- شرح آلية تصيير الاستمارةنعود لشرح طريقة إنشاء الاستمارة الموجودة عبر نظام Blade. نبدأ بأول تعليمة: {!! Html::style('css/form.css') !!}نطلب من نظام القوالب تحميل ملف CSS لاستخدامه في الصفحة. سيحمَّل ملف CSS في المكان الذي استُدعِيت فيه دالة style التابعة لصنف Html الذي عرَّفناه في الخطوة السابقة ضمن مصفوفة Aliases، هو وصنف Form. انتبه لكتابة اسم الصنف بنفس طريقة تعريفه في المصفوفة (Html وليس HTML). ملف form.css يوجد ضمن مجلد فرعي (باسم css) من مجلد Public. توضع الملفات المتاحة للعموم (مثل CSS وJavaScript) داخل هذا المجلد. ننتقل للتعليمتين: {!! Form::open(array('route' => 'contact_store', 'class' => 'form')) !!} ... {!! Form::close() !!}تعمل الدالتان Form::open وForm::close() معا من أجل إنشاء وسوم Tags فتح وإغلاق الاستمارة على التوالي. تستقبل دالة Form::open مصفوفة تمثل معطيات إعداد مختلفة؛ مثل كنية route(الوِجهة) التي تشير إلى دالة store ضمن المتحكم AboutController، وclass التي تشير إلى صنف CSS المستخدَم لتنسيق الاستمارة. يُستخدَم إجراء POST افتراضيا إلا أنه يمكن إبداله بGET عبر تمريره في المعطى method على النحو التالي 'method' => 'post'. تضيف دالة Form::open حقلا مخفِيّا عبارة عن رمز _token للحماية من هجمات تزوير الطلب عبر الموقع Cross-site request forgery, CSRF. ثم يأتي الدور على التعليمات التالية: <ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul>تستخدم هذه التعليمات لإظهار رسائل تحقق إذا كانت مُدخَلات المستخدم غير مناسبة لطبيعة الحقول (سنعود لها لاحقا، لا تنسها). تظهر في ما بعد مجموعة من الدوال من أجل إنشاء حقول الاستمارة: Form::label لإنشاء لصائق Labels الحقول، Form::text لإنشاء حقول نصية، Form::textarea لإنشاء حقول نصية متعددة الأسطر، وForm::submit لإنشاء زر الإرسال. لاحظ أن دالتيْ Form::text وForm::text تحويان معطى باسم خاصية name الخاصة بالحقل (email، name وmessage على التوالي). أضفنا أيضا لكل حقل تشكيلة من الخيارات مثل أسماء أصناف التنسيقات وخصائص HTML. يمكنك بعد حفظ الملف تنفيذ الأمر التالي (من مجلد المشروع) لتشغيل تشغيل خادوم الويب المضمن في Laravel وتجربة النتيجة: php artisan serveأدخل العنوان http://localhost:8000/contact في المتصفح لعرض صفحة الاستمارة. ننتقل الآن، بعد إنشاء الاستمارة، لإعداد آلية التعامل مع محتوى الاستمارة وتمكين إرسال المقترحات عبرها. إنشاء استعلام استمارة الاتصاليضيف الإصدار الخامس من Laravel ميزة جديدة تعرف باستعلامات الاستمارة Form Requests؛ تهدف إلى وضع التصريح Authorization والتحقق من البيانات المرسَلة خارج المتحكِّمات وتغليفها ضمن صنف منفصل. نستخدم artisan لإنشاء استعلام Form request على النحو التالي: $ php artisan make:request ContactFormRequestينشئ الأمر ملفا باسم ContactFormRequest.php مساره app/Http/Requests/ContactFormRequest.php. يبدو هيكل الصنف، بعد حذف التعليقات، كما يلي: <?php namespace App\Http\Requests; use App\Http\Requests\Request; class ContactFormRequest extends Request { public function authorize() { return false; } public function rules() { return [ // ]; } }تحدد دالة authorize ما إذا كان يُسمح للمستخدم الحالي بالتفاعل مع الاستمارة. نريد أن يكون أي مستخدم قادرا على التفاعل مع الاستمارة، لذا نعدل الدالة لتكون القيمة المُرجَعة true بدلا من false. public function authorize() { return true; }تعرِّف دالة rules قواعد التحقق المرتبطة بحقول الاستمارة. الحقول الثلاثة، email، name وmessage جميعها مطلوبة (required)؛ كما أن حقل البريد الإلكتروني يجب أن يحوي عنوانا بريديا صالحا. نعدل دالة rules لإدراج هذه القواعد. public function rules() { return [ 'name' => 'required', 'email' => 'required|email', 'message' => 'required', ]; }توجد مدقِّقات Validators أخرى غير required وemail في Laravel للاستخدام عند الحاجة. لاحظ استخدام أكثر من مدقق في نفس الحقل مع الفصل بينها ب| مثل ما فعلنا مع حقل البريد الإلكتروني. احفظ ملف ContactFormRequest.php ثم افتح المتحكِّم AboutController (الموجود في المسار app/Http/Controllers/AboutController.php) وعدل دالة store لتصبح على النحو التالي: … use App\Http\Requests\ContactFormRequest; class AboutController extends Controller { public function store(ContactFormRequest $request) { return \Redirect::route('contact') ->with('message', 'Thanks for contacting us!'); } }لا تنس إضافة ;use App\Http\Requests\ContactFormRequest إلى المتحكم ليمكنه استخدام قواعد المصادقة المعرَّفة في الصنف ContactFormRequest.php الذي سيتولى التحقق من موافقة مُدخَلات المستخدم للقواعد الموضوعة ويظهر رسالة خطأ في حال أخلَّ المستخدم بإحداها. على سبيل المثال، إذا أدخل المستخدم عنوانا بريديا غير صالح فستظهر رسالة الخطأ التالية. طبعا لن تظهر رسائل الخطأ من العدم. تتولى مصفوفة errors$ المستخدمة في ملف contact.blade.php إظهار هذه الرسائل. هل تذكر هذه الشفرة؟ <ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> نعود إلى ContactFormRequest.php. قد ترغب في إظهار رسالة (شكر مثلا) للمستخدم عند نجاح إرسال الاستمارة. تمكن إضافة رسالة سريعة ضمن دالة store. يضاف المتغير المُمرَّر للدالة تلقائيا إلى متغيرات الجلسة Session في Laravel مما يمكّن من استخدامها عبر الدالة Session::get. يمكِن على سبيل المثال استخدام الشفرة التالية لإظهار محتوى المتغير message في أي عرض (View) أثناء الجلسة: @if(Session::has('message')) <div class="alert alert-info"> {{Session::get('message')}} </div> @endifبقيت خطوة واحدة لتكون الاستمارة جاهزة لإرسال بريد إلكتروني. نحتاج لإعداد مكوِّن البريد في Laravel وإدماج وظيفة تسليم البريد إلى دالة store. إعداد مكوِّن البريد في Laravelيستخدم Laravel حزمة SwiftMailer لتوفير إمكانية إرسال بريد إلكتروني بيسر. كل ما عليك فعله هو ضبط الإعدادات الموجودة في ملف config/mail.php. نذكر في ما يلي بعض الإعدادات الموجودة في الملف. driver: يدعم Laravel عدة تعريفات بريد مثل SMTP، دالة بريد PHP (mail)، خادوم بريد Sendmail وخدمتَيْ Mailgun وMandrill لتسليم البريد. يجب أن تضبط الإعدادات على التعريف المرغوب بالاختيار بين mailgun، sendmail، mail،smtp و mandrill. host: تعيين اسم المستضيف لخادوم البريد الإلكتروني (عند استخدام التعريف smtp).port: تعيين اسم منفَذ خادوم البريد الإلكتروني (عند استخدام التعريف smtp).from: إذا رغبت في أن تستخدم كل الرسائل المرسَلة نفس العنوان البريدي والاسم للمرسِل فبإمكانك ضبط إعدادات from وaddress المعرَّفة في هذه المصفوفة.encryption: يحدد بروتوكول التعميّة Encryption المستخدَم لإرسال البريد الإلكتروني.username: يعين اسم المستخدم في حال كان التعريف smtp.password: كلمة سر المستخدم في حال كان التعريف smtp.sendmail: مسار خادوم Sendmail إذا كانت قيمة driver هي sendmail.pretend: يطلب هذا الإعداد من Laravl تجاهل التعريف المضبوط وإرسال البريد إلى سجل التطبيق بدلا منه. يناسب التطبيقات التي مازالت قيد التطوير والتجربة.نأخذ مثالا لإعداد إرسال البريد في Laravel لاستخدام حساب بريد Google. غير الإعدادات التالية مثل ماهو مبيَّن. أعط القيمة smtp للتعريف driver. هذه هي القيمة الافتراضية.أبدل قيمة host إلى smtp.google.comاستخدم المنفذ port رقم 465.أبدل التعميّة encryption إلى ssl.استخدم حساب البريد الإلكتروني ضمن إعداد username.اكتب كلمة سر حساب البريد الإلكتروني في إعداد password. تذكر أنه يجب، ضمن بيئة عمل فعلية، حفظ هذه المعلومات ومعلومات أخرى حساسة ضمن ملف env. في مشروعك أو في متغير البيئة في الخادوم.احفظ التعديلات على ملف config/mail.php ثم عدل المتحكم AboutController ليبدو على النحو التالي: public function store(ContactFormRequest $request) { \Mail::send('emails.contact', array( 'name' => $request->get('name'), 'email' => $request->get('email'), 'user_message' => $request->get('message') ), function($message) { $message->from('wj@wjgilmore.com'); $message->to('wj@wjgilmore.com', 'Admin')->subject('Academy Feedback'); }); return \Redirect::route('contact')->with('message', 'Thanks for contacting us!'); }الدالة Mail::send هي المسؤولة عن ابتداء عملية تسليم البريد، وتستقبل ثلاثة معطيات. يحدد المعطى الأول اسم العرض (View) المستخدم لقالب جسم (محتوى) البريد الإلكتروني. المعطى الثاني هو مصفوفة بالبيانات المتاحة للاستخدام في جسم البريد الإلكتروني. البيانات المتاحة في حالتنا هي تلك القادمة من استمارة الاتصال عبر الكائن request$. يمنح المعطى الثالث إمكانية تحديد خيارات إضافية للبريد الإلكتروني مثل المرسِل، المستقبِل والموضوع. سنحتاج لإنشاء العرض الذي توجد به محتويات البريد. لذا سننشئ ملفا باسم contact.blade.php في المسار resources/views/emails. طبعا يمكنك تغيير اسم ومجلد العرض؛ إن فعلت فلا تنس التعديل على المتحكم AboutController بما يوافقك تغييراتك. You received a message from academy.hsoub.com: <p> Name: {{ $name }} </p> <p> {{ $email }} </p> <p> {{ $user_message }} </p>ملحوظة: يوجد سجل التطبيق في المسار storage/logs/laravel.log. عند إعطاء القيمة true لpretend ستحاكي إرسال بريد دون أن ترسله فعليا وسيظهر سطر يشبه التالي في السجل: [2015-07-12 11:34:51] local.INFO: Pretending to mail message to: wj@wjgilmore.comعُد، بعد حفظ التعديلات، إلى استمارة الاتصال؛ اكتب بيانات صحيحة ضمن حقول الاستمارة وأرسلها. يجب أن تصل الرسالة إلى البريد الموجود في دالة to (أي wj@wjgilmore.com في المثال). قد تواجه مشاكل مع إعدادات Gmail بسبب التقييدات على تطبيقات الطرف الثالث في Gmail. راجع إعدادات حساب Google في هذه الحالة. خاتمةاخترنا عرض جميع المخرجات المذكورة في هذا الدرس باللغة الإنجليزية للتركيز على الخاصية المشروحة. إن أردت توطين Localization المثال واستخدام اللغة العربية فيمكنك كتابة العبارات العربية مباشرة في ملفات القوالب لكن ستبقى رسائل الخطأ باللغة الإنجليزية ويجب عليك إدراج رسائل خطأ خاصة بالعربية. على العموم يُنصَح، لمن أراد توفير قابلية التوطين بسهولة، بعدم كتابة المُخرجات مباشرة في الشفرة Hard code بل إنشاء ملف بسلاسل المحارف Strings المستخدمة واستدعاء ملف اللغة المناسبة عن طريق دالة الترجمة trans. يُنشَأ مجلد لكل لغة مدعومة ضمن المسار resources/lang الذي يوجد فيه افتراضيا مجلد للغة الإنجليزية en به ملفات بالعبارات المستخدمة افتراضيا. ترجمة بتصرف لمقال Creating a Contact Form in Laravel 5 Using the Form Request Feature لصاحبه Jason Gilmore- 1 تعليق
-
- 3
-
-
- form request
- نموذج بيانات
- (و 2 أكثر)
-
ربما تفرح إذا رأيت إحصاءات الزيارات لموقعك الذي تعبت في تصميمه ليحوّل الزوار إلى عملاء، لكنّك تلاحظ أنّ أولئك الزوار لا يتحولون إلى عملاء لسبب ما. اكتشف الأسباب الكامنة وراء ذلك عبر هذا الدليل. تعدّ استمارة التواصل جزءًا مهمًا من رحلة الزوار داخل موقعك. حتى لو أقنعت الزوار بشراء المنتج الذي تبيعه فقد تأتي الاستمارة لتدمّر تجربتهم في الموقع إن كانت تحتوي على خطوات كثيرة ومحيّرة أو أزرار لا تعمل، أو إنْ كانت غير منظّمة، بل إن مكان تلك الاستمارة في الموقع قد يدمّر تجربة الاستخدام. سأشرح لك في هذا المقال ست قواعد لتصميم استمارة تواصل تشجع زوارك على التحوّل إلى عملاء، إذ توجد قواعد تكاد تكون ثابتة لضمان عمل الاستمارة على نحو سليم؛ فقد أظهرت دراسة لتتبع عين المستخدم من جوجل في 2014 أن اتّباع خطوط التصميم الأساسية يحسّن كثيرًا من تجربة الاستخدام، وللحديث بدقة أكبر، فإن 78% من المستخدمين أكملوا الاستمارة وأرسلوها من أول محاولة حين تلتزم تلك الاستمارة بالقواعد أدناه، بينما أكمل 42% منهم فقط الاستمارة لمّا لم تطبق بعضٌ من تلك القواعد. 1. المحاذاة يهتم الناس بطول الاستمارة التي يملؤونها، وبسبب هذا يلجأ المصممون إلى خيارات سيئة. مثلًا، قد ترى أن استمارة كالتي بالأسفل من موقع BrainTraffic طويلة نوعًا ما، وتحاول إصلاح مشكلة الطول هذه بجعل حقول الإجابة بجانب الأسئلة وليس أسفلها. إلّا أنّ خبراء تجربة المستخدم سيعترضون على هذا الحلّ، إذْ أنه يعرقل قراءة الاستمارة بسلاسة، وكذلك الأمر إنْ أردت أن تجعل الحقول بجانب بعضها أفقيا. عمومًا، ستحدث مشاكل في تجربة الاستخدام إن خالفت المنهج الرأسي في ترتيب حقول الاستمارة، فقد نُشرت سلسلة من القواعد العامة بشأن تصميم استمارات الويب سُمِّيَت "واجهات مستخدم بسيطة لكن مهمة في الويب: 20 قاعدة لتصميم استمارات ويب يمكن استخدامها"، وقد اعتمدت جوجل تلك القواعد في 2014 واختبرتها مع دراسة تتبع العين التي ذكرناها. وقد استنتجوا أن الاستمارات التي تمت محاذاتها إلى اليسار - في اللغة الإنجليزية - ووضعت حقولها فوق بعض بشكل رأسي كانت نتائجها أفضل من حيث تجربة الاستخدام. إليك الآن ما يجب أن تفعله كي تطبق قاعدة المحاذاة على استماراتك: اجعل كل الحقول وكذلك أزرار الإجراءات محاذية لليسار في حالة اللغة الإنجليزية، ولليمين في حالة العربية. لا تجعل الحقول التي تتعلق بجزء معين بجانب بعضها أفقيًا، يمكنك أن ترتّب الاستمارة على نحو منطقي من حيث ترتيب الموضوعات والأجزاء التي فيها، لكن كل سؤال أو حقل يجب أن يكون رأسيا. يجب أن تُعرَض الأسئلة متعدّدة الاختيارات (أقل من 6 خيارات) في قائمة رأسية من النقاط، وليس في قائمة منسدلة. وهو ما يحسّن تجربة الاستخدام، ويساعدك على ملء الهوة بين تجربة الاستخدام في الأجهزة المكتبية والأجهزة المحمولة، خاصة إن كنت تنوي تحديث مواقعك لتوافق دليل جوجل للتصميم من أجل الأجهزة المحمولة أولا. 2. أدرج كل الحقول التي لها علاقة قد تظن أن الاستمارة كلما كانت أقصر كانت أفضل، أليس كذلك؟ في الواقع ليس دائمًا، فالمهم أن تقدم للمستخدمين كل الحقول المطلوبة. قال مايكل أجارد، المسؤول عن تحسين معدلات التحويل في Unbounce، في كلمة له في 2015 أنه وفريقه أرادوا أن يعرفوا ما الذي سيحدث لو قصّروا استمارة التواصل التالية: فكما ترى، أزالوا ما اعتقدوا أنها حقول غير ضرورية من أجل تسريع عملية ملء الاستمارة، لكن بنهاية الاختبار اكتشفوا هبوطًا مقداره 14% في معدلات التحويل حين استخدموا القائمة القصيرة. ثم إنهم درسوا أي الحقول تفاعل معها المستخدمون في الاستمارة، عبر ترتيب الحقول في الاستمارة وإعادة صياغة النصوص الإرشادية والأسئلة في هذه الحقول لتكون أوضح، ثم أعادوا الاختبار ليجدوا 19% زيادة في التحويل. لكن هذه الطريقة قد لا تنجح دائمًا، فقد وجدت Expedia مثلًا أن حقلًا في استمارة التواصل بعنوان "الشركة" كان يحيّر المستخدمين رغم أنه لم يكن إجباريًا، إذ لم يفهم المستخدمون المراد منه ومن ثمّ كتبوا فيه معلومات خاطئة أدت إلى رفض عمليات الشراء التي قاموا بها، وقد أزالت Expedia هذا الحقل فزادت أرباحها 12 مليون دولار في العام التالي. أقترح عليك أن تبدأ بالحقول الأساسية أثناء تصميم استمارة التواصل، كما فعلت QuickBooks في الصورة التالية: وإن وجدت أن معدلات التحويل لا تتماشى مع التوقعات فارجع إلى الإحصاءات وانظر إن كانت تستطيع تحديد أي الحقول تمنع المستخدمين من إكمال الاستمارة. 3. تبسيط المُدخَلات يجب أن تكون الاستمارة جاهزة لتيسير إدخال البيانات بغض النظر إن كان مستخدموك يتفاعلون مع استمارتك باستخدام حاسوب مكتبي أو جهاز محمول، أو ما إن كانوا يحتاجون إلى تقنيات مساعِدة لملء هذه الاستمارة أم لا. إليك أمور يجب أن تعيها. الترتيب الآلي لمستخدمي الأجهزة المكتبية ومن يحتاجون أدوات مساعدة (قابلية الوصول)، تأكد من تفعيل الترتيب المنطقي للحقول، بحيث تنقل الاستمارة التركيز آليًا إلى الخطوة التالية. أقنعة الإدخال بدلًا من إجبار المستخدمين على تخمين الصيغة المناسبة لبعض الحقول، يمكنك أن تهيئها بنفسك لتحتوى على أقنعة إدخال (Input masks) تضع البيانات في صيغ جاهزة آليًا أثناء إدخال المستخدم للبيانات. وهذا النمط من التهيئة الآلية سيقود إلى نقرات أقل ومعدل إكمال أسرع للاستمارات، خاصة إن كان حقلًا مثل رقم الهاتف أو رقم بطاقة الائتمان مقسّمًا إلى حقول متعددة. أنواع الإدخال ستساعد أنواع الإدخال في html المستخدمين على أن يروا الخيارات المناسبة في لوحة المفاتيح أثناء كتابتهم على الهواتف، مما يوفر عليهم عناء كتابة كل شيء من الصفر (مثل com. للبريد). لاحظ كيف تتغير لوحة المفاتيح من استمارة التواصل في Elluminati بناءً على كل حقل. الإكمال الآلي لجوجل فعّل الإكمال الآلي من ملحق Address Autocomplete من جوجل بدلًا من كتابة شفرة مخصصة لكل حقل كي تهيئها وفق المعيار الذي تحتاجه، فهذا سيوفر عليك عناء التعامل مع الأخطاء النحوية والإملائية إضافة إلى العناوين التي لم تكتب بصورة صحيحة، كما ستريح زوارك من كتابة أغلب هذه المعلومات بأنفسهم. المنطق الظرفي (Conditional Logic) إن كنت قلقًا من طول استمارتك، خاصة إن كنت تستهدف عدة شرائح من المستخدمين، فيمكنك استخدام المنطق الظرفي لتقصيرها، فلن يظهر للمستخدم الجزء التالي في الاستمارة إلا إذا نقر على الخيار الخاص بحالته هو أو احتياجه، فتظهر له حينها الحقول المرتبطة بهذا الخيار، انظر الصورة التالية للتوضيح. توفّر أغلب ملحقات إنشاء الاستمارات، مثل Forminator، امتدادات لهذا الغرض. شريط التقدّم Progress Bar يشجّع هذا الشريط المستخدم على إتمام عملية التسجيل إذ يريه مكانه من نهاية الاستمارة بالتحديد. 4. أرشد المستخدم إلى تصحيح الخطأ بوضوح أدرك أني أبدو وكأني أجرك إلى تبني البساطة في استمارتك منذ أول المقال، وأن القاعدة التي نحن بصددها تخالف هذا الاتجاه، لكني أريدك أن تعطيها سمعك وعقلك لأهميتها الشديدة، وسأشرح لك الآن ما أقصد. لنقل إن لديك استمارة تواصل سهلة وبسيطة، وملأها المستخدم بناء على ما تقترحه عناوين الحقول ثم ضغط على زر الإرسال فخرجت له تلك الرسالة الحمراء المزعجة التي تقول له لقد أخطأت!عد مرة أخرى وأصلح المدخلات الخاطئة ثم أعد الإرسال. ولعلك قابلت مثل تلك الحالة بنفسك وتعرف كمّ الضيق الذي يصيبك حينها، خاصة حين تمحو بعض البيانات بعد رسالة الخطأ رغم أنك أدخلتها بالفعل. وهكذا، بدلًا من ترك المستخدم يخمّن ما الذي يجب إصلاحه وكيف، تقدّم أنت خطوة وفصّل كل شيء بوضوح أثناء إدخال المستخدم للبيانات كما يلي: زوّد استمارتك بخاصية التركيز الآلي للحقول (Field Focus)، خاصة على الهواتف، كي يعرف المستخدم مكانه بالتحديد أثناء ملء الاستمارة. اكتب أي شروط لصياغة النصوص داخل كل حقل إن لم تستخدم أقنعة الإدخال. بيّن بوضوح أي حقل يمكن تجاوزه (غير إلزامي)، واستخدم الكلمة في ذلك بوضوح عوضًا عن الاكتفاء بالنجمة الصغيرة. امنح المستخدم القدرة على إظهار أو إخفاء حقل كلمة السر أثناء إدخاله. أظهر رسالة خطأ بمجرد حدوثه، ولا تنتظر حتى نهاية إدخال المستخدم للبيانات وانتقاله إلى ما بعده كي تظهرها له. توضح هذه الاستمارة من Hubspot الطريقة الصحيحة لمعالجة أخطاء المستخدم في استمارة التسجيل. تابَعتْ جوجل في دراستها عن تتبع عين المستخدم مع نفس المستخدمين الذين أجروا الاختبار، ووجدوا أنهم اشتكوا من غياب الصياغة المناسبة في الحقول، فتقترح جوجل الآن أن تضع إرشادات واضحة في الاستمارة، ورسائل خطأ واضحة، ويجب أن تحدد الحقول التي بها أخطاء، وتلوّن نص الرسالة وتبرزه ولا تكتفي برسالة بخط أحمر فقط. 5. تجنب النصوص الإرشادية داخل الحقول تبدو النصوص الإرشادية التي تستخدم داخل الحقول كالتالي: لا تزال هذه الاستمارة من شركة Target تحتوي مشاكل بالنسبة لمن يحتاجون لأدوات مساعدة في القراءة (قابلية الوصول)، رغم إصلاح مشاكل متعلّقة بالنصوص الإرشادية. أرأيت كيف وضعَت شركة Target النصوص الإرشادية داخل الحقول في الصورة السابقة؟ تختفي هذه النصوص حين ينقر المستخدم داخل الحقل، وتعالج Target هذه المشكلة بأنْ تنقل النص الإرشادي إلى أعلى إطار الحقل (انظر مثلًا email address في الصورة). وبرغم هذا فإن خبراء تجربة الاستخدام، مثل مجموعة Norman، يقولون إن هذا الأسلوب سيء في تصميم تجربة استخدام للاستمارات، وإليك أسبابًا تبيّن المشاكل التي قد تطرأ من اتّباع ذلك الأسلوب: بالنسبة للمستخدمين الذين يعملون على مهام أخرى أثناء إدخال البيانات أو يفقدون تركيزهم بسهولة أو ينتقلون بسرعة إلى الحقول التالية، فإن هذا الأسلوب يمثل مشكلة لهم، إذ يضطرون إلى العودة للخطوة السابقة في كل مرة من أجل رؤية ما كان مكتوبًا في الحقل قبل أن ينتقلوا إليه. النصوص الإرشادية التي تختفي تمنع المستخدم من العودة للتأكد إن كان قد أدخل بيانات صحيحة أم لا، لأنه لن يرى ما كان مكتوبًا للإيضاح إذ اختفى بعد إدخال البيانات. النص المكتوب بلون رمادي خفيف لا يُقرأ بسهولة. قد يخطئ المستخدم ويترك الحقول التي بها نصوص إرشادية فارغة ظنًا منه أنه أدخل البيانات فيها بالفعل، فيتركها ويرسل الاستمارة فتظهر له رسائل خطأ. بعض برامج قراءة الشاشة لا تستطيع قراءة النص الإرشادي المكتوب داخل حقول الاستمارة. ينجذب المستخدم - وفقًا لمجموعة نورمان التي ذكرتها قبل قليل - إلى الحقول الفارغة أكثر من تلك التي تحتوي نصوصًا إرشادية، وقد تخشى أن تطول استمارتك بسبب وضع اللصائق والإرشادات، لكن اعلم أن تجربة الاستخدام ستتحسن كثيرا. 6. انتبه إلى تصميم الأزرار احرص دائمًا على محاذاة زر الإجراء الرئيسي مع باقي حقول الاستمارة حتى لو لم يبدُ ذلك منطقيًا، فإن كان لديك مثلًا زر "التالي" و"رجوع" فيجب أن يكون زر التالي محاذيًا لبداية حقول الاستمارة (أقصى اليمين في حالة اللغة العربية، والعكس في حالة اللغة الإنجليزية)، إذ أنه المكان الذي سينظر فيه المستخدم افتراضيًا حين يصل إلى تلك الخطوة. تجنب أيضًا استخدام أزرار مثل "إعادة تعيين – مسح – إلغاء"، ذلك أن المستخدم ينقر على أول زر يراه دون تفكير ظنًا منه أنه زر الإرسال، ولو حدث ذلك ومُحيَت جميع البيانات التي أدخلها من قبل فقد يترك موقعك كلية دون أن يسجل فيه أو يشترك. وقد وُجد في اختبار أ/ب أسفله من Unbounce، أن النسخة التي بها نص يعرض القيمة التي سيحصل عليها المستخدم من تسجيله كانت أكثر نجاحًا أكثر في معدلات التحويل من النسخة الأولى بنسبة 31%. أخيرًا، استخدم علامات التوثيق متى كان ذلك مناسبًا، ولديك مثال على ذلك في الرسالة التي تقول إنك لا تحتاج إلى التسجيل ببطاقة ائتمان في الاستمارة أدناه من CoSchdual، إذ أنها تشجع المستخدم على التسجيل. لكن احذر أن تستخدم علامات التوثيق في غير محلها حتى لا يظن المستخدم أن عليه تقديم بيانات حساسة في حين أنك قد لا تطلب ذلك منه، كما هو موضح في الاختبار التالي: بينما تظن أن شعار TRUSTe قد يزيد من معدل التسجيل والتحويل، إلا أن النسخة على اليمين حصلت على معدل يزيد ب 13% في معدل إكمال الاستمارة، إذ اعتقد المستخدمون في النسخة اليسرى أنهم قد يضطروا إلى إدخال بيانات خاصة أو دفع أموال عبر ذلك الموقع. خاتمة لا أقول في هذا المقال أن استمارات التواصل على قالب واحد يمكن استخدامه لكل الحالات في السوق، فكل موقع، وكذلك الشركة التي يتبع لها الموقع، لديه أهداف مختلفة، ومن ثم فإن استمارات التواصل فيه يجب أن تخدم تلك الأهداف خاصة. لتنفيذ الخطوات التي ذكرناها في هذا المقال تحتاج إلى أحد أمرين، إما أن تستخدم ملحقًا جاهزًا يعينك على إنشاء استمارة مخصصة، أو أن تصمم استماراتك الخاصة، و تذكّر، أياً كان ما تختاره، أنّ المستخدم لا يخشى -ضرورة - الاستمارة الطويلة، وأن الأمر يتعلق بتجربته مع الاستمارة أكثر من طولها. ترجمة - وبتصرف - للمقال 6 Unbreakable Rules for Building the Perfect Contact Form لصاحبته Suzanne Scacca. -
كان من الشائع في بدايات التطوير للوب كتابةُ الاستمارات بوسوم HTML ثم إضافة شفرة مخصَّصة للتأكد من مُدخَلات الزائر. وفّرت لغة البرمجة PHP بعد ذلك دوالَّ معيارية للتحقّق من المُدخلات؛ خفّفت هذه الدوّال قليلا من العبء على المطوِّر إلا أنها تركت له مهمّة تعريف طريقة للتحقّق من المُدخلات ومن ثمّ معالجتها أو إشعار الزائر بالبيانات غير الصالحة وعرض الاستمارة من جديد. يزيح Laravel هذه المتاعب بتوفير شيفرة للتحقّق وطريقة للتعامل مع المُدخلات. يقدّم هذا المقال دليلا لكيفيّة إنشاء استمارات والتحقّق من مدخلات الزائر في Laravel. سنأخذ مثالا لإضافة تصنيف Category ضمن جدول تصنيفات Categories في تطبيق؛ يمكن أن يتعلّق الأمر بتصنيف منشورات مدوّنة، منتجات متجر أو أي شيء مماثل. تهيئة تطبيق Laravel نفترض أن Laravel مثبَّت وجاهز للعمل مع قاعدة البيانات. نهيّئ التطبيق قبل أن نشرع في إنشاء الاستمارة وأدوات التحقّق المصاحبة لها. إنشاء نموذج التصنيف والتهجير الموافق له سيتكون نموذج التصنيف من حقل للاسم إضافة إلى حقل المعرّف id والأختام الزمنية Timestamps. نستخدم artisan لتوليد النموذج والتهجير: $ php artisan make:model Category -m Model created successfully. Created Migration: 2016_06_13_010501_create_categories_table ثم نفتح ملفّ التهجير (داخل المجلّد database/migrations) ونحدّث الدالة up على النحو التالي: public function up() { Schema::create('categories', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->timestamps(); }); } ثم ننفّذ التهجير: $ php artisan migrate Migration table created successfully. Migrated: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_100000_create_password_resets_table Migrated: 2016_06_13_010501_create_categories_table ننتقل الآن للعمل على المتحكّم Controller الذي سيكون المسؤول عن معالجة محتوى الاستمارة. إنشاء المتحكم وتعريف المسارات نستخدم أداة artisan لإنشاء المتحكّم الذي سنستخدمه - من بين أمور أخرى - لعرض النموذج ومعالجة بياناته: $ php artisan make:controller CategoriesController.php --resource Controller created successfully. ينشئ أمر make:controller عند استخدام المعطى resource--متحكّما بدوال update، edit، store، create، show``index وdestroy. راجع درس أساسيات بناء التطبيقات في إطار العمل Laravel 5 للمزيد عن هذه الدوال. بقي لنا تعريف المسارات في الملفّ app/Http/routes.php؛ نستخدم Route::resource لهذا الغرض: Route::resource('categories', 'CategoriesController'); إنشاء العروض Views نركّز لأغراض هذا الدّرس على الدالتيْن create وstore المسؤولتيْن على التوالي عن عرض الاستمارة وتخزين بياناتها (في حال تجاوز اختبار التحقّق؛ كما سنرى). تبدو الدالتان لحدّ الساعة فارغتيْن: public function create() { // } public function store(Request $request) { // } ... نحدّث الدالة create كالتالي: public function create() { return view('categories.create'); } أي أننا نطلُب تقديم العرض create.blade.php الموجود في المجلّد resources/views/categories. ننشئ المجلّد categories وننشئ بداخله الملفّ create.blade.php. سنكتفي الآن بإضافة الوسوم التالية إلى ملفّ العرض: <h1>Create a Category</h1> يمكنك بعد حفظ الملفّ زيارة الرابط categories/create/ وسيظهر العنوان أعلاه. إنشاء استمارة في Laravel نريد أن نعرض للزائر استمارة لملئها؛ يمكن أن ننشئ هذه الاستمارة بكتابة وسوم HTML المطلوبة في ملفّ العرض create؛ إلا أنه يمكننا الاستفادة من حزمة laravelcollective/html لتولّي هذه المهمّة. نضيف الحزمة إلى مشروع Laravel بتنفيذ الأمر التالي داخل مجلّد المشروع: $ composer require laravelcollective/html ثم نفتح ملفّ الإعداد config/app ونضيف السطر التالي إلى مصفوفة providers: Collective\Html\HtmlServiceProvider::class, لتبدو المصفوفة كالتالي (نزعنا بعض محتويات المصفوفة للاختصار): 'providers' => [ ... App\Providers\AuthServiceProvider::class, App\Providers\EventServiceProvider::class, App\Providers\RouteServiceProvider::class, Collective\Html\HtmlServiceProvider::class, ] نكمل مع نفس الملفّ بالانتقال إلى المصفوفة aliases التي نضيف إليها السّطر التالي: 'Form' => Collective\Html\FormFacade::class لتصبح كما يلي: 'aliases' => [ ... 'URL' => Illuminate\Support\Facades\URL::class, 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, 'Form' => Collective\Html\FormFacade::class ] احفظ الملفّ. أكملنا تثبيت الحزمة وإعدادها. نعيد فتح ملفّ العرض create ونعدّل محتواه ليصبح على النحو التالي: <h1>Create a Category</h1> {!! Form::open( array( 'route' => 'categories.store', 'class' => 'form') ) !!} @if (count($errors) > 0) <div class="alert alert-danger"> There were some problems adding the category.<br /> <ul> @foreach ($errors->all() as $error) <li></li> @endforeach </ul> </div> @endif <div class="form-group"> {!! Form::label('Category') !!} {!! Form::text('name', null, array( 'class'=>'form-control', 'placeholder'=>'List Name' )) !!} </div> <div class="form-group"> {!! Form::submit('Create Category!', array('class'=>'btn btn-primary' )) !!} </div> {!! Form::close() !!} </div> تضيف حزمة laravelcollective/html تعليمات خاصّة بإنشاء الاستمارات إلى نظام Blade للقوالب. يشير مسار الاستمارة إلى categories/store لأن دالّة store في المتحكّم CategoriesController هي التي ستتولّى معالجة بيانات الاستمارة. تستخدم التعليمة Form::open مبدئيا إجراء POST؛ لذا لا حاجة لتعيينه. يُستخدَم المقطع if..@endif@ لتقديم معلومات إلى المستخدم عن أخطاء التحقق. سنفصّل هذا الأمر بعد قليل. مرّرنا لأغراض جمالية أصنافا وخاصيّات من Bootstrap إلى الاستمارة ؛ هذا ليس ضروريا وستعمل الاستمارة بدونه. تظهر الآن الاستمارة بالذهاب إلى categories/create/. يمكنك إدخال اسم تصنيف وإرسال الاستمارة وستُوجَّه إلى categories/store/ لكنّ شيئا لن يحدُث لأننا لم نكتب حتى الآن شيئا في الدالة store من المتحكّم CategoriesController. معالجة الاستمارة نعود للدالة store في المتحكم CategoriesController. هذه هي الدالة التي تُرسَل إليها بيانات الاستمارة بعد النقر على زرّ الإرسال. نحدّث المتحكّم كالتالي: use App\Category; ... public function store(Request $request) { $category = new Category; $category->name = $request->get('name'); $category->save(); return \Redirect::route('categories.show', array($category->id)); } بدأنا أولا باستيراد النموذج Category في المتحكّم ثم استخدمناه في الدالة store لتخزين تسجيلة Record جديدة في جدول قاعدة البيانات اعتمادا على محتويات الاستمارة؛ ثم بعد التخزين نعيد توجيه المستخدم إلى الدالة show ضمن المتحكّم CategoriesController مع معرّف التصنيف الذي أضفناه للتو. يمكننا تعديل الدالة show كالتالي لعرض رسالة تفيد بنجاح إضافة التصنيف: public function show($id) { // $category = Category::find($id); $message = "$category->name has been added succefully"; return $message; } من الملاحظ أننا لم نتحقّق في العمليّة السابقة من مُدخلات المستخدم. يعني هذا أنه يمكن - مثلا - ترك الحقل الخاصّ باسم التصنيف فارغا وسيُحفظ تصنيف بدون اسم في قاعدة البيانات؛ طبعا هذا غير مقبول. التحقق من الاستمارة قبل الإرسال يوفّر Laravel 5 ميزة تُسمى طلب الاستمارة Form request تسمح بالتحقق من حقول الاستمارة دون تلويث المتحكّم. يدير ملفّ منفصل قواعد التحقّق من الاستمارة؛ نستخدم أمر artisan التالي لإنشاء هذا الملفّ: $ php artisan make:request CreateCategoryFormRequest Request created successfully. ينشئ الأمر ملفا باسم CreateCategoryFormRequest.php في المجلد app/Http/Requests. يبدو الملفّ كالتالي: <?php namespace App\Http\Requests; use App\Http\Requests\Request; class CreateCategoryFormRequest extends Request { public function authorize() { return false; } public function rules() { return [ // ]; } } عدّل الدالة authorize كالتالي: public function authorize() { return true; } نحتاج لتحديد القيمة true بالنسبة للدالة authorize لأنه في حال كانت القيمة false فلن تُعالج بيانات الاستمارة. ثم نعدّل الدالة rules: public function rules() { return [ 'name' => 'required' ]; } تعرّف الدالة قواعد التحقّق؛ عرّفنا أعلاه الحقل name ضمن الاستمارة بأنه مطلوب required؛ أي أن الاستمارة لن تُرسَل إلا إذا كانت توجد قيمة لهذا الحقل. تمكن إضافة أكثر من شرط على الحقل كالتالي: 'name' => 'required|alpha' نحتاج الآن لدمج طلب الاستمارة في الدالة store ضمن المتحكّم CategoriesController. نبدأ باستيراد الصنف في المتحكّم كالتالي: use App\Http\Requests\CreateCategoryFormRequest; ثم نحدّث الدالة store ليكون الكائن الممرَّر إليها من الصّنف CreateCategoryFormRequest: public function store(CreateCategoryFormRequest $request) { ... } ابتداءً من الآن سيتحقّق Laravel من بيانات الحقل قبل إرسالها؛ وفي حال الإخفاق في التحقق من الشرط سيعيد الزائر إلى صفحة الاستمارة مع عرض رسالة بوجود خطأ. ترجمة -وبتصرّف- للمقال Creating and Validating a Laravel 5 Form: The Definitive Guide. حقوق المقال محفوظة لصاحبه W. Jason Gilmore. -
.png.7a80e22e3acae2bedd8fce83f1ded142.png)
تقدّم المواصفات الجديدة في CSS3 محدّدين Selector مفيدين للغاية هما :valid و :invalid وهي أصناف زائفة pseudo-class يمكن استخدامها مع عناصر الإدخال الخاصة بالاستمارات. لنفترض أن لديك عنصر إدخال تتحقّق من خلاله فيما إذا كان ما أدخله المستخدم صحيحًا أم خاطئًا. لإجراء عملية التحقق ستحتاج إلى إضافة خاصية HTML5 required إلى الوسم الخاص بعنصر الإدخال، وبهذا يمكن الاستفادة من المحدّدين :valid/:invalid لتغيير لون حقل الإدخال ليعرف المستخدم من خلال ذلك أنّ ما أدخله صحيح أو خاطئ. فعلى سبيل المثال يتحول مربع الإدخال إلى اللون الأخضر عندما تكون العبارة صحيحة، وكما يلي: input:required { background: #AAA; } input:valid { background: #0A0; } input:invalid { background: #A00; } سننشئ في هذا الدرس استمارة بنمط Material وسننبّه المستخدم على صحة البيانات المدخلة في الاستمارة من خلال الصنفين الزائفين :valid و :invalid. تتألف الاستمارة من مربع نصّي وحيد وقد أحطنا عنصري input[type="text"] وlabel بعنصر div يحمل المحدّد .form-control من إطار عمل Bootstrap. لدينا أيضًا شريط سيتغير لونه بين الأخضر والأحمر للدلالة على صحة المعلومات المدخلة من عدمها. <div class="form-control"> <input type="text" required /> <span class="bar"></span> <label for="First Name">First Name</label> </div> في البداية سنزيل جميع الحدود المحيطة بمربّع النص باستثناء الحدّ السفلي وسنلوّنه باللون الأزرق ليكون متناسقًا مع نمط التصميم Material. .form-control { position:relative; margin-top:40px; width:400px; } input { border:none; border-bottom:3px solid #34495e; padding:10px 0; width:400px; display:block; font-size:16px; } سيؤدي العنصر label دور ماسك مكان placeholder، لذا سنجعل موقعه مطلقًا مع تعيين المسافة اليسرى والعلوية المناسبة، ليبدو العنصر بهيئة ماسك مكان اعتيادي. label { position:absolute; top:8px; left:5px; font-size:16px; color:#333; transistion: 0.3s ease all; -webkit-transition:0.3s ease all; } والآن عندما يضغط المستخدم أو يجعل التركيز على مربّع النص سنقوم بإلغاء الحدّ السفلي، وسنغير موقع ماسك المكان ليصبح فوق مربع النص ليبدو كـ label. input:focus{ border:none; outline:none; } سيبقى الـ label فوق مربع النص إلى أن يجعل المستخدم التركيز على مربّع النص ويضيف إليه أي معلومات صحيحة. input:focus ~ label, .form-control input:valid ~ label { top:-10px; font-size:12px; left:2px; color:#111; } لن يظهر المحدّد .bar بصورة تلقائية، بمعنى أن عرضه سيكون صفرًا، وإن قمنا بالتركيز على مربع النص فإن عرض المحدّد .bar سيزداد. كما ستلاحظ فقد حدّدنا العرض ضمن الصنفين الكاذبين (:after و :before) حيث سيزداد العرض 50% لكل عنصر زائف، بمعنى أن الزيادة الكلية ستكون 100%، وهكذا سنحصل على تأثير توسّع جميل. .bar:before, .bar:after { content:''; height:3px; width:0; bottom:1px; position:absolute; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .bar:before { left:50%; } .bar:after { right:50%; } input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; } سنغيّر الآن لون خلفية الشريط حسب صحة أو عدم صحة البيانات المدخلة، وذلك باستخدام الصنفين الزائفين :valid و :invalid. input:valid ~ .bar:before, input:valid ~ .bar:after{ background:#2ecc71; } input:invalid ~ .bar:before, input:invalid ~ .bar:after{ background:#e74c3c; } تعمل هذه الطريقة على متصفحات (+Chrome(10 و (+Firefox(4 و (+Safari(5 و (+Opera(10 و (+IE(10، ولكن لا تعمل على الإصدار التاسع وما دونه من متصفح IE. وجدير بالذكر أنّه لن يتم التحقّق من صحة البيانات بأي شكل من الأشكال، ويمكن استخدام هذه الطريقة في مجال تجربة المستخدم فقط. ترجمة - وبتصرّف - للمقال Form validation in pure css لصاحبه Arkaprava Majumder.
