كيفية عمل نموذج الاتصال 7 على الصورة. جميع الحقول (العلامات) في النموذج. يعمل حقل إدخال النص لـ CAPTCHA على Internet Explorer، ولكن ليس على Firefox. غير قادر على إدخال الرمز

(اخر تحديث: 19.05.2019)

تحياتي عزيزي القارئ! اليوم سأوضح لك كيفية إنشاء نموذج تعليقمع مؤلف موقع ويب/مدونة في WordPress، باستخدام المكون الإضافي الشهير Contact Form 7 (أكثر من 5 ملايين عملية تثبيت). المدرجة في وظيفة : الإعداد الصحيحنموذج الاتصال 7, الحماية من البريد العشوائي، وكيفية التغيير والتكوين مظهرنماذج. وأشار أيضًا إلى الأسباب الرئيسية لعدم عمل نموذج الاتصال وعدم إرسال رسائل البريد الإلكتروني. .

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

أوه، الرسالة وصلت! نموذج الاتصال 7 أحسنت

لن أزعجك عزيزي القارئ بكل هذه الكتابة - فلنبدأ العمل. التثبيت والتكوين الصحيح للوحدة النمطية لـ WordPress - نموذج الاتصال 7.

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

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

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

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

كيفية تثبيت البرنامج المساعد

نموذج الاتصال رقم 1 بشكل افتراضي

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

المظهر: نموذج اتصال قياسي على موقع WordPress

إذا كنت تريد فقط عرضها أو التحقق منها أو تغييرها، أي إضافة حقول إضافية إليها، ثم انقر فوق "تغيير". لقطة الشاشة أعلاه.

يتم فتح صفحة تحرير نموذج الاتصال. البرنامج المساعد باللغة الروسية وبالتالي سيكون من السهل جدًا عليك معرفة ما هو. علامة تبويب قالب النموذج. يمكنك تغيير قالب النموذج ليناسب احتياجاتك.

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

تحرير نموذج الاتصال. تبويب الملف

سيتم فتح نافذة - منشئ علامات النموذج: ملف:

لإرفاق ملف تم تنزيله بالبريد، تحتاج إلى إدراج علامة ()

يفرض نموذج الاتصال 7 حدودًا افتراضية لنوع الملف وحجم الملف. عندما لا تقوم بتعيين خياراتك، فإن امتدادات الملفات الافتراضية هي: jpg، jpeg، png، gif، pdf، doc، docx، ppt، pptx، odt، avi، ogg، m4a، mov، mp3، mp4، mpg، wav، و ومف. أ الحجم المسموح بهحجم الملف 1 ميجابايت (1048576 بايت). انقر فوق الزر "إدراج علامة":

يتم إدراج علامة الملف في قالب النموذج

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

زر تحديد الملف في نموذج الاتصال

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

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

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

نضع نموذج الاتصال على صفحة منفصلة من الموقع/المدونة

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

صفحة جديدة مع نموذج الاتصال

إذا تمت إضافة صفحة جديدة تلقائيًا إلى القائمة، فاضبط "الطلب" على 1 أو 2 أو 3 (أيهما موجود في القائمة، سيتم عرض صفحة الاتصال). انقر فوق الزر "نشر". الجميع. مستعد. يمكنك أيضًا إضافة صفحة إلى القائمة يدويًا. الآن لديك نموذج للاتصال بمؤلف المدونة/الموقع.

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

هل تتلقى رسائل غير مرغوب فيها عبر نموذج الاتصال 7؟

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

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

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

تكامل Google reCAPTCHA v3: الحماية من البريد العشوائي

تكامل البرنامج المساعد مع خدمات recaptcha الأخرى

انقر فوق Setup Integration، ثم اتبع الرابط للحصول على مفاتيح ReCaptcha API:

reCAPTCHA هو خدمة جوجل

لبدء استخدام reCAPTCHA، تحتاج أولاً إلى تسجيل موقع WordPress الخاص بك. reCAPTCHA هي إحدى خدمات Google، لذا تحتاج إلى استخدامها حساب جوجل. قم بتسجيل الدخول إلى جوجل باستخدام حساب، واتبع الرابط https://www.google.com/recaptcha/admin. سترى نموذج تسجيل بسيط مثل:

تسجيل موقع ووردبريس. جودل reCAPTCHA

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

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

مظهر نموذج الاتصال - نموذج الاتصال 7 ستايل

أساليب نماذج التغذية الراجعة 7

يعد Contact Form 7 Style Plugin ملحقًا لـ Contact Form 7 الذي يجب تثبيته على موقع WordPress الخاص بك. يدعم الأنماط المخصصة التي يمكن إدارتها بسهولة من خلال لوحة الإدارة. هناك أيضًا قوالب محددة مسبقًا يمكن تنشيطها في إعدادات نموذج الاتصال 7. ستظهر علامة تبويب جديدة في إعدادات البرنامج المساعد الرئيسية - قالب نمط نموذج الاتصال 7. تخصيص المظهر:

قوالب النماذج الجاهزة

على سبيل المثال، قمت بتغيير المعيار الخارجي إلى هذا اللطيف:

ظهور نموذج الاتصال

لا تنس أنه يمكنك تعيين معلمات النمط المخصصة الخاصة بك:

يدعم المكون الإضافي الأنماط المخصصة التي يمكن إدارتها من خلال لوحة الإدارة

ختاماً:

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

لماذا لا يعمل نموذج الاتصال 7 (إرسال رسائل البريد الإلكتروني)؟

1. مشاكل مع الاستضافة الخاصة بك. من المهم ملاحظة أن إرسال واستقبال رسائل البريد الإلكتروني يعتمد إلى حد كبير على الخادم الذي يستضيف عليه موقع WordPress الخاص بك؛
2. تأكد من استخدام عنوان البريد الإلكتروني الصحيح للإرجاع؛
3. قد يتم اعتبار بريدك الإلكتروني بريدًا عشوائيًا؛
4. تتعارض المكونات الإضافية أو السمات مع نموذج الاتصال 7؛
5. تعارضات جافا سكريبت.

إذا لم تتمكن من إرسال رسائل البريد الإلكتروني من هذا البرنامج المساعد، فمن المحتمل أنك لا تستطيع إرسال رسائل البريد الإلكتروني من ووردبريس بشكل عام. إذا حدث شيء ما، أيها السادة، يمكنك الحصول على إجابات للأسئلة المتداولة حول تشغيل البرنامج المساعد على الصفحة https://contactform7.com/faq/.

أو في منتدى الدعمhttps://wordpress.org/support/plugin/contact-form-7/. اللغة الإنجليزيةلا يهم، كل شيء سيكون واضحًا مع ترجمة متصفحك المفضل.

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

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

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

قليلا عن ووردبريس

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

نقاط القوة والضعف في هذه المنصة لإنشاء مواقع الويب والترويج لها

مزايا هذا منصة البرمجياتهذه:

البساطة وكود مفتوح المصدر.

كمية هائلة من المعلومات المرجعية.

القدرة على تطوير أي مورد موضوعي على الإنترنت في أقصر وقت ممكن.

أداء عالي بدون إضافات برمجية إضافية (مكونات إضافية).

لكن العيوب في هذه الحالة هي ما يلي:

لن تتمكن مواقع الويب المبنية على WordPress من التعامل مع الأحمال الثقيلة.

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

ولماذا تحتاجها المواقع المبنية على منصة الووردبريس؟

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

التخصص "نماذج الاتصال 7"

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

إجراء تثبيت البرنامج المساعد

هناك ثلاث طرق لتثبيت المكونات الإضافية على منصة WordPress:

عن طريق تنزيل أرشيف ZIP من شبكة الويب العالمية و"تحميله" إلى الدليل المناسب لمورد الإنترنت.

استخدام أنواع مختلفة من عملاء FTP.

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

انتقل إلى لوحة إدارة ووردبريس.

ثم عليك الانتقال إلى قسم "المكونات الإضافية".

في النافذة التي تفتح، حدد "إضافة جديد".

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

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

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

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

نقوم بتحديث اللوحة الإدارية لنظام إدارة المحتوى ونجد Contact Form7 بين عناصرها. هذا هو الشرط للتثبيت الناجح لهذا البرنامج المساعد الشائع والوظيفي.



خوارزمية التكوين لـ "نماذج الاتصال 7"

يتكون إعداد نموذج الاتصال 7 من العناصر التالية:

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

في المرحلة التالية، حدد لغة النموذج وقم بتعيين اسمه.

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

احفظ التغييرات التي تم إجراؤها.

نقوم بإنشاء صفحة جديدة بالرمز الذي تلقيناه مسبقًا.

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

إنشاء نموذج جديد

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

انتقل إلى قائمة هذا البرنامج المساعد وحدد "النماذج".

في النافذة التي تفتح بعد ذلك، يجب عليك تحديد المربع المجاور لعنصر "نموذج الاتصال 1".

ثم، فوقه، في القائمة المنسدلة "الإجراءات"، حدد "حذف".

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

بعد ذلك، حدد عنصر القائمة: "إنشاء جديد" في لوحة الإدارة "Wordpress" "نموذج الاتصال 7".

في النافذة التي تفتح، في القائمة المنسدلة، حدد لغة الواجهة للنموذج المستقبلي - "الروسية". ثم انقر فوق الزر "إنشاء".

بعد ذلك، سيتم إنشاء الكود الأولي لنموذج الملاحظات الجديد لـ WordPress افتراضيًا. بعد ذلك، سوف تحتاج إلى تنفيذ عمليات مثل إعداد نموذج الاتصال 7.

قم بتعيين اسم النموذج

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



تحرير قالب "نماذج الاتصال 7".

يوجد في نفس النافذة التي تحمل اسم النموذج الذي تم إنشاؤه 4 علامات تبويب. الأول هو "القالب". بشكل افتراضي، يتم تشكيل 5 عناصر فقط هنا:

مكان لكتابة اسم الزائر لمورد الإنترنت.

حقل طلب عنوان البريد الإلكتروني صندوق بريدالزائر الذي طرح سؤالا.

حقل آخر يسمح لك بإدخال موضوع السؤال.

العنصر الأخير في النموذج بشكل افتراضي هو زر يسمى "إرسال".

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

تحديد أطوال الحقول وأكثر من ذلك

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

على سبيل المثال، من الضروري زيادة عدد الأحرف في اسم زائر أحد موارد الإنترنت إلى 55. افتراضيا هناك 40.

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

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



علامات تبويب النماذج الأخرى

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

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

يتيح لك إعداد نموذج الاتصال 7 لـ Wordpress إضافة عناصر الواجهة التالية إلى نموذج الملاحظات:

• حقل الاختبار هو عنصر واجهة عالمي يمكنك إدخال أي مجموعة من الأحرف فيه.

  البريد الإلكتروني - مكان لإدخال اسم صندوق البريد الإلكتروني.

  URL - حقل لإدخال عنوان صفحة الإنترنت.

  رقم الهاتف—يسمح لك بإدخال رقم هاتف بالتنسيق الدولي.

  يتيح لك عنصر "الرقم (التدوير)" إنشاء حقل إدخال لأي قيمة عددية (على سبيل المثال، عمر الزائر).

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

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

  في المقابل، فإن عنصر القائمة المنسدلة "حقل النص" مخصص لكتابة جزء النص من البريد الإلكتروني.

  العنصر التالي - "القائمة المنسدلة" - يسمح لك بتحديد المعلمة المطلوبة من قائمة ثابتة.

  لكن "CheckBoxes" مخصص لاختيار قيمة واحدة أو أكثر من قائمة معينة.

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

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

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

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

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

  العنصر الأخير - "زر الإرسال" - يسمح لك بإضافة عنصر الواجهة المقابل.

احفظ التغييرات التي تم إجراؤها

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



التحقق من النتيجة

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

إيجابيات وسلبيات البرنامج المساعد. خيارات بديلة

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



نتائج

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

سيساعدك المكون الإضافي Contact Form 7 في تنظيم التعليقات على موقع الويب الخاص بك.

يمكنك تنزيل المكون الإضافي Contact Form 7 على موقع WordPress الرسمي

يمكنك تنزيل البرنامج الإضافي Very Simple CAPTCHA على موقع WordPress الرسمي

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

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

حرك مؤشر الماوس فوق اسم النموذج وحدد "تحرير"

سيتم فتح نافذة لتغيير معلمات النموذج.

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

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

لإضافة حقول جديدة إلى النموذج، انقر على القائمة المنسدلة رقم 3 - "إنشاء علامة" وحدد العنصر المطلوب من القائمة المنسدلة.

• حقل النص
• بريد إلكتروني
• رقم التليفون
• الرقم (صندوق الدوران)
• الرقم (التمرير)
• حقل النص
• القائمة المنسدلة
• خانات الاختيار
• أزرار الراديو
• قبول
• سؤال
• اختبار CAPTCHA
• إرسال ملف
• زر الإرسال

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

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

حقل النص

من القائمة المنسدلة، حدد عنصر "حقل النص".

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

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

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

بريد إلكتروني

يستخدم لنقل عنوان صندوق بريد المرسل إلى النموذج

عنوان URL

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

رقم التليفون

يمكن إدخال الأرقام فقط في هذا الحقل

الرقم (صندوق الدوران)

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

تاريخ

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

حقل النص

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

القائمة المنسدلة

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

يجب وضع القائمة في حقل التحديد، كل عنصر في سطر جديد.

خانات الاختيار

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

أزرار الراديو

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

قبول

تأكيد لشيء ما. لنفترض أن هناك اتفاقًا على قبول الشروط الموضحة أعلاه.

سؤال

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

يضيف الحماية ضد البريد العشوائي إلى النموذج.

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

ليس عليك تغيير الإعدادات، فقط قم بنسخ ولصق سطرين قبل زر الإرسال.

إرسال ملف

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

زر الإرسال

تقديم النموذج. في الإعدادات، في قسم "الاختصار"، يمكنك إعطاء اسم الزر (إرسال، رد، إرسال :)

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

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

الكود مسؤول عن عرض النموذج وحقوله وعناصره الأخرى:

Wpcf7 ( لون الخلفية: #ddd; ) /*لون خلفية النموذج */ .wpcf7 input, .wpcf7 textarea( الحشو:5px; اللون:#1D1D1D; عائلة الخط:Arial, Helvetica, sans-serif; حجم الخط: 16 بكسل؛ ارتفاع الخط: 20 بكسل؛ الحد: 1 بكسل صلب #C7C7C7؛ ظل الصندوق: داخلي 2 بكسل 2 بكسل 8 بكسل #F9F9F9؛ -انتقال webkit: سهولة كل 0.2 ثانية؛ -انتقال moz: كل 0.2 ثانية سهولة؛ -o-انتقال : كل ​​0.2 ثانية سهولة؛ الانتقال: كل 0.2 ثانية سهولة؛ ) .wpcf7 .wpcf7-list-item( الحشو الأيسر: 0؛ الهامش الأيسر: 0؛ الهامش الأيمن: 25px؛ ) .wpcf7 .wpcf7-list-item الإدخال (الحدود: لا شيء؛ مساحة اليسار: 0؛ الهامش الأيسر: 0؛) .wpcf7 حدد (المخطط التفصيلي: لا شيء؛ حجم الخط: 16 بكسل؛ عائلة الخط: Arial، Helvetica، sans-serif؛) .wpcf7 الإدخال: تحوم، .wpcf7 الإدخال: التركيز، .wpcf7 الإدخال: نشط، .wpcf7 textarea: تحوم، .wpcf7 textarea: التركيز، .wpcf7 textarea: نشط (الخلفية: #FDFDFD؛ المخطط التفصيلي: لا شيء؛)

ما هو؟

إدخال .wpcf7، منطقة النص .wpcf7 - نمط حقل الإدخال (حقل النص)

1. حشوة- يضبط المسافة البادئة من المحتوى إلى حدود العنصر. هذه هي المسافة البادئة من النص الذي تم إدخاله في الحقل إلى حد الحقل. يضبط القيمة بالبكسل Xpx، حيث X هو عدد البكسل. مثال: الحشو: 5px 3px 6px 8px؛
2. لون- لون الخط.
3. خط العائلة- خط حقول الإدخال.
4. حجم الخط- حجم الخط
5. ارتفاع خط- ارتفاع خط
6. حدود- إطار حول حقل الإدخال
7. مربع الظل- كتلة الظل. أقحميدل على أن الظل داخلي. إذا كنت تريد الظل الخارجي، تخطي هذه القيمة. تشير القيمتان الثانية والثالثة 2px 2px إلى إزاحة الظل أفقياً وعمودياً على التوالي. القيمة الرابعة، 8 بكسل، تحدد نصف قطر التمويه للظل. خامسا - #F9F9F9 - لون الظل.

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

.buttons_form (الحشوة: 0px؛ الارتفاع: 30px؛ العرض: 150px! مهم؛ الحدود: لا شيء! مهم؛ المؤشر: المؤشر؛ اللون: #fff؛ -webkit-border-radius: .5em؛ -moz-border-radius: . 5em؛ نصف قطر الحدود: .5em؛ اللون: #faddde؛ الحدود: 1 بكسل #980c10؛ الخلفية: #d81b21؛ الخلفية: -webkit-gradient(خطي، أعلى اليسار، أسفل اليسار، من (#ed1c24)، إلى (#) aa1317)); الخلفية: -moz-linear-gradient(top, #ed1c24, #aa1317); عامل التصفية: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )

نموذج الاتصال 7 نمط الإخطار

وهي مسؤولة عن الخطأ أو رسائل الإرسال الناجحة

Wpcf7 .wpcf7-validation-errors( border:none; الخلفية اللون:#246416; اللون:#fff; الهامش:0; الحشو:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; نصف قطر الحدود: 10 بكسل؛ ) .wpcf7 .wpcf7-mail-sent-ok( الحدود: لا شيء؛ لون الخلفية: #7ad33f؛ الهامش: 0؛ الحشو: 20 بكسل؛ -webkit-border-radius: 10px؛ -moz-border - نصف القطر: 10 بكسل؛ نصف قطر الحدود: 10 بكسل؛ ) .wpcf7 .wpcf7-mail-sent-ng( border:none; لون الخلفية:#349622; الهامش:0; الحشو: 20px; -webkit-border-radius: 10px ; -moz-border-radius: 10px; border-radius: 10px; اللون: أبيض; ) .wpcf7span.wpcf7-not-valid-tip( border:none; لون الخلفية:#349622; الحشو:5px; الحشو- اليسار: 5 بكسل؛ الحشو على اليمين: 5 بكسل؛ نصف قطر الحدود: 10 بكسل؛ العرض: 290 بكسل؛ اللون: أبيض؛ /* الظل المسقط */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ؛ -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )

والآن، من أجل الراحة، الكود بأكمله مع التعليقات:

Wpcf7 ( لون الخلفية:#ddd; ) /*لون خلفية النموذج */ .wpcf7 input, .wpcf7 textarea( /* هذا الجزء من الكود مسؤول عن نمط حقول الإدخال ومناطق النص */ padding:5px; / * تعيين الحشو من عنصر الحقول قبل محتواه، يمكنك وضع أي قيمة، على سبيل المثال 10 بكسل */ color:#1D1D1D; /* لون النص في حقول الإدخال */ Font-family:Arial, Helvetica, sans-serif; / * خط النص في حقول الإدخال */ حجم الخط: 16px; /* حجم النص في حقول الإدخال */ ارتفاع الخط: 20px; /* ارتفاع حقول الإدخال */ الحدود: 1 بكسل صلب #C7C7C7; /* إطار حول الحقول القيمة الأولى هي العرض بالبكسل، والثانية - نمط الإطار، والثالثة - لونه */ box-shadow: inset 2px 2px 8px #F9F9F9; /* الظل من حقول الإدخال. 2px - إزاحة على طول المحور السيني، 2 بكسل - الإزاحة على طول المحور الصادي، 8 بكسل - نصف قطر ضبابية الظل، #F9F9F9 - لون الظل */ -webkit-transition: كل 0.2 ثانية سهولة؛ -moz-transition: كل 0.2 ثانية سهولة؛ -o-transition : كل ​​0.2 ثانية سهولة؛ الانتقال: كل 0.2 ثانية سهولة؛ ) .wpcf7 .wpcf7-list-item ( الحشو الأيسر: 0؛ الهامش الأيسر: 0؛ الهامش الأيمن: 25px؛ ) .wpcf7 .wpcf7-list-item الإدخال (الحدود: لا شيء؛ الحشو الأيسر: 0؛ الهامش الأيسر: 0; ) .wpcf7 حدد (المخطط التفصيلي: لا شيء؛ حجم الخط: 16 بكسل؛ عائلة الخط: Arial، Helvetica، sans-serif؛) .wpcf7 الإدخال: التحويم، .wpcf7 الإدخال: التركيز، .wpcf7 الإدخال: نشط، .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* هذا الجزء مسؤول عن نمط حقول الإدخال عندما يحوم مؤشر الماوس فوقها */ الخلفية: #FDFDFD; /* خلفية حقل الإدخال عندما يحوم مؤشر الماوس فوقه */ مخطط تفصيلي : لا شيء؛ /* الحد الخارجي لحقل إدخال النص */ ) .wpcf7 input.wpcf7-submit(/* هذا الجزء من الكود مسؤول عن تصميم زر الإرسال في النموذج * / -انتقال webkit: 0؛ -انتقال moz: 0؛ - انتقال o: 0؛ انتقال: 0؛ حد: لا شيء؛ /* إطار حول الزر */ الموضع: نسبي؛ اللون: #fff؛ /* نص اللون */ تحويل النص: أحرف كبيرة؛ /* تحويل النص (الأحرف الكبيرة تعني أنه سيتم عرض النص الموجود على الزر بأحرف كبيرة) */ /* تقريب زوايا الزر يجب أن تكون قيم الخصائص الثلاث التالية نفس الشيء، لأنهما نفس الشيء، فقط من أجل متصفحات مختلفة */ -webkit-border-radius: 6px; /* الزوايا الدائرية لمتصفح Chrome */ -moz-border-radius: 6px; /* زوايا دائرية لموزيلا فايرفوكس */ border-radius: 6px; /* زوايا مستديرة لجميع المتصفحات الأخرى، بما في ذلك متصفحات الهاتف المحمول */ حجم الخط: 14px; /* حجم نص الزر */ وزن الخط: غامق; /* نمط النص (غامق يعني غامق) */ الحشو العلوي: 11px; /* الحشو العلوي من حافة العنصر إلى محتوياته */ padding-bottom: 10px; /* المساحة السفلية من حافة العنصر إلى محتوياته */ padding-left: 35px; /* المساحة اليسرى من حافة العنصر إلى محتوياته */ الحشو الأيمن: 35px; /* المسافة البادئة إلى اليمين من حافة العنصر إلى محتوياته */ /* خلفية متدرجة - خلفية متدرجة للزر */ لون الخلفية: #000000; /* لون خلفية الزر إذا كان التدرج غير مدعوم من قبل المتصفح */ /* في الخصائص التالية، يجب تحديد الألوان نفسها، لأنها نفس الشيء، فقط لمتصفحات مختلفة. دعونا ننظر إلى الخاصية الأولى. الجزء من (#676767)، إلى (#3B3B3B) يعني أنك بحاجة إلى عرض التدرج، حيث من اللون #676767) هناك انتقال إلى اللون #3B3B3B */ الخلفية: -webkit-gradient(linear, left top, أسفل اليسار، من (#676767)، إلى (#3B3B3B))؛ الخلفية: -moz-linear-gradient(top, #349622, #246416); عامل التصفية: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622"، endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* الظل المسقط - ظل الزر. يتم تحديد لون الظل في RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); ظل الصندوق: 0 2px 5px rgba(0,0,0,0.3); ) /* عند التمرير - قم بتحديد الزر عند تحريك مؤشر الماوس. كل شيء تقريبًا هو نفسه كما في الكتلة السابقة */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none;background-color: #000000; الخلفية: -webkit-gradient(linear, left top ، أسفل اليسار، من (#246416)، إلى (#349622))؛ الخلفية: -moz-linear-gradient(top, #246416, #349622); عامل التصفية: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)";) /* عند النقر - نمط الزر عند النقر فوق إنه تقريبًا كما هو الحال في الكتلة السابقة */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* لون نص الزر عند النقر عليه */ لون الخلفية: #000000; الخلفية : -webkit -التدرج(خطي، أعلى اليسار، أسفل اليسار، من(#FF0000)، إلى(#246416))؛ الخلفية: -moz-linear-gradient(top, #FF0000, #246416); عامل التصفية: progid:DXImageTransform . Microsoft.gradient(startColorstr="#FF0000"، endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: لا شيء؛ -moz-box-shadow: لا شيء؛ ظل الصندوق: لا شيء؛ ) /* رسائل CF7 - نمط الرسائل المتعلقة بالإرسال الناجح والأخطاء وما إلى ذلك. */ .wpcf7 .wpcf7-validation-errors( /* نمط الرسالة لأخطاء التحقق من الصحة */ border:none; /* إطار كتلة الرسالة */ لون الخلفية:#246416; /* الخلفية */ اللون:#fff; /* لون النص */ الهامش:0; /* الهامش الخارجي */ الحشو:20px; /* المسافة الفارغة*/ /* زوايا مستديرة لمتصفحات مختلفة - الخصائص الثلاث التالية */ -webkit-border-radius: 10px; -moz-border-radius: 10px؛ نصف قطر الحدود: 10 بكسل؛ ) .wpcf7 .wpcf7-mail-sent-ok( /* نمط الرسائل حول الإرسال الناجح */ border:none; /* إطار كتلة الرسالة */ لون الخلفية:#7ad33f; /* الخلفية */ هامش:0; / * الحشو الخارجي */ الحشو:20px; /* الحشو الداخلي */ /* تقريب الزوايا لمتصفحات مختلفة - الخصائص الثلاث التالية */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius : 10px ; ) .wpcf7 .wpcf7-mail-sent-ng( الحدود: لا شيء; لون الخلفية:#349622; الهامش:0; الحشو: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10 بكسل؛ نصف قطر الحدود: 10 بكسل؛ اللون: أبيض؛ ) .wpcf7span.wpcf7-not-valid-tip( الحدود: لا شيء؛ لون الخلفية:#349622؛ الحشو:5 بكسل؛ الحشو على اليسار: 5 بكسل؛ الحشو على اليمين: 5 بكسل؛ نصف قطر الحدود: 10 بكسل؛ العرض: 290 بكسل؛ اللون: أبيض؛ /* الظل المسقط */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); صندوق الظل: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: left; ) .wpcf7-form . mright20( الهامش الأيمن: 20px; ) .wpcf7-form .mright40( الهامش الأيمن: 40px; ) .wpcf7-form .clear( واضح: كلاهما؛ )

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

إنشاء وعرض نماذج الاتصال

إنشاء النماذج في لوحة الإدارة

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

تم إنشاء النموذج الموجود في الصورة تلقائيًا عند تنشيط المكون الإضافي.

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

الجزء الأمامي من الموقع

الآن دعونا نحفظ المقالة ونرى كيف يبدو النموذج الخاص بنا (باستخدام موضوع Twenty Sixteen):

وتظهر الصورة النموذج بعد إرسال الرسالة (يُشار إلى ذلك من خلال الإشعار الموجود أسفل النموذج).

تخصيص النموذج (إنشاء نماذج معقدة)

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

في الحقل العلوي - اسم النموذج (يكون مرئيًا فقط في لوحة الإدارة)، حدد اسمًا واضحًا لك، على سبيل المثال: "ملاحظات حول الموقع"، "نموذج طلب وظيفة"، "نموذج تعليقات" ، إلخ.

يوجد أسفل العنوان رمز قصير. نستخدمه في السجلات لعرض النموذج.

وفيما يلي أربع علامات تبويب:

1. قالب النموذج
2. خطاب
3. إعدادات إضافية

دعونا نلقي نظرة على كل علامة تبويب على حدة.

قالب النموذج

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

تخطيط النموذج

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

أسمك (مطلوب كتابته) بريدك الالكتروني (مطلوب) موضوع رسالة

وعندما يتم عرضه في منشور، فإنه سيتحول إلى HTML هذا:

أسمك (مطلوب كتابته)

بريدك الالكتروني (مطلوب)

موضوع

رسالة

بناء جملة الرمز القصير

دعنا نضغط على زر "النص". تفتح نافذة حيث يمكننا تحديد سمات لحقل النص. حدد وانقر على "إدراج علامة".

سيتم بعد ذلك تحويل العلامة إلى حقل نصي برمز html:

يمكن إنشاء الرموز القصيرة بسهولة باستخدام أداة إنشاء الرموز القصيرة.

لكن المُنشئ لا يسمح لك بتغيير الرمز القصير (يمكنك فقط إنشاء رمز قصير هناك). هناك طريقتان لتغيير الرمز القصير:

1. حذف وإنشاء واحدة جديدة باستخدام المنشئ.
2. تعلم بناء الجملة وقم بتصحيح الرمز القصير للحقل يدويًا.

يمكنك معرفة ذلك بنفسك مع المصمم.

وهنا سنلقي نظرة على بناء جملة الرمز القصير.

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

نص (مطلوب)نوع الحقل: نص، تحديد، كلمة المرور، الرقم، إلخ. (في هذه الحالة يكون الحقل نصًا). يحدد عنصر النموذج الذي سيتم تحويل علامتنا إليه، وبالتالي نوع البيانات التي ستقبلها. * علامة النجمة تجعل الحقل إلزاميًا (لن يتم إرسال النموذج وسيتم عرض إشعار بضرورة ملء الحقل). اسم العميل (مطلوب)يتم استخدام اسم الحقل كسمة اسم في الإدخال، ويستخدم أيضًا عند إنشاء قالب الرسالة المرسلة. id:my-id سمة المعرف في الإدخال بالقيمة my-id. تستخدم للزينة. الطبقة: صفي سمة الطبقةفي الإدخال بالقيمة my-class. تستخدم للزينة. العنصر النائب " أدخل اسمًا" Использовать текст "Введите имя" как placeholder. !}

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

أنواع الحقول

• حقول النص: نص، بريد إلكتروني، هاتف، عنوان url، منطقة نصية
• الحقول الرقمية: الرقم، النطاق
• حقول التاريخ: التاريخ
• مربعات الاختيار، وأجهزة الراديو، والقوائم: خانة الاختيار، الراديو، حدد
• مجال تحميل الملف: file
• كلمة التحقق: كلمة التحقق وكلمة التحقق
• استطلاعات الرأي: مسابقة
• حقل "قبول": القبول
• زر الإرسال: إرسال
• نوع الحقل المخصص

قالب الرسالة

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

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

رؤوس الحروف:

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

من - الاسم والبريد الإلكتروني، ومن الذي جاءت الرسالة. عادةً ما تتم الإشارة إلى بريد الخادم هنا (على سبيل المثال [البريد الإلكتروني محمي]).

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

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

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

نص الرسالة

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

دعونا نلقي نظرة على الرسالة الافتراضية:

من:<>الموضوع: الرسالة: - مرسلة من موقع دراسة البرنامج المساعد Contact Form 7 (http://test-wp.ru)

كان لدينا 4 حقول قام المستخدم بملءها. بعد إرسال الرسالة ستتحول العلامات إلى قيم وسنتلقى الرسالة التالية:

من: ديمتري الموضوع: سؤال حول نموذج الاتصال 7 الرسالة: مرحبًا! لدي سؤال حول المكون الإضافي Contact Form 7. كيف يمكنني تهيئته؟ -- مرسل من موقع دراسة البرنامج المساعد Contact Form 7 (http://test-wp.ru)

لا الحقول المطلوبةفي جسد الرسالة

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

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

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

الإخطارات عند تقديم النموذج

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

علامات قالب البريد الإلكتروني لا تعمل في هذه الحقول.

إعدادات إضافية

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

سأتحدث عن استخدام هذه الوظيفة في مقال منفصل.

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

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

تحتوي بعض أنظمة إدارة المحتوى (CMS) بالفعل على نماذج مضمنة، لكن WordPress لا يحتوي على هذا (

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

تثبيت البرنامج المساعد CF7

أولا، قم بتنزيل البرنامج المساعد ووضعه في المجلد 👉 /wp-content/plugins/

ثم انتقل إلى لوحة الإدارة إلى علامة التبويب الإضافاتو تفعيلها!

الإعداد الصحيح لنموذج الاتصال 7

بعد التثبيت، يجب أن يظهر عنصر على الجانب الأيسر "نموذج الاتصال 7":

انقر عليه وابدأ في إنشاء النموذج الأول أو تعديل النماذج الموجودة.

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

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

3. يمكنك تعديل النموذج بالضغط عليه.

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