شرح تركيب واعداد إضافة الاتصال Contact Form 7 بطريقة صحيحة

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

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

كيفية تثبيت إضافة Contact Form 7

إضافة Contact Form 7 متاحة منذ عام 2009 ، وحصلت على أكثر من 5 ملايين عملية تنزيل في العقد الماضي. يمكن تثبيت نموذج الاتصال 7 مباشرة من مستودع إضافات ووردبريس. إذا كنت تبحث عن ” Contact Form 7 ” ، فستتمكن من العثور على المكون الإضافي مع مجموعة متنوعة من الوظائف الإضافية.

بعد تثبيت المكون الإضافي ، سيظهر عنصر يسمى “Contact” في الشريط الجانبي من لوحة تحكم ووردبريس. هذا هو المكان الذي يمكن فيه تكوين جميع إعدادات نموذج الاتصال 7.

شاهد إيضا: شرح انشاء متجر الكتروني على الانترنت خطوة بخطوة في 30 دقيقة

إيجابيات وسلبيات الحصول على نموذج الاتصال

قبل أن نتعمق في كيفية تكوين إضافة Contact Form 7 لموقع ووردبريس الخاص بك ، دعنا ننتقل بسرعة إلى بعض إيجابيات وسلبيات إضافة نموذج الاتصال إلى موقعك.

إيجابيات الحصول على نموذج الاتصال

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

سلبيات وجود نموذج الاتصال

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

نظرة عامة على إعدادات نموذج الاتصال 7

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

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

تنقسم صفحة “تعديل نموذج الاتصال” إلى أربعة أقسام.

1. Form –النموذج – قم بتخصيص قالب نموذج اتصال HTML الخاص بك مع مجموعة متنوعة من خيارات الحقول مثل “نص” ، “بريد إلكتروني” ، “مربعات اختيار” ، إلخ. يمكنك أيضًا كتابة HTML مخصص في مربع تخصيص النموذج.
2. Mail –البريد – لتخصيص قالب البريد الإلكتروني والإعدادات المستخدمة في رسائل البريد الإلكتروني الخاصة بالإشعارات.
3. Messages –الرسائل – لتخصيص الرسائل التي يتم عرضها بعد إجراءات محددة. على سبيل المثال ، يمكنك تعيين رسالة فريدة لعرضها بعد قيام شخص ما بإرسال نموذج جهة اتصال.
4. Additional Settings –إعدادات إضافية – حدد المقتطفات لتمكين الميزات الإضافية مثل وضع المشتركين فقط ، والوضع التجريبي ، وتخطي البريد.

الآن دعنا نلقي نظرة فاحصة على كل قسم وننشئ نموذج اتصال مخصص!

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

لإنشاء نموذج اتصال جديد ، انقر فوق إضافة جديد بجوار “نماذج الاتصال”.

أدخل اسمًا لنموذج الاتصال الجديد ، وانقر على “حفظ”.

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

• Text – نص – إنشاء وسم لسطر نصي واحد. الحقول النصية مفيدة للأسماء الأولى والأسماء الأخيرة والمقتطفات النصية الأخرى التي لا تتطلب أسطرًا متعددة.
• Email – البريد الإلكتروني – أنشئ وسم لعنوان بريد إلكتروني.
• URL – رابط – إنشاء وسم لرابط.
• Tel – الهاتف – إنشاء وسم لرقم هاتف.
• Number – الرقم – قم بإنشاء وسم لرقم. على عكس حقلي الإدخال “نص” أو “منطقة النص” ، فإن حقول “الرقم” تسمح فقط بالأرقام الرقمية.
• Date – التاريخ – قم بإنشاء وسم للتاريخ.
• Text Area – مربع النص – إنشاء وسم لمنطقة النص. بخلاف حقل الإدخال العادي “للنص” ، يسمح حقل “منطقة النص” بسطر متعددة من النص. إنها مثالية لإدخال نص الرسالة.
• Drop-down Menu – القائمة المنسدلة – إنشاء وسم لقائمة منسدلة.
• Checkboxes – مربعات الاختيار – إنشاء وسم لمربعات الاختيار.
• Radio Buttons – أزرار الاختيار – إنشاء وسم لأزرار الاختيار.
• Acceptance – القبول – قم بإنشاء وسم لمربع اختيار القبول.
• Quiz – اختبار – قم بإنشاء وسم لزوج من الأسئلة والإجابات.
• File – ملف – إنشاء وسم لحقل تحميل ملف.
• Submit – إرسال – قم بإنشاء وسم لزر إرسال.

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

وسم نص – “Text Tag”

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

بالنسبة لعنصر النموذج “text” ، نستخدم الإعدادات أدناه لإنشاء حقل إدخال لاسم.

• Field Type – نوع الحقل – حقل مطلوب
• Name – الاسم – text-711 (تم إنشاؤه تلقائيًا)
• Default Value – القيمة الافتراضية – Your Name (يُستخدم كنص توضيحي أو عنصر نائب افتراضي)
• Akismet – لم يتم التحقق منه
• ID Attribute (CSS) – سمة المعرف (CSS) – cf7-your-name
• Class Attribute (CSS) – سمة الفئة (CSS) – cf7-your-name

هذه الإعدادات تولد الرمز القصير أدناه.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

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

وسم البريد الالكتروني – “Email“

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

بالنسبة لعنصر نموذج “البريد الإلكتروني” ، قمنا بتكوين الإعدادات أدناه.

• Field Type – نوع الحقل – حقل مطلوب
• Name – الاسم – Email-632 (تم إنشاؤه تلقائيًا)
• Default Value – القيمة الافتراضية – بريدك الإلكتروني
• Akismet – لم يتم التحقق منه.
• ID Attribute (CSS) – سمة المعرف (CSS) – بريدك الإلكتروني
• Class Attribute (CSS) – سمة الفئة (CSS) – بريدك الإلكتروني

هذه الإعدادات تولد الرمز القصير أدناه.

[email* email-632 id:email class:email placeholder "Your Email"]

وسم الروابط “URL”

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

بالنسبة لعنصر النموذج “url” ، قمنا بتكوين الإعدادات أدناه.

• Name – الاسم – url-601 (تم إنشاؤه تلقائيًا)
• Default Value – القيمة الافتراضية – موقع الويب الخاص بك
• Akismet – لم يتم التحقق منه.
• ID Attribute (CSS) – سمة المعرف (CSS) – cf7-your-website
• Class Attribute (CSS) – سمة الفئة (CSS) – cf7-your-website

هذه الإعدادات تولد الرمز القصير أدناه.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

وسم أرقام الهواتف “Tel”

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

بالنسبة لعنصر النموذج “tel” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – هاتف 842 (تم إنشاؤه تلقائيًا)
• القيمة الافتراضية – رقم هاتفك
• سمة المعرف (CSS) – cf7-your-phone-number
• سمة الفئة (CSS) – cf7-your-phone-number

هذه الإعدادات تولد الرمز القصير أدناه.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

وسم التاريخ “Date“

يتيح لك وسم “التاريخ” الخاصة بنموذج الاتصال 7 إنشاء منتقي تاريخ بنمط التقويم. يعد حقل الإدخال “التاريخ” مفيدًا لتحديد تواريخ المواعيد في نموذج الاتصال.

بالنسبة وسم “التاريخ” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – التاريخ – 389 (تم إنشاؤه تلقائيًا)
• القيمة الافتراضية – تاريخ موعدك
• النطاق – نطاقنا الزمني المخصص.
• سمة المعرف (CSS) – cf7-موعد-تاريخ
• سمة الفئة (CSS) – cf7-موعد-تاريخ

هذه الإعدادات تولد الرمز القصير أدناه.

[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]

وسم مربع نصي “Textarea”

يتيح لك وسم “textarea” إنشاء مربع نص متعدد الأسطر يتيح للزائرين إرسال رسائل أطول. تعد Textareas مفيدة للغاية في التقاط نص الرسالة.

بالنسبة لوسم مربع النص “textarea” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – textarea-795 (تم إنشاؤه تلقائيًا)
• القيمة الافتراضية – رسالتك
• سمة المعرف (CSS) – cf7-your-message
• سمة الفئة (CSS) – cf7-your-message

هذه الإعدادات تولد الرمز القصير أدناه.

[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]

وسم القائمة المنسدلة “Drop-down Menu”

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

بالنسبة لوسم “القائمة المنسدلة” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – Menu-24 (تم إنشاؤه تلقائيًا)
• الخيارات – الخيار 1 ، الخيار 2 ، الخيار 3 ، الخيار 4
• السماح بالتحديدات المتعددة – تم الفحص
• أدخل عنصرًا فارغًا كخيار أول – تم التحديد
• سمة المعرف – القائمة المنسدلة cf7
• سمة الفئة – قائمة cf7 المنسدلة

هذه الإعدادات تولد الرمز القصير أدناه.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

وسم مربع الاختيار “Checkboxes”

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

بالنسبة لوسم “مربع الاختيار” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – checkbox-948 (تم إنشاؤه تلقائيًا)
• خيارات – الخيار 1 ، الخيار 2 ، الخيار 3
• لف كل عنصر بعنصر ملصق – تم فحصه
• سمة المعرف – خانة الاختيار cf7
• سمة الفئة – cf7-checkbox

هذه الإعدادات تولد الرمز القصير أدناه.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

وسم “أزرار الراديو”

يتيح لك وسم “أزرار الاختيار” إنشاء أزرار اختيار بخيارات متعددة. بخلاف مربعات الاختيار والقوائم المنسدلة ، تسمح لك أزرار الاختيار فقط بتحديد خيار واحد.

أما بالنسبة لوسم “أزرار الاختيار” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – راديو -708 (تم إنشاؤه تلقائيًا)
• خيارات – الخيار 1 ، الخيار 2 ، الخيار 3
• لف كل عنصر بعنصر ملصق – تم فحصه
• سمة المعرف – cf7-radio
• سمة الفئة – راديو cf7

هذه الإعدادات تولد الرمز القصير أدناه.

[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]

وسم “القبول”

يمكن استخدام وسم “القبول” الخاصة بنموذج الاتصال 7 لإنشاء مربع اختيار واحد لغرض قبول الشروط والأحكام. باستخدام

إعدادات وسم القبول ، يمكنك تحديد رسالة لعرضها.

بالنسبة وسم “القبول” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – القبول – 545 (تم إنشاؤه تلقائيًا)
• الشرط – حدد هذا المربع لقبول الشروط.
• سمة المعرف – قبول cf7
• سمة الفئة – قبول cf7

هذه الإعدادات تولد الرمز القصير أدناه.

[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]

وسم “الاختبار”

يمكن استخدام وسم النموذج “quiz” لإنشاء أسئلة أساسية واختبارات الإجابة في نموذج الاتصال الخاص بك. لإنشاء سؤال اختبار ، استخدم التنسيق التالي للفصل بين السؤال والإجابة – سؤال | إجابة. في لقطة الشاشة أدناه ، سؤالنا هو “في أي عام تم إصدار WordPress؟ “، والإجابة (مفصولة بحرف” | “) هي 2003.

بالنسبة لوسم نموذج “الاختبار” ، قمنا بتكوين الإعدادات أدناه.

الاسم – quiz-461 (تم إنشاؤه تلقائيًا)

الشرط – حدد هذا المربع لقبول الشروط.

سمة المعرف – cf7-quiz

سمة الفئة – cf7-quiz

هذه الإعدادات تولد الرمز القصير أدناه.

[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]

وسم “ملف”

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

في إعدادات وسم ، يمكنك تحديد مجموعة متنوعة من الإعدادات لتأمين النموذج الخاص بك. نوصي دائمًا بتعيين حد لحجم الملف لمنع المستخدمين الضارين من تحميل ملفات ضخمة. وبالمثل ، يساعدك تحديد “أنواع الملفات المقبولة” في تأمين النموذج الخاص بك لتنسيقات الملفات التي تريدها وتتوقعها. مع وضع مثال مدونة التصوير الفوتوغرافي في الاعتبار ، قد ترغب في تحديد حجم الملف إلى 1 ميجابايت (1024 كيلوبايت) وأنواع الملفات المقبولة لتنسيقات الصور المعروفة مثل JPG و PNG فقط.

بالنسبة لوسم “ملف” ، قمنا بتكوين الإعدادات أدناه.

• الاسم – file-658 (تم إنشاؤه تلقائيًا)
• حد حجم الملف – 1024 كيلو بايت
• أنواع الملفات المقبولة – jpg | png | gif
• سمة المعرف – ملف cf7
• سمة الفئة – ملف cf7

هذه الإعدادات تولد الرمز القصير أدناه

[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]

وسم “إرسال”

أخيرًا وليس آخرًا ، وسم “إرسال” الخاصة بنموذج الاتصال 7. كما قد تكون خمنت ، تتيح لك وسم هذه إنشاء زر إرسال لنموذج اتصال.

بالنسبة لوسم “إرسال” ، قمنا بتكوين الإعدادات أدناه.

• التسمية – إرسال
• سمة المعرف – cf7-submit
• سمة الفئة – cf7-submit

هذه الإعدادات تولد الرمز القصير أدناه.

[submit id:cf7-submit class:cf7-submit "Submit"]

كيفية هيكلة نموذج الاتصال باستخدام علامات النموذج

الآن وقد تم إعداد جميع علامات النموذج الخاصة بنا ، فقد حان الوقت لإنشاء نموذج الاتصال. في هذه المرحلة ، يجب أن تبدو إعدادات نموذج الاتصال الخاصة بك مثل لقطة الشاشة أدناه. لاحظ جميع علامات النموذج التي أنشأناها أعلاه. مع وجود علامات النموذج في مكانها [contact-form-7] الصحيح ، يمكنك استخدام الرمز المختصر لتضمين النموذج في منشور أو صفحة WordPress.

في محرر WordPress ، الصق الرمز القصير في كتلة فارغة.

إذا كنت تستخدم محرر WordPress Classic ، فيمكنك لصق الرمز القصير في أي مكان في محرر المحتوى.

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

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

كيفية إضافة تسميات لوسوم نماذج الاتصال

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

• نص
• بريد الالكتروني
• URL
• هاتف
• عدد
• تاريخ
• منطقة النص
• قبول
• اختبار
• ملف

ألق نظرة على وسم “text” أدناه.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

لإضافة تسمية إلى هذا الوسم ، يمكننا استبدال الكود بالمقتطف أدناه. لاحظ المثال الإضافي لـ “Your Name” مباشرة بعد إضافة وسم <label>.

<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>

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

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

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

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

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

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

إليك شكل نموذج الاتصال الخاص بنا:

تكوين إعدادات البريد في المكون الاضافي Contact Form 7

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

للوصول إلى إعدادات تسليم البريد ، انتقل إلى محرر نموذج الاتصال وحدد علامة التبويب “البريد”.

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

تتيح لك إضافة Contact Form 7 تكوين إعدادات تسليم البريد التالية.

• إلى – To: عنوان البريد الإلكتروني الذي سيتم إرسال إشعار إليه.
• من – From: عنوان البريد الإلكتروني المراد إرسال إشعار منه.
• الموضوع – Subject: موضوع إشعار البريد الإلكتروني.
• رؤوس إضافية – Additional Headers: حدد رؤوس بريد إلكتروني إضافية مثل “رد على”.
• نص الرسالة – Message Body: نص رسالة الإعلام بالبريد الإلكتروني.
• مرفقات الملفات – File Attachments: حدد أي مرفقات لتضمينها في إشعار البريد الإلكتروني.

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

حقل “إلى”

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

حقل “من”

يجب أن يستخدم الإعداد “من” التنسيق التالي –  Your Name. بالنسبة لإعدادات البريد الخاصة بنموذج الاتصال ، فإننا نستخدم .kinstalife <[email protected]>

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

حقل “الموضوع”

يمكن استخدام إعداد “الموضوع” لتحديد سطر موضوع لرسائل الإعلام. بشكل افتراضي ، يعيّن نموذج جهة الاتصال 7 الموضوع كـ Site Name “[your-subject]”– اسم الموضوع في نموذج النموذج الافتراضي الخاص بـ Contact Form 7.

إذا لم يكن لديك وسم باسم “[your-subject]” في النموذج الخاص بك ، فتأكد من تغييرها إلى شيء آخر. على سبيل المثال ، إذا كان لديك وسم فقط لتسجيل اسم الزائر (على سبيل المثال ، [your-name]) ، فيمكنك تغيير سطر الموضوع إلى You’ve Received a Message from [your-name].

حقل “رؤوس إضافية”

ضمن “رؤوس إضافية” ، يمكنك تحديد رؤوس البريد الإلكتروني مثل الرد و CC و BCC. بشكل افتراضي ، يضيف نموذج الاتصال في إضافة Contact Form 7 العنوان التالي – Reply-To: [your-email]. يتيح لك هذا الرأس الرد على عنوان البريد الإلكتروني المحدد في نموذج الاتصال المقدم.

يعتبر رأس الرد الافتراضي جيدًا إذا كنت تستخدم نموذج البريد الإلكتروني الافتراضية لنموذج الاتصال 7. إذا لم تكن كذلك ، فتأكد من تغييره لمطابقة وسم البريد الإلكتروني الخاص بك. بالنسبة إلى نموذج الاتصال الخاص بنا ، فإن اسم وسم البريد الإلكتروني هو “email-632” ، لذلك يجب تغيير وسم الرد إلى Reply-To: [email-632].

“نص الرسالة”

التالي هو “نص الرسالة” ، الذي يحدد محتوى نص البريد الإلكتروني للإشعار. يستخدم النموذج الافتراضي لنموذج الاتصال 7 وسوم [your-name] و [your-email] و [your-subject] و [your-message] ، ويبدو كما يلي:

From: [your-name] 
Subject: [your-subject]
Message Body:
[your-message]
-- 
This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)

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

Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795

كيفية تأمين نموذج الاتصال الخاص بك

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

قم بتأمين نماذج الخاص بك مع reCAPTCHA في Contact Form 7

إذا سبق لك إرسال نموذج على الإنترنت ، فمن المحتمل أنك على دراية بـ reCAPTCHA ، وهي تقنية طورتها Google لتحديد سلوك الروبوت الآلي. تطلب الإصدارات الأقدم من reCAPTCHA (V2) من المستخدمين تمرير أحجية أو تحدي.

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

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

انتقل من خلال نموذج التسجيل لإنشاء reCAPTCHA الخاص بك.

• التسمية – حدد تسمية من اختيارك.
• نوع reCAPTCHA – يدعم نموذج الاتصال 7 reCAPTCHA v3 ، لذا حدد هذا الإصدار.
• المجالات – إذا كان موقعك يستخدم مجالًا جذرًا ، فأضف الإصدارين بدون www و www من المجال الخاص بك. إذا كان موقعك يستخدم نطاقًا فرعيًا ، فما عليك سوى إضافة النطاق الفرعي.
• المالكون – ستتم إضافة عنوان البريد الإلكتروني المرتبط بحساب Google الخاص بك كمالك افتراضيًا. لا تتردد في إضافة عناوين بريد إلكتروني إضافية إذا لزم الأمر.

بعد أن تملأ جميع الخيارات ، انقر فوق إرسال . سيتم تقديمك بعد ذلك مع “مفتاح الموقع” و “المفتاح السري” الخاصين بالموقع. تأكد من الاحتفاظ بهذه المفاتيح في مكان آمن لأنك ستحتاج إلى إضافتها إلى نموذج الاتصال 7.

بعد ذلك ، انقر فوق “دمج – Integration” في الشريط الجانبي للوحة معلومات ووردبريس ، وانقر فوق دمج . حدد خيار reCAPTCHA ، والصق مفتاح موقعك والمفتاح السري في الحقول الخاصة بهما. أخيرًا ، انقر فوق حفظ التغييرات لإنهاء تكامل reCAPTCHA.

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

تأمين نموذج الاتصال الخاص بك مع Cloudflare (اختياري)

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

شاهد نظرة عامة عن شهادة الامان SSL الخاصة بـ Cloudflare

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

• إذا تطابق عنوان URL – * your-domain.com / your-contact-page / *
• التحقق من سلامة المتصفح – تشغيل
• مستوى الأمان – مرتفع

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

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

ملخص

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

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

هل تستخدم إضافة Contact Form 7 على موقع WordPress الخاص بك؟ إذا لم يكن كذلك ، فما هو خيارك المفضل؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!