كيفية تغيير نمط نموذج الاتصال في WordPress

هل تريد تغيير نمط نموذج الاتصال الخاص بك في WordPress؟ ثم هذا الدليل هو بالنسبة لك! ستتعلم كيف يمكن أن يكون تصميم نموذج WordPress سهلاً للغاية! اكتشف المزيد.

وقت القراءة التقريبي : 6 دقائق

لديك فرصة واحدة فقط لترك انطباع أول.

وجذب انتباه زوارك بشكل جميل هو وسيلة لإحداث انطباع ممتاز .

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

لذلك ، إذا كنت مستعدًا للانتقال من الأساسي إلى الجميل باستخدام النماذج الخاصة بك ، فهذا الدليل مناسب لك.

سنوضح لك طريقتين لتغيير نمط نموذج اتصال WordPress الخاص بك بسهولة!

دعنا ندخله.

كيفية تغيير نمط نموذج الاتصال الخاص بك في WordPress

كما ذكرنا ، هناك طريقتان لتخصيص نمط النموذج الخاص بك

أي واحد تختاره سيعتمد على مستوى راحتك مع الترميز. لكننا سنعرض لك كلتا الطريقتين ، حتى تعرف جميع الخيارات المتاحة.

الطريقة الأولى: قم بتحرير رمز النموذج الخاص بك في WordPress

لذا ، تريد الغوص في مياه الترميز ، أليس كذلك؟

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

الخطوة 1: احصل على المعرف أو فئة النموذج الخاص بك

للبدء ، تحتاج إلى الحصول على المعرف أو فئة النموذج الخاص بك.

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

سينزلق الشريط الجانبي لأدوات مطوري Google ، ويمكنك عرض أقسام الكود المختلفة لنموذجك.

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

على سبيل المثال ، إذا أردنا تغيير لون الخلفية لقالب نموذج اتصل بنا ، فسنجد الجزء الأبعد من التعليمات البرمجية. في هذه الحالة ، يكون عنصر div مع فئة api-form-box .

يمكننا حتى اختبار الشكل الذي سيبدو عليه من وحدة التحكم هذه.

إذا نقرنا بزر الماوس الأيمن على div ثم نقرنا على إضافة سمة ، فيمكننا إضافة نمط لون الخلفية.

اضغط على Enter ، وستظهر التغييرات على الفور في النافذة.

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

بعد ذلك ، توجه إلى مسؤول WordPress الخاص بك لإجراء التغييرات اللازمة في كود CSS.

الخطوة 2: قم بتغيير CSS في لوحة إدارة WordPress الخاصة بك

الآن بعد أن لاحظت بعض الأشياء التي تريد تغييرها في نموذجنا ، توجه إلى مسؤول WordPress للبدء.

بعد ذلك ، في الشريط الجانبي لـ WordPress الخاص بك ، اختر المظهر → تخصيص → CSS إضافي لتصميم النموذج.

هنا يمكنك إدخال فئات CSS لنموذجك.

على سبيل المثال ، قررنا تغيير بعض الأشياء في نموذجنا ، لذا إليك الرمز الذي أدخلناه:

لوضع علامة على الفصل ، يجب عليك تضمين ملف . قبل اسم الفصل. للحصول على معرّف ، يمكنك وضع # .

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

على سبيل المثال الخاص بنا ، سيتم تقسيمها على النحو التالي:

• .api-form-box يغير لون الخلفية إلى اللون الأزرق الفاتح
• .frm-button-submit هو تغيير خلفية زر الإرسال إلى اللون الأصفر والنص إلى الأسود
• .frm-submit هو توسيط الزر في النموذج

مع هذه التغييرات ، سيبدو شكلنا كما يلي:

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

هناك بعض العيوب لهذه الطريقة.

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

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

الطريقة 2: استخدام منشئ النماذج مع المصمم البصري

البرمجة هي مهارة تستغرق وقتًا لتتعلمها.

والكثير من الناس ليس لديهم الوقت للتعلم. إذا كان الأمر كذلك ، فإن منشئ النماذج هو أفضل خيار لك.

وواحد نوصي به هو الأشكال الهائلة .

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

بغض النظر عن نوع النموذج الموجود على موقع الويب الخاص بك ، يمكن لـ Formidable التعامل معه بسرعة.

لا ترميز ولا متاعب - مجرد بناء شكل سهل.

هناك بناة نماذج أخرى للاختيار من بينها (WPForms و Gravity Forms والمزيد) ، لكنهم لا يقدمون قدرات التصميم التي تأتي مع Formidable. وهذا يعني أنك تحصل على مزيد من القوة على شكل الشكل الخاص بك.

نوصي بمراجعة خطط Formidable المميزة أيضًا.

في حين أنه ليس مطلوبًا منهم تصميم النموذج الخاص بك ، فإنك تحصل على العديد من الميزات الرائعة:

• الوصول إلى قوالب تصميم النماذج
• القدرة على تخصيص صورة الخلفية الخاصة بك
• المزيد من قوالب النماذج لبدء النموذج بشكل أسرع
• وأكثر بكثير

لذلك ، بمجرد تثبيت Formidable وتنشيطه ، ستكون جاهزًا للبدء.

احصل على نماذج هائلة الآن!

إنها مجرد ثلاث خطوات بسيطة لتصميم النموذج الخاص بك وجعله مباشرًا على موقعك:

1. قم بإنشاء نموذج
2. صمم النموذج
3. اعرض النموذج

الخطوة 1: قم بإنشاء نموذج

لتصميم نموذج ، فأنت بحاجة إلى نموذج لأسلوب ، أليس كذلك؟

لذلك ، توجه إلى مسؤول WordPress الخاص بك وانتقل إلى Formidable → Forms → Add New .

يمكنك اختيار أحد القوالب العديدة المبنية مسبقًا (ميزة مميزة) أو نموذج فارغ للبدء.

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

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

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

إذا كنت تقوم بإنشاء نموذج اتصال ، فمن الأفضل إضافة ما يلي:

• حقل نصي لاسم الزائر
• أرسل بريدًا إلكترونيًا لمعرفة طريقة الاتصال بهم
• فقرة للرسالة التي يريدون إضافتها

بمجرد إعداد نموذج الاتصال الخاص بك ، انقر فوق تحديث لحفظ التغييرات الخاصة بك.

بعد ذلك ، سوف نتوجه إلى علامة التبويب "النمط" .

الخطوة 2: تصميم النموذج

ضمن علامة التبويب "النمط" ، سترى بعض الخيارات.

يمكنك اختيار أحد قوالب التصميم المعدة مسبقًا لتوفير الوقت (قسط) أو البدء في تصميم قالب خاص بك.

لتصميم نمط خاص بك ، انقر فوق النقاط الثلاث بجوار Formidable Style وانقر فوق Edit . إن Formidable Style هو النمط الافتراضي في Formidable.

سينقلك هذا إلى مصمم Formidable Style الخاص بنا ، حيث يمكنك تخصيص النموذج الخاص بك.

يمكنك تغيير حجم ولون ملصقاتك ، وحقول الإدخال ، وحجم الخط ، ولون الخلفية ، وحتى تحميل صورة خلفية!

على سبيل المثال ، بالنسبة لموقع ويب اختباري يسمى Cheap n 'Cheesy ، قمنا بتصميم نموذج يعكس النشاط التجاري:

الاحتمالات لا حصر لها بالنسبة لك ونموذج الاتصال الخاص بك!

لذلك ، انقر فوق تحديث لحفظ التغييرات بمجرد تخصيص النموذج الخاص بك.

الآن علينا فقط عرضها!

الخطوة 3: اعرض النموذج

عرض النموذج الخاص بك أسهل من إنشائه.

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

بعد ذلك ، ابحث عن قالب Formidable Forms ، وأضفه واختر النموذج الخاص بك من القائمة المنسدلة.

أخيرًا ، قم بتحديث منشورك أو صفحتك ، وسيظهر النموذج الخاص بك على صفحتك!

قلنا لك أنه كان سهلاً ، كما هو الحال مع كل شيء مع Formidable.

احصل على نماذج هائلة الآن!

هل أنت جاهز لتصميم نماذج اتصال WordPress على موقعك؟

إن امتلاك القدرة على تصميم نماذج الاتصال هو شيء تحتاجه وليس تريده.

قد ترى عمليات بحث عن المكون الإضافي لنموذج الاتصال 7 يتضمن التخصيص الخاص بهم. أشياء مثل Contact Form 7 CSS أو نوع الإدخال النصي في WPCF7 أو نوع الإدخال عبر البريد الإلكتروني باستخدام WPCF7.

لا شيء من ذلك ضروري مع هاتين الطريقتين. وقد علمك هذا المنشور كيفية تخصيص نموذج اتصال في WordPress ، بحيث يبدو النموذج الخاص بك بالطريقة التي تريدها. سواء أدخلت HTML أو CSS مخصصًا أو أكثر ، أو استخدم Formidable Forms. لن تخيب أملك.

لذا ، لا تنتظر أكثر من ذلك. احصل على نماذج هائلة وابدأ في تصميم النماذج الخاصة بك!

وتابعنا على Facebook و Twitter و YouTube لمزيد من النصائح والحيل الرائعة!

اقرأ المزيد من مدونة Formidable

• أشكال هائلة 6.0! قوالب الأنماط وإجراء نموذج التأكيد + المزيد
  اقرأ أكثر

  Jotform vs Typeform vs Formidable Forms [مقارنة]
  اقرأ أكثر

  كيفية استخدام نموذج اتصال WordPress لإعادة التوجيه بعد الإرسال
  اقرأ أكثر

هل تعلم أن Formidable Forms هي واحدة من أسرع المكونات الإضافية لبناء نماذج WordPress المتوفرة اليوم؟ إذا لم تكن تستخدمه بالفعل ، فابدأ باستخدام المكون الإضافي المجاني أو الإصدار الاحترافي كامل الميزات!