نموذج الاتصال 7 أنماط جاهزة وورد.

كان من الضروري الحصول على شكل جميل للمكوِّن الإضافي ، وكانت النماذج مطلوبة بالأمس ، وكان من الصعب جدًا تحديد الأنماط ووصفها يدويًا ، وبالنسبة للعديد من المشاريع لا تتناسب مع الميزانية. لذلك ، بحثت عن مكونات إضافية مثيرة للاهتمام لإعداد نماذج اتصال css بسرعة.

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

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

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

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

"INPUTS AND LABELS SETTINGS" - خلفية حقول الإدخال ، ولون خط الإدخال ، والخط (القائمة ليست كبيرة ولا يكاد يوجد أي شيء مع السيريلية) وحجمها. لون حدود الحقل ، النمط (صلب متقطع ، إلخ) ، سمك ، تقريب. خط الإدخال والحجم. معلمات الهامش بالبكسل - الارتفاع / العرض ، الحشو. خط التسمية والنمط والحجم واللون.

"إعدادات زر الإرسال" - إعدادات زر إرسال النموذج. الإعدادات المتاحة هي حجم الزر ، والتقريب ، واللون ، ونوع الحدود واللون.

مشاكل في الاستخدام.

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

حتى الآن ، باستثناء كيفية تغيير الأنماط يدويًا بشكل أو بآخر ، لم تنجح ... لم تحدث معجزة.

ملاحظة مهمة!تم تحديث المكون الإضافي مؤخرًا وتغير شيء ما في الإعدادات بشكل كبير ، لذلك تحتاج إلى البحث والاختبار.

يمكن لنموذج الاتصال 7 إدارة العديد من نماذج الاتصال حيث يمكنك تخصيص محتوى النماذج والبريد بمرونة باستخدام ترميز بسيط إلى حد ما. تحتوي النماذج على دعم مضمّن لتقديم Ajax و CAPTCHA وفلتر البريد العشوائي من Akismet والمزيد.

التوثيق والدعم

لقطات

تثبيت

1. قم بتحميل مجلد contact-form-7 بأكمله إلى الدليل / wp-content / plugins /.
2. قم بتنشيط المكون الإضافي من صفحة الملحقات في لوحة معلومات WordPress الخاصة بك.

في قائمة لوحة تحكم WordPress ، ستجد علامة التبويب "التعليقات".

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

الأعضاء والمطورين

"نموذج الاتصال 7" هو مشروع مفتوح المصدر. ساهم المساهمون التاليون في تطوير البرنامج المساعد:

أعضاء

التغيير

انظر الإصدارات لمزيد من المعلومات.

5.1.3

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

5.1.2

• جهة اتصال دائمة: عرض محدد قائمة جهات الاتصال.
• الاتصال المستمر: تم إدخال اتصال ثابت إضافي.
• reCAPTCHA: إدخال wpcf7_recaptcha_actions و wpcf7_recaptcha_threshold filter hooks.

5.1.1

• reCAPTCHA: يغير الاستجابة إلى رموز الاستجابة الفارغة.

5.1

• تم تقديم وحدة تكامل الاتصال الدائم.
• وحدة reCAPTCHA المحدثة لدعم reCAPTCHA v3.
• يضيف قواعد نمط الوضع الداكن.

5.0.5

• تم إصلاح مشكلة عدم التطابق بين get_data_option () و get_default_option () في فئة WPCF7_FormTag.
• يكتم أخطاء PHP التي تحدث عند مكالمات إلغاء الارتباط ().
• قدم wpcf7_is_file_path_in_content_dir () لدعم ثابت UPLOADS.

5.0.4

• يعيّن بوضوح وسيطة power_type في استدعاء register_post_type () لإصلاح مشكلة تصعيد الامتياز غير المصرح به.
• إرفاق ملف محلي - يُمنع تحديد مسارات مطلقة للملفات الموجودة خارج دليل wp-content.
• مدقق التكوين - يضيف عنصر اختبار لاكتشاف الإعدادات غير الصحيحة لملف المرفقات.
• تم إصلاح خطأ في ميزة التوافق مع الإصدارات السابقة لجافا سكريبت للمتصفحات القديمة التي لا تدعم سمة العنصر النائب HTML5.
• مربع اختيار الموافقة - لتعطيل وظيفة عدم التخزين لعلامة النموذج.

5.0.3

• CSS: يطبق نمط المؤشر "غير مسموح به" لإرسال الأزرار في حالة "التعطيل".
• خانة اختيار القبول: تنقح واجهة مستخدم منشئ العلامات للتشجيع على استخدام خيارات أفضل فيما يتعلق بحماية البيانات الشخصية.
• يقدم وظيفة wpcf7_anonymize_ip_addr ().
• تم تقديم Agreement_for: خيار تخزين لجميع أنواع علامات النموذج.

5.0.2

• تمت إضافة قسم إشعارات الخصوصية إلى ملف readme.txt.
• تم تحديث محتوى المعلومات الوصفية.
• استخدم get_user_locale () بدلاً من get_locale () حيث يكون ذلك أكثر ملاءمة.
• مربع اختيار القبول: إعادة تعيين حالة تعطيل أزرار الإرسال بعد الإرسال الناجح.

5.0.1

• تم إصلاح الاستخدامات غير الصحيحة لـ _n ().
• التحقق من صحة التكوين: تم إصلاح العدد غير الصحيح للتنبيهات في لوحة علامة التبويب "الإعدادات الإضافية".
• التحقق من صحة التكوين: تم إصلاح المعالجة غير الملائمة لعلامة البريد الخاصة [_site_admin_email] في حقل عنوان البريد من.
• مربع اختيار القبول: تم تطبيق سمات الفئة والمعرف المحددة على عنصر HTML غير صحيح.
• التحقق من صحة التكوين: عندما يكون هناك رأس بريد إضافي لصناديق البريد مثل Cc أو Reply-To ، ولكن يحتوي على قيمة فارغة محتملة ، فسيتم إرجاع الخطأ "تم استخدام بناء جملة غير صالح لصندوق البريد".
• حدد بشكل صريح المعامل الرابع لـ add_action () لتجنب تمرير قيم المعلمات غير المقصودة.
• تحقق مما إذا كان الدليل الهدف فارغًا قبل إزالة الدليل.

5.0

• الإعدادات الإضافية: تمت إزالة on_sent_ok و on_submit.
• إعداد إضافي جديد: skip_mail
• Flamingo: يتغير عنوان القناة الواردة بالتزامن مع تغيير عنوان نموذج الاتصال المقابل.
• أحداث DOM: اجعل كائن استجابة API بأكمله يمكن الوصول إليه من خلال الخاصية event.detail.apiResponse.
• بريد HTML: يضيف سمات متعلقة باللغة إلى رأس HTML.
• تحميل الملف: يعيّن سمة القبول لحقل التحميل.
• يقدم فئة WPCF7_MailTag.
• يسمح لك بإحباط محاولة إرسال بريد باستخدام ربط الإجراء wpcf7_before_send_mail. أيضًا ، يمكنك تعيين الحالة المخصصة والرسالة عبر معترض الإجراءات.
• مربع اختيار القبول: يسمح بتحديد بيان الشروط في جزء محتوى علامة النموذج.
• مربع اختيار القبول: يدعم الخيار الاختياري.
• علامات بريد خاصة جديدة: [_site_title] ، [_site_description] ، [_site_url] ، [_site_admin_email] ، [_invalid_fields] ، [_user_login] ، [_user_email] ، [_user_url] ، [_user_first_name] ، [_user_] ، اسم_المستخدم [_user_display_name]
• أدوات ترشيح جديدة: wpcf7_upload_file_name و wpcf7_autop_or_not و wpcf7_posted_data _ (نوع $) و wpcf7_mail_tag_replaced _ (نوع $)
• ميزات علامة النموذج الجديدة: حاويات صفرية وليس للبريد

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

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

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

وصف البرنامج المساعد

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

بالإضافة إلى ذلك ، يمكنك توصيل المكوّن الإضافي Akismet anti-spam به ، وتنفيذه ، وكذلك استخدام تعدد اللغات. هذا رائع في رأيي! :-)

تثبيت البرنامج المساعد 7 نموذج الاتصال

يتم تثبيت المكون الإضافي بالطريقة القياسية في WordPress. انتقل إلى قسم "الإضافات" - "إضافة جديد" ، وأدخل الاسم Contact Form 7 وقم بتثبيته من المستودع. لا تنس التفعيل فور التثبيت.

تخصيص نموذج الاتصال 7

بعد تنشيط المكون الإضافي ، سيظهر عنصر جديد "جهات الاتصال (CF7)" في قائمة WordPress الرئيسية ، وهذا هو المكان الرئيسي لإعداد نماذج الملاحظات الخاصة بك. عدد النماذج غير محدود.

قائمة النماذج الحالية متاحة في قسم "نماذج الاتصال":

يمكنك أيضًا نسخ الرمز المختصر المطلوب لصقه في صفحة أو منشور:

إضافة نموذج ملاحظات جديد

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

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

لكن يمكنك اختيار أي لغة متاحة من القائمة:

بعد النقر فوق الزر "إضافة جديد" ، سيظهر مُنشئ النموذج.

تغيير اسم النموذج

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

بعد ذلك ، سيظهر حقل نص ندخل فيه اسمًا مع وصف:

بمجرد تحديث الصفحة ، سترى الرسالة التالية:

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

تغيير قالب النموذج

قالب النموذج هو تعليمات برمجية HTML عادية تحدد شكل النموذج وأسلوبه. بشكل افتراضي ، يحتوي على 4 حقول (الاسم والبريد الإلكتروني والموضوع والرسالة) وزر إرسال النموذج. تبدو هكذا:

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

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

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

كيفية إضافة حقل جديد إلى نموذج

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

عند النقر فوقها ، ستظهر قائمة ضخمة من الحقول الإضافية المحتملة:

عليك فقط اختيار نوع الحقل المطلوب وتنفيذ عدد من الخطوات البسيطة.

لا تخف. الإعدادات ، على الرغم من أنها تبدو مخيفة ، إلا أنها في الواقع بسيطة للغاية :-)

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

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

يعد حقل "الاسم" هو الأهم ، حيث يتم استخدامه في كل من قالب النموذج وقالب البريد الإلكتروني.

لكن أثناء استخدام هذا المكون الإضافي ، لم أضطر أبدًا إلى تغيير أو تعيين قيم هذه السمات. على الأرجح لن تحتاجه أيضًا. لكن لا بد لي من إخبارهم وتقديمهم :-)

تحتوي جميع حقول النص في مُنشئ النموذج لدينا على حقول إضافية بحجم الحقل نفسه والحد الأقصى لطول القيمة ، وهنا هي:

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

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

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

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

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

والصق في حقل النص أدناه في "نموذج البريد الإلكتروني":

على سبيل القياس ، تمت إضافة مجالات أخرى. كل شيء بسيط وواضح :-)

نموذج المستلم والخطاب

الآن دعنا نلقي نظرة على الإعدادات التي يتم أخذها في الاعتبار عند إرسال رسالة. في حالتنا ، هذا هو المستلم (غالبًا ما تكون أنت) ونموذج الخطاب الذي سيتم إرساله إلى عنوان البريد الإلكتروني المحدد بعد إرسال الرسالة.

بادئ ذي بدء ، تحتاج إلى تحديد المرسل إليه ، الذي سيتلقى بريده الإلكتروني رسائل من نموذجنا. افتراضيًا ، يتم هنا استبدال عنوان البريد الإلكتروني من إعدادات WordPress.

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

حسنًا ، إذن عليك فقط ترتيب قالب الرسالة نفسها:

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

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

إعدادات الرسالة

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

مشاكل معروفة

يحدث أنه عند استخدام عناصر تحكم غير قياسية ، مثل البريد الإلكتروني أو عنوان url ، سيكون مظهر العناصر الفردية على الصفحة مختلفًا. على سبيل المثال ، ألق نظرة على حقل "عنوان موقعك" في النموذج نفسه:

لا ترى؟ وسأريك عن قرب:

بشكل عام ، تكمن المشكلة في أن مظهر هذه الحقول يختلف بصريًا عن الحقول النصية القياسية. قارن مع حقل "اسمك" ، ستفهم كل شيء على الفور.

هناك حلان هنا. الأول هو إضافة الأنماط المناسبة إلى ملف style.css الخاص بالنسق الخاص بك ، أو تغيير نوع عنوان url إلى نص في قالب النموذج ، فسيكون كل شيء على ما يرام:

خاتمة

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

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

إذا كنت تريد أن تشكرني على المادة - يمكنك فعل ذلك هنا :-)

إذا وجدت خطأً ، فيرجى تحديد جزء من النص والنقر السيطرة + أدخل.