كيفية ضبط نموذج الاتصال CSS 7

المحتوى

• الاتجاهات
• نصائح
• تحذير
• ما تحتاجه

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

الاتجاهات

تخصيص نمط حقول نموذج الاتصال 7 باستخدام CSS (كومستوك / كومستوك / غيتي إيماجز)

1. افتح ورقة أنماط السمة في WordPress وانتقل إلى النهاية. قم بإنشاء منطقة مشروحة حتى تتمكن من تحديد موقع الكود بسهولة. على سبيل المثال:

   / هذا هو المكان الذي يبدأ فيه رمز CF7 المخصص الخاص بي /

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

   إدخال .wpcf7 [type = "text"] ، .wpcf7 areadotexto {}

   أضف حدودًا وخلفيات وحشو وأحجام عناصر النص. الأمثلة على ذلك:

   .wpcf7 input [type = "text"] {خلفية: لا شيء تكرار التمرير 0 0 # F9F9F9؛ الحدود: 1px صلب # 8E9BA9 ؛ الحشو: 5px. العرض: 200 بكسل ؛ }

3. تخصيص أنماط القوائم المنسدلة واختيار.للقيام بذلك ، قم بإنشاء إدخال في ورقة الأنماط الخاصة بك. على سبيل المثال:

   
   

   .wpcf7 input [type = "select"] {

   }

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

   .wpcf7 input [type = "select"] {خلفية: لا شيء تكرار التمرير 0 0 # F9F9F9؛ الحدود: 1px صلب # 8E9BA9 ؛ الحشو: 5px. العرض: 210 بكسل ؛ }

4. تخصيص نمط زر الإرسال الخاص بك. للقيام بذلك ، قم بإنشاء إدخال في ورقة الأنماط الخاصة بك. على سبيل المثال:

   .wpcf7 input [type = "submit"] {

   }

   قم بتخصيص زر إرسال لتكمل شكل موقعك ومظهره (يجب أن يظل بارزًا في الخلفية). مثال على زر إرسال أحمر:

   .wpcf7 input [type = "submit"] {background-color: # 990000؛ الحدود: 4px صلب # B34040 ؛ اللون: # FFFFF. }

5. احفظ التغييرات في ورقة الأنماط الخاصة بك ونقل البيانات إلى مجلد السمات.

نصائح

• حاول أنماط مختلفة وألوان الحدود المختلفة.
• قم بفحص جديد للنماذج في Firefox و Safari و Internet Explorer ، لأن كل مستعرض يوفر حقول إدخال مختلفة قليلاً.

تحذير

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

ما تحتاجه

• الوصول إلى ورقة أنماط وورد