تعديل ستايل نموذج الارسال Contact Form 7

هذا السؤال بكل تأكيد يراود كل من يود استخدام استضافة نموذج الارسال Contact Form 7، ما هي الطريقة؟ واخرون يتسائلون ما هي الطريقة الأمثل للتعديل وتشخيص ستايل هذا النموذج.

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

لذلك فإن الطريقة المثلى للتعديل على التنسيق أو الستايل وفي نفس الوقت الحفاظ على تلك التعديلات، فهي بوضعها بملف style.css الرئيسي الخاص  بالموقع بالقالب المستخدم، السؤال الذي يطرح نفسه هو، من أين لي أن أعرف اسم الـ class أو الـ ID الخاص بكل وسم.

للاضافة كلاسات ومعرفات محدد فمثلا نريد أن نعدل حاشية حقل البريد email ما نقوم به هو التالي:

.wpcf7 input[type="email"] {
border: 2px solid #ddd;
color: #000;
width: 50%;
}

بهذا الكود البسيط نكون قد حددنا تنسيقنا الذي لن يتعدل مع كل تحديث للإضافة.

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

.wpcf7
{
background-color: #00B386;
border: 2px solid #535362;
}

بهذا نكون قد عدلنا على تنسيق نموذجنا دون الحاجة إلى التعديل على الملفات الاصلية

ملاحظة: إن لم يعمل معك التعديل قم بإضافة important! على كل تنسيق تقوم به.

6 تعليق

    • بعد تنصيب الاضافة ستحد عنصرا باسم استمارة المراسلة من خلال تلك الصفحة تقوم بإعداد نموذج الاتصال.

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *