كيفية تخصيص نمط نموذج الاتصال 7 لمطابقة موقع الويب الخاص بك

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

يسمح لك نموذج الاتصال 7 بإنشاء نماذج جهات اتصال متعددة باستخدام ترميز HTML بسيط (الذي ينشئه لك). بمجرد إنشائه ، يمكن نشر كل نموذج بسرعة عن طريق وضع الرمز القصير المقابل له حيث تريد ظهور النموذج ؛ في منطقة الصفحة أو المنشور أو عنصر واجهة المستخدم. يتم إرسال الرسائل المرسلة عبر النماذج إلى عنوان البريد الإلكتروني المقدم في إعدادات البرنامج المساعد وتتم مكافحة البريد العشوائي عبر دعم CAPTCHA و Akismet.

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

عادة ما ينتج عن شيء أساسي تمامًا ، مثل هذا:

لسوء الحظ ، قد لا يكون هذا النوع من النماذج ، على الرغم من بساطته ومرونته حقًا ، مصممًا بشكل جميل مثل العناصر الأخرى على موقع الويب. ترك العديد من المستخدمين السعداء يبحثون عن بدائل لنموذج الاتصال 7 مع المزيد من خيارات التصميم. لحسن الحظ ، مع وجود القليل من CSS ، لا يلزم وجود بديل للمكوِّن الإضافي.

في منشور اليوم ، سأشارك سلسلة من النصائح التي ستفتح مجموعة متنوعة من إمكانيات تصميم نموذج الاتصال 7 لأي شخص ، باستخدام أي موضوع.

كيفية تخصيص نمط نموذج الاتصال 7 لمطابقة موقع الويب الخاص بك

اشترك في قناتنا على اليوتيوب

مكان تحرير نموذج الاتصال الخاص بك 7 CSS (ولماذا)

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

بدلاً من ذلك ، ستحتاج إلى إضافة CSS أدناه إلى CSS لموضوع طفلك. يمكنك أيضًا استخدام ميزة CSS المخصصة على Jetpack ، أو إذا كان المظهر الخاص بك يوفر قسمًا في لوحة الإدارة الخاصة به لـ CSS المخصص ، فيمكنك استخدام ذلك أيضًا.

حسنًا ، الآن بعد أن عرفنا مكان وضع الأنماط التي سننتقل إليها أدناه ، فلنبدأ!

كيفية إنشاء أنماط ذات شكل واسع للموقع

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

(أود أيضًا أن أقترح بشدة أن تضع العنوان المعلق الذي كتبته أدناه في ورقة الأنماط الخاصة بك للإشارة إلى المكان الذي تبدأ منه أنماط نموذج الاتصال 7.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

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

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

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

على موقع الاختبار الخاص بي ، أدى ذلك إلى ما يلي:

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

كيفية إنشاء أنماط حقل نموذج واسع للموقع

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

سيؤدي الرمز أدناه إلى توسيع منطقة الرسالة إلى العرض الذي تريده (عند ضبطه). لقد قمت بوضع 95٪ في المثال الخاص بي لأن هذا هو أفضل ما يبدو في حالة الاستخدام المتخيلة. يمكنك ضبطه ليلائم احتياجاتك أيضًا - باستخدام نسبة مئوية أو عدد بكسل ثابت.

.wpcf7-textarea {

width: 85%;

}

يمكنك أيضًا ضبط عرض الحقول الأخرى عن طريق ضبط محدد فئة الإدخال .

.wpcf7 input {

width: 50%;

}

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

.wpcf7-text {
width: 50%;
}

بعد كل التغييرات المذكورة أعلاه ، تمكنت من تصميم النموذج الذي تراه أدناه.

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

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

مع وجود أجزاء CSS هذه في مكانها الصحيح ، سيبدو كل نموذج تم إنشاؤه باستخدام نموذج الاتصال 7 مثل الصورة النهائية أعلاه. ولكن ماذا يحدث عندما تريد أن يبدو شكل معين مختلفًا عن الأشكال الأخرى؟

كيفية تصميم نموذج معين

قد يكون الحصول على معرّف CSS المحدد المطلوب لإجراء تعديلات على النمط على نموذج معين أمرًا مزعجًا بعض الشيء ، ولكنه ممكن مع القليل من الترقيع.

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

بعد ذلك ، باستخدام ميزة فحص عنصر Google Chrome أو شيء مشابه في متصفح آخر ، ألق نظرة على رمز النموذج. باستخدام هذا ستجد معرف النموذج الكامل.

في حالتي ، كان رقم الهوية في الكود القصير الخاص بي هو 4407 . تبين أن المعرف الكامل هو wpcf7-f4407-p4405-o1 . مما يعني أنه يمكنني إجراء المزيد من التعديلات ، فقط على هذا النموذج المحدد ، باستخدام الكود أدناه مع معايير مختلفة تختلف عن الإعدادات على مستوى الموقع.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

كيفية تصميم حقول معينة

يمكنك أن تفعل الشيء نفسه مع حقول محددة. بدلاً من تعقب فئة أو معرف CSS معين في متصفحك ، كل ما عليك فعله هو إضافته في منشئ النموذج.

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

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

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

كيفية إنشاء تخطيطات نموذج مخصصة لخانات الاختيار والأزرار الشعاعية

بشكل افتراضي ، يتم عرض مربعات الاختيار ونصف القطر من اليسار إلى اليمين.

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

لعرض مربعات الاختيار أو الأزرار الشعاعية من أعلى إلى أسفل وعلى اليسار ، استخدم هذا.

.wpcf7-list-item {
display: block;
}

لعرض مربعات الاختيار والأزرار الشعاعية من أعلى إلى أسفل وعلى اليمين ، استخدم هذا. تأكد أيضًا من أنه عند إنشاء العلامة لهذا الخيار ، فإنك تختار مربع الاختيار "التسمية أولاً".

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

نصيحة إضافية: كيفية إزالة عناوين الحقول واستخدام نص العنصر النائب بدلاً من ذلك

لا يتطلب هذا التلميح استخدام CSS مثل الآخرين أعلاه ، بل يتطلب تعديلًا بسيطًا للترميز المستخدم في منشئ نموذج الاتصال 7.

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

إذا كان هذا هو الحال على موقعك ، فكل ما عليك فعله هو حذف العناوين الموجودة في منشئ النماذج وإضافة نص التعطيل كما فعلت في المثال أدناه.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

والنتيجة هي شكل أنظف مع فوضى أقل.

ختاما

آمل أن أكون قد أوضحت في الأمثلة أعلاه أن المكون الإضافي لنموذج الاتصال 7 قابل للتخصيص بدرجة كبيرة. صحيح أنه يتطلب القليل من التعديل ولكن لمكوِّن إضافي مجاني قد يكون متوقعًا.

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

هل لديك أي نصائح نمط 7 نموذج الاتصال خاصة بك؟ أي مفضلات استخدمتها وتريد مشاركتها؟ اترك لنا سطر في التعليقات أدناه!

المادة المصغرة عبر ديمتري Lemon5ky // shutterstock.com