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

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

جلست لفترة طويلة وفكرت في ما هي عيوب البرنامج المساعد ولم يتبادر إلى ذهني أي شيء، ولكن هذا الإبداع لديه الكثير من المزايا.

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

1. واضحة وسهلة التكوين. سيتمكن الشخص الذي يواجه هذا البرنامج المساعد لأول مرة من اكتشافه دون أي مشاكل.
2. إنشاء عدد كبير من الأشكال المختلفة ودمجها في الموقع.
3. يتم إدراج النموذج باستخدام رمز قصير على الصفحة وفي أي مكان على الموقع. أنها مريحة للغاية.
4. دعم اللغة الروسية واللغات الأخرى.
5. دعم لطلبات اياكس.
6. الحماية من البريد العشوائي باستخدام سؤال نصي أو كلمة التحقق. بالنسبة إلى رمز التحقق، ستحتاج إلى تثبيت كلمة التحقق البسيطة حقًا.
7. تخصيص مظهر النموذج باستخدام أنماط CSS.
8. التكامل مع خدمة Akismet للحماية من البريد العشوائي.

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

هيا نبدأ!

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

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

إعداد المكون الإضافي Contact Form 7 وإنشاء نموذج الملاحظات.

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

إنشاء نموذج.

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

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

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

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

حقل "إنشاء علامة".

على اليسار يمكنك رؤية الحقول التي تمت إضافتها بالفعل إلى النموذج.

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

يبدأ.

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

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

لتكوين الرسالة، حدد " حقل النص"ونحن نفعل ذلك أيضًا عن طريق القياس مع كل ما هو موضح أعلاه.

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

حقل "السؤال".

وآخر شيء نحتاجه هو " يرسل"، يمكنك ترك تلك الموجودة في القالب أو في قائمة "إنشاء علامة"، حدد "زر إرسال". القالب جاهز اضغط على " يحفظ”.

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

وهنا ما حصلت عليه:

يجب أن يكون لديك شيء مماثل.

إعداد مستلمي النماذج والرسائل

ننزل قليلاً أسفل قالب النموذج ونرى إعدادات المستلم.

1. حقل الوجهة. أدخل عنوان البريد الإلكتروني الذي سيتم إرسال الرسائل منه إلى الزوار الذين يملؤون النموذج.
2. حقل المرسل. بدلاً من<>، نقوم باستبدال الرموز القصيرة الخاصة بنا (الأسماء التي تم تقديمها للحقول). يمكنك مشاهدتها أعلاه. في حالتي سيكون<>.
3. حقل الموضوع. أكتب دائمًا نموذج التعليقات وأشير إلى موقع الويب.
4. حقل قالب الرسالة. هنا يمكنك عرض ما تشتهيه نفسك. على سبيل المثال، أقوم بإنشاء الحقل "من":<>والتفاصيل الهاتف : , الرسائل ..
5. الحقول المتبقية فارغة.

لا تنس أن تحفظ في النهاية.

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

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

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

أما بالنسبة لأنماط CSS فيمكن إضافتها إلى ملف CSS الرئيسي style.css. باستخدام firebag، يمكنك عرض معرف وفئات الحقول وتعيين الأنماط المناسبة لهم.

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

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

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

لقطات الشاشة

تثبيت

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

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

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

المشاركون والمطورون

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

مشاركون

سجل التغيير

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

5.1.4

• reCAPTCHA: تقديم الثوابت WPCF7_RECAPTCHA_SITEKEY وWPCF7_RECAPTCHA_SECRET.
• reCAPTCHA: تقديم خطافات التصفية wpcf7_recaptcha_sitekey وwpcf7_recaptcha_secret.
• إضافة معلمة الحالة $ إلى مرشح wpcf7_form_response_output.
• يولد رمزًا عشوائيًا عندما يكون المستخدم مستخدمًا مسجلاً.
• نقدم لك WPCF7_ContactForm::unit_tag()، وهي طريقة عامة تقوم بإرجاع علامة الوحدة.
• reCAPTCHA: يصدر رسالة مختلفة في سجل البريد العشوائي في الحالات التي يكون فيها رمز الاستجابة فارغًا.
• علامة الموافقة: دعم خيار label_first في علامة الموافقة على النموذج.

5.1.3

• تم إصلاح الخلل الذي أدى إلى عدم القدرة على إلغاء تحديد خيار في علامة تبويب البريد.

5.1.2

• الاتصال المستمر: تم تقديم محدد قائمة جهات الاتصال.
• الاتصال المستمر: تم تقديم إعداد إضافي، Constant_contact.
• reCAPTCHA: تم تقديم خطافات مرشح wpcf7_recaptcha_actions وwpcf7_recaptcha_threshold.

5.1.1

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

5.1

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

5.0.5

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

5.0.4

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

5.0.3

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

5.0.2

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

5.0.1

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

5.0

• الإعدادات الإضافية: تمت إزالة on_sent_ok وon_submit.
• الإعداد الإضافي الجديد: Skip_mail.
• Flamingo: يتغير عنوان القناة الواردة مع عنوان نموذج الاتصال المقابل.
• أحداث دوم. يمكن الوصول إلى كائن استجابة API بالكامل من خلال خاصية events.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_last_name]، [_user_nickname]، و [_user_display_name].
• خطافات التصفية الجديدة: wpcf7_upload_file_name، وwpcf7_autop_or_not، وwpcf7_posted_data_($type)، وwpcf7_mail_tag_replaced_($type)
• ميزات علامة النموذج الجديدة: حاوية التحكم الصفرية وغير المخصصة للبريد

لتسقيف التسقيف في سان بطرسبرج.

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

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

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

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

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

المكونات الإضافية لنموذج التعليقات في WordPress.

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

1 ) لذلك، أقدم لك البرنامج المساعد Usernoise.

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

تثبيت وتكوين البرنامج المساعد Usernoise.

5 ) تثبيت وتكوين المكون الإضافي Contact Form 7.

كيفية عمل نموذج ملاحظات لـ WordPress باستخدام طرق أخرى؟

قد تتفاجأ، لكنني وصفت فقط الجزء الأصغر من كيفية إنشاء نموذج التعليقات لـ WordPress. ومهما حاولت جاهداً احتضان الضخامة، لم أستطع. لذلك، يمكن إنشاء نموذج الملاحظات من خلال عدد من المكونات الإضافية التالية: Fast Secure Contact Form، Contact Form by Contact ME، Visual Form Builder، nForms – WordPress Form Builder، Mapped Contact Form، Ninja Forms. بالإضافة إلى ذلك، هناك أيضًا خدمات متنوعة، مثل main-ip.ru وsmartoforms.ru.

هذا كل شيء، إذا كان لديك أي أسئلة، اسأل.

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

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

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

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

نموذج المثال.

2. صانع النموذج

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

نموذج المثال.

3. نموذج اتصال سريع وآمن

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

نموذج المثال.

4. منشئ النماذج المرئية

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

نافذة الإعدادات.

نموذج المثال.

5. نماذج الاتصال البقعة

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

نموذج المثال.

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

كل شيء ليس معقدًا في الواقع، لكنك ستحتاج إلى مكون إضافي آخر بتأثير FancyBox، أنا شخصيًا أحب هذين المكونين الإضافيين: Easy FancyBox أو FancyBox for WordPress، هناك العديد من المكونات الإضافية المشابهة، ولكن أيًا منها يناسب تمامًا ويسمح لك أيضًا بفتح الصور في نافذة منبثقة.

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

يتم إدراج الكود في قالب موقع الويب في ملفات .php!

الكود مع نموذج الاتصال المنبثق المثبت في كود ملف القالب:

اطلب مكالمة

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

كود مع نموذج اتصال منبثق مثبت في محرر النشر المرئي (في وضع النص) في لوحة إدارة الموقع:

اطلب مكالمة

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

دعونا نلقي نظرة على هذا الرمز.

هذا هو رمز الزر الذي يفتح النافذة مع النموذج، يمكنك تعيين أي أنماط لهذا الزر وإدراجه في أي مكان في القالب:

اطلب مكالمة

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

في هذا الكود، يتم استدعاء النموذج نفسه بواسطة هذه الوظيفة:

مكان كتابته - اعرض الرمز القصير لنموذج الاتصال، تتم الإشارة إلى الرمز القصير في نموذج الاتصال نفسه عند إنشائه:

لاستدعاء عدة نماذج في صفحة واحدة، يلزمك استخدام معرفات مختلفة لاستدعاء النموذج.

مثال على استدعاء نموذجين للتعليقات في نافذة منبثقة:

نموذج الاستدعاء 1

نموذج الاستدعاء 2

في هذه الحالة، لاستدعاء نماذج متعددة، انتبه إلى هذه الأجزاء من الكود:

.. وبالنسبة للنموذج الثاني: ... وما إلى ذلك وهلم جرا.

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

يشترك

يمكنك استخدام هذا الرمز لنموذج الاشتراك الخاص بك عن طريق تغيير عنوان الخلاصة http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed إلى عنوانك فقط.

نقطة مهمة!لكي يتمتع النموذج بمظهر جميل، تحتاج إلى تعيين أنماط العرض الخاصة بك له. من الأفضل تغليف النموذج الخاص بك في div أثناء إنشاء النموذج في CF7.

كيفية إغلاق نافذة نموذج الملاحظات (fancybox) بعد الإرسال الناجح

نضيف هذا الرمز إذا كنا نستخدم مكونًا إضافيًا مع Fancybox، على سبيل المثال Easy Fancybox.