في عام 2021 ، من المهم جدًا البقاء على اتصال مع جمهورك. يساعدك إنشاء قائمة بريد إلكتروني باستخدام خدمة مثل MailChimp على توصيل المحتوى مباشرة إلى المشتركين لديك.
قوائم البريد الإلكتروني رائعة ، ولكن ماذا لو أراد قارئ أو عميل محتمل الاتصال بك مباشرة؟ هذا هو المكان الذي تأتي فيه نماذج الاتصال! في هذه المقالة ، سنغطي كيفية تكوين المكون الإضافي الشهير Contact Form 7 لموقع وورد بريس الخاص بك.
نموذج الاتصال 7 موجود منذ عام 2009 ، وحصل على أكثر من 5 ملايين عملية تنزيل في العقد الماضي. يمكن تثبيت نموذج الاتصال 7 مباشرة من مستودع البرنامج المساعد وورد بريس. إذا كنت تبحث عن “نموذج الاتصال 7” ، فستتمكن من العثور على المكون الإضافي مع مجموعة متنوعة من الوظائف الإضافية.
قم بتثبيت ملحق Contact Form 7 من مستودع إضافات وورد بريس.
قم بتثبيت ملحق Contact Form 7 من مستودع إضافات وورد بريس.
بعد تثبيت المكون الإضافي ، سترى عنصر قائمة يسمى “جهة اتصال” في الشريط الجانبي من لوحة تحكم وورد بريس الخاصة بك . هذا هو المكان الذي يمكن فيه تكوين جميع إعدادات نموذج الاتصال 7.
تخصيص إعدادات نموذج الاتصال 7.
تخصيص إعدادات نموذج الاتصال 7.
قبل أن نتعمق في كيفية تكوين نموذج الاتصال 7 لموقع وورد بريس الخاص بك ، دعنا ننتقل بسرعة إلى بعض إيجابيات وسلبيات إضافة نموذج اتصال إلى موقعك.
يسمح نموذج الاتصال للقراء والعملاء والمعجبين بالاتصال بك مباشرة. اعتمادًا على الغرض من موقع وورد بريس الخاص بك ، يمكن أن تكون قدرة الزائر على التواصل معك مهمة جدًا. على سبيل المثال ، قد يؤدي عدم إضافة نموذج اتصال إلى موقع التجارة الإلكترونية إلى الإضرار بعملك من الناحية المالية لأن الأطراف المهتمة لن تتمكن من التواصل معك إذا كانت لديهم أسئلة حول منتجك.
يضيف نموذج الاتصال شرعية إلى موقع وورد بريس أو عملك. يرى الكثير من الناس أن وجود نموذج الاتصال هو عامل ثقة من نوع ما. إن فكرة التمكن من الوصول إليك ، مالك الموقع ، تجعل المحتوى الخاص بك أكثر جدارة بالثقة.
يمكن أن يمثل البريد العشوائي مشكلة للنماذج العامة مثل مربعات التعليق ونماذج الاتصال. لحسن الحظ باستخدام نموذج الاتصال 7 ، يمكنك تصفية البريد العشوائي باستخدام reCAPTCHA . يمكنك أيضًا تكوين قاعدة صفحة Cloudflare لحماية نفسك بشكل أكبر. سوف ندخل في التفاصيل الدقيقة حول كيفية إعداد الحماية من البريد العشوائي في نموذج الاتصال 7 لاحقًا في المقالة.
بعد إضافة نموذج اتصال إلى موقعك ، ستحتاج على الأرجح إلى تخصيص وقت للرد على الرسائل. هذا ليس بالضرورة أمرًا سيئًا اعتمادًا على كيف تنظر إليه. يخشى بعض الناس عملية الرد على رسائل البريد الإلكتروني ، بينما يستمتع بها الآخرون بصدق. من واقع خبرتنا ، فإن العلاقات التي تظهر من وجود نموذج اتصال على موقعك تفوق عادةً تكلفة الاعتدال ، لذلك نوصي بتعزيزها!
يعد إنشاء نموذج اتصال باستخدام المكون الإضافي Contact Form 7 أمرًا سهلاً للغاية. للبدء ، انقر فوق جهة الاتصال> نماذج جهات الاتصال في الشريط الجانبي لـ وورد بريس. في هذه الصفحة ، يمكنك عرض جميع نماذج الاتصال الخاصة بك مع تفاصيل البيانات الوصفية المرتبطة بها.
نموذج الاتصال في نموذج الاتصال 7.
نموذج الاتصال في نموذج الاتصال 7.
عند تثبيت نموذج الاتصال 7 لأول مرة ، فإنه ينشئ نموذجًا أيضًا. قبل أن ندخل في كيفية إنشاء نموذج اتصال مخصص ، دعنا أولاً نلقي نظرة على نموذج النموذج للحصول على فكرة أفضل عن كيفية عمل نموذج الاتصال 7. انقر فوق نموذج الاتصال 1 لعرض إعدادات النموذج.
تكوين نموذج الاتصال الخاص بك وورد بريس.
تكوين نموذج الاتصال الخاص بك وورد بريس.
تنقسم صفحة “تعديل نموذج الاتصال” إلى أربعة أقسام.
النموذج – قم بتخصيص قالب نموذج اتصال HTML الخاص بك مع مجموعة متنوعة من خيارات الحقول مثل “النص” ، “البريد الإلكتروني” ، “مربعات الاختيار” ، إلخ. يمكنك أيضًا كتابة HTML مخصص في مربع تخصيص النموذج.
البريد – لتخصيص قالب البريد الإلكتروني والإعدادات المستخدمة في رسائل البريد الإلكتروني الخاصة بالإشعارات.
الرسائل – لتخصيص الرسائل التي يتم عرضها بعد إجراءات محددة. على سبيل المثال ، يمكنك تعيين رسالة فريدة لعرضها بعد قيام شخص ما بإرسال نموذج جهة اتصال.
إعدادات إضافية – حدد المقتطفات لتمكين الميزات الإضافية مثل وضع المشتركين فقط ، والوضع التجريبي ، وتخطي البريد.
الآن دعنا نلقي نظرة فاحصة على كل قسم وننشئ نموذج اتصال مخصص!
أنت تعرف ما يقولونه – أبقِ أصدقاءك قريبين وجمهورك أقرب … أو شيء من هذا القبيل. 😉 ابق على اتصال بزوار الموقع بفضل هذا البرنامج المساعد الشهير 👇
انقر للتغريد
لإنشاء نموذج اتصال جديد ، انقر فوق إضافة جديد بجوار “نماذج الاتصال”.
قم بإنشاء نموذج اتصال جديد في نموذج الاتصال 7.
قم بإنشاء نموذج اتصال جديد في نموذج الاتصال 7.
أدخل اسمًا لنموذج الاتصال الجديد ، وانقر على “حفظ”.
احفظ نموذج اتصال وورد بريس الجديد الخاص بك.
احفظ نموذج اتصال وورد بريس الجديد الخاص بك.
في قسم “النموذج” ، أضف HTML الضروري لنموذج الاتصال الخاص بك. يمكنك استخدام الأزرار المختلفة المعدة مسبقًا لإنشاء رموز قصيرة لعلامات النموذج الشائعة. لتسهيل الأمور ، تحقق من الأوصاف أدناه للحصول على علامات النموذج المحددة مسبقًا التي تأتي مع نموذج الاتصال 7.
نص – إنشاء علامة نموذج لسطر واحد من النص. الحقول النصية مفيدة للأسماء الأولى والأسماء الأخيرة والمقتطفات النصية الأخرى التي لا تتطلب أسطرًا متعددة.
البريد الإلكتروني – أنشئ علامة نموذج لعنوان بريد إلكتروني.
URL – إنشاء علامة نموذج لعنوان URL .
الهاتف – إنشاء علامة نموذج لرقم هاتف.
الرقم – قم بإنشاء علامة نموذج لرقم. على عكس حقلي الإدخال “نص” أو “منطقة النص” ، فإن حقول “الرقم” تسمح فقط بالأرقام الرقمية.
التاريخ – قم بإنشاء علامة نموذج للتاريخ.
منطقة النص – إنشاء علامة نموذج لمنطقة النص. بخلاف حقل الإدخال العادي “للنص” ، يسمح حقل “منطقة النص” بسطر متعددة من النص. إنها مثالية لإدخال نص الرسالة.
القائمة المنسدلة – إنشاء علامة نموذج لقائمة منسدلة.
مربعات الاختيار – إنشاء علامة نموذج لمربعات الاختيار.
أزرار الراديو – إنشاء علامة نموذج لأزرار الاختيار.
القبول – قم بإنشاء علامة نموذج لمربع اختيار القبول.
اختبار – قم بإنشاء علامة نموذج لزوج من الأسئلة والإجابات.
ملف – إنشاء علامة نموذج لحقل تحميل ملف.
إرسال – قم بإنشاء علامة نموذج لزر إرسال.
الآن دعنا نمضي قدمًا ونخصص نموذج اتصال. من أجل الاكتمال ، سننشئ نموذج اتصال يستخدم جميع علامات النموذج المحددة مسبقًا في نموذج الاتصال 7.
عند النقر فوق علامة نموذج محددة مسبقًا في نموذج الاتصال 7 ، سترى قائمة منبثقة مثل القائمة أدناه. في هذه القائمة ، يمكنك تكوين إعدادات علامة النموذج. في الجزء السفلي ، سترى رمزًا قصيرًا يمكن تضمينه في قالب نموذج جهة الاتصال.
علامة نموذج “نص” في نموذج الاتصال 7.
علامة نموذج “نص” في نموذج الاتصال 7.
بالنسبة لعلامة النموذج “text” ، نستخدم الإعدادات أدناه لإنشاء حقل إدخال لاسم.
نوع الحقل – حقل مطلوب
الاسم – النص – 711 (تم إنشاؤه تلقائيًا)
القيمة الافتراضية – اسمك (يُستخدم كنص عنصر نائب افتراضي)
Akismet – لم يتم التحقق منه
سمة المعرف (CSS) – cf7-your-name
سمة الفئة (CSS) – cf7-your-name
هذه الإعدادات تولد الرمز القصير أدناه.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]في الوقت الحالي ، ما عليك سوى النقر فوق الزر ” إدراج علامة” لإضافة علامة النموذج إلى قالب نموذج جهة الاتصال. سنضيف المزيد من علامات HTML لهيكلة النموذج لاحقًا.
بعد ذلك ، سننشئ علامة نموذج بريد إلكتروني والتي ستسمح لنموذج الاتصال الخاص بنا بجمع عناوين البريد الإلكتروني.
علامة نموذج “بريد إلكتروني” في نموذج الاتصال 7.
علامة نموذج “بريد إلكتروني” في نموذج الاتصال 7.
بالنسبة لعلامة نموذج “البريد الإلكتروني” ، قمنا بتكوين الإعدادات أدناه.
نوع الحقل – حقل مطلوب
الاسم – Email-632 (تم إنشاؤه تلقائيًا)
القيمة الافتراضية – بريدك الإلكتروني
Akismet – لم يتم التحقق منه.
سمة المعرف (CSS) – بريدك الإلكتروني
سمة الفئة (CSS) – بريدك الإلكتروني
هذه الإعدادات تولد الرمز القصير أدناه.
[email* email-632 id:email class:email placeholder "Your Email"]في بعض الحالات ، قد ترغب في الحصول على حقل إدخال في نموذج الاتصال الخاص بك لجمع موقع الويب الخاص بشخص ما. بينما يمكنك تقنيًا استخدام علامة نموذج “نصية” عادية لهذا الغرض في نموذج الاتصال 7 ، فإننا نوصي باستخدام علامة النموذج “URL” بدلاً من ذلك. ستُنشئ علامة النموذج “URL” حقل إدخال يتحقق من صحة عناوين URL للتأكد من تنسيقها بشكل صحيح.
علامة نموذج “URL” في نموذج الاتصال 7.
علامة نموذج “URL” في نموذج الاتصال 7.
بالنسبة لعلامة النموذج “url” ، قمنا بتكوين الإعدادات أدناه.
الاسم – url-601 (تم إنشاؤه تلقائيًا)
القيمة الافتراضية – موقع الويب الخاص بك
Akismet – لم يتم التحقق منه.
سمة المعرف (CSS) – cf7-your-website
سمة الفئة (CSS) – cf7-your-website
هذه الإعدادات تولد الرمز القصير أدناه.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]على غرار عناوين URL ، يمكنك أيضًا استخدام علامة نموذج “نصية” قياسية لجمع أرقام الهواتف. ومع ذلك ، من الأفضل استخدام علامة النموذج “tel” بدلاً من ذلك للتأكد من صحة رقم الهاتف.
علامة نموذج “tel” في نموذج الاتصال 7.
علامة نموذج “tel” في نموذج الاتصال 7.
بالنسبة لعلامة النموذج “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"]تتيح لك علامة نموذج “التاريخ” الخاصة بنموذج الاتصال 7 إنشاء منتقي تاريخ بنمط التقويم. يعد حقل الإدخال “التاريخ” مفيدًا لتحديد تواريخ المواعيد في نموذج الاتصال.
علامة نموذج “التاريخ” في نموذج الاتصال 7.
علامة نموذج “التاريخ” في نموذج الاتصال 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” إنشاء مربع نص متعدد الأسطر يتيح للزائرين إرسال رسائل أطول. تعد Textareas مفيدة للغاية في التقاط نص الرسالة.
علامة نموذج “textarea” في نموذج الاتصال 7.
علامة نموذج “textarea” في نموذج الاتصال 7.
بالنسبة لعلامة النموذج “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"]تتيح لك علامة نموذج “القائمة المنسدلة” لنموذج الاتصال 7 إنشاء قائمة منسدلة بها خيارات متعددة. القوائم المنسدلة مفيدة للمواقف التي تريد فيها أن يقوم الزائر بتحديد خيار معين لإرساله مع النموذج. على سبيل المثال ، إذا كنت تدير شركة صيانة وورد بريس ، فيمكنك تكوين قائمة منسدلة تتيح للزائر الاختيار بين الخدمات التي تقدمها.
علامة نموذج “قائمة منسدلة” في نموذج الاتصال 7.
علامة نموذج “قائمة منسدلة” في نموذج الاتصال 7.
بالنسبة لعلامة نموذج “القائمة المنسدلة” ، قمنا بتكوين الإعدادات أدناه.
الاسم – 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"]تتيح لك علامة نموذج خانة الاختيار إنشاء مربعات اختيار بتنسيق HTML. على غرار القوائم المنسدلة ، يمكن أيضًا استخدام مربعات الاختيار لتحديد الخيارات المحددة مسبقًا. اعتمادًا على طبيعة نموذج الاتصال الخاص بك ، قد تعمل مربعات الاختيار بشكل أفضل من القوائم المنسدلة. على سبيل المثال ، إذا كان لديك عدد قليل من الخيارات للاختيار من بينها ، فإن مربع الاختيار يقلل من عدد النقرات المطلوبة لإجراء التحديد. من ناحية أخرى ، إذا كان نموذج الاتصال الخاص بك يحتوي على الكثير من الخيارات ، فقد تعمل القائمة المنسدلة بشكل أفضل لأنها تشغل مساحة رأسية أقل.
علامة نموذج “مربع اختيار” في نموذج الاتصال 7.
علامة نموذج “مربع اختيار” في نموذج الاتصال 7.
بالنسبة لعلامة النموذج “مربع الاختيار” ، قمنا بتكوين الإعدادات أدناه.
الاسم – 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"]تتيح لك علامة النموذج “أزرار الاختيار” إنشاء أزرار اختيار بخيارات متعددة. بخلاف مربعات الاختيار والقوائم المنسدلة ، تسمح لك أزرار الاختيار فقط بتحديد خيار واحد.
علامة نموذج “أزرار اختيار” في نموذج الاتصال 7.
علامة نموذج “أزرار اختيار” في نموذج الاتصال 7.
بالنسبة لعلامة نموذج “أزرار الاختيار” ، قمنا بتكوين الإعدادات أدناه.
الاسم – راديو -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 لإنشاء مربع اختيار واحد لغرض قبول الشروط والأحكام. باستخدام إعدادات علامة نموذج القبول ، يمكنك تحديد رسالة لعرضها.
علامة نموذج “قبول” في نموذج الاتصال 7.
علامة نموذج “قبول” في نموذج الاتصال 7.
بالنسبة لعلامة نموذج “القبول” ، قمنا بتكوين الإعدادات أدناه.
الاسم – القبول – 545 (تم إنشاؤه تلقائيًا)
الشرط – حدد هذا المربع لقبول الشروط.
سمة المعرف – قبول cf7
سمة الفئة – قبول cf7
هذه الإعدادات تولد الرمز القصير أدناه.
[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]يمكن استخدام علامة النموذج “quiz” لإنشاء أسئلة أساسية واختبارات الإجابة في نموذج الاتصال الخاص بك. لإنشاء سؤال اختبار ، استخدم التنسيق التالي للفصل بين السؤال والإجابة – سؤال | إجابة. في لقطة الشاشة أدناه ، سؤالنا هو “في أي عام تم إصدار وورد بريس؟ “، والإجابة (مفصولة بحرف” | “) هي 2003.
علامة نموذج “اختبار” في نموذج الاتصال 7.
علامة نموذج “اختبار” في نموذج الاتصال 7.
بالنسبة لعلامة نموذج “الاختبار” ، قمنا بتكوين الإعدادات أدناه.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
الاسم – 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 فقط.
علامة نموذج “ملف” في نموذج الاتصال 7.
علامة نموذج “ملف” في نموذج الاتصال 7.
بالنسبة لعلامة النموذج “ملف” ، قمنا بتكوين الإعدادات أدناه.
الاسم – file-658 (تم إنشاؤه تلقائيًا)
حد حجم الملف – 1024 كيلو بايت
أنواع الملفات المقبولة – jpg | png | gif
سمة المعرف – ملف cf7
سمة الفئة – ملف cf7
هذه الإعدادات تولد الرمز القصير أدناه.
[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]أخيرًا وليس آخرًا ، علامة نموذج “إرسال” الخاصة بنموذج الاتصال 7. كما قد تكون خمنت ، تتيح لك علامة النموذج هذه إنشاء زر إرسال لنموذج اتصال.
علامة نموذج “إرسال” في نموذج الاتصال 7.
علامة نموذج “إرسال” في نموذج الاتصال 7.
بالنسبة لعلامة النموذج “إرسال” ، قمنا بتكوين الإعدادات أدناه.
التسمية – إرسال
سمة المعرف – cf7-submit
سمة الفئة – cf7-submit
هذه الإعدادات تولد الرمز القصير أدناه.
[submit id:cf7-submit class:cf7-submit "Submit"]الآن وقد تم إعداد جميع علامات النموذج الخاصة بنا ، فقد حان الوقت لإنشاء نموذج الاتصال. في هذه المرحلة ، يجب أن تبدو إعدادات نموذج الاتصال الخاصة بك مثل لقطة الشاشة أدناه. لاحظ جميع علامات النموذج التي أنشأناها أعلاه. مع وجود علامات النموذج في مكانها [contact-form-7] الصحيح ، يمكنك استخدام الرمز المختصر لتضمين النموذج في منشور أو صفحة وورد بريس.
قم بتضمين نموذج اتصال مع رمز الاتصال رقم 7 القصير.
قم بتضمين نموذج اتصال مع رمز الاتصال رقم 7 القصير.
في محرر وورد بريس ، الصق الرمز القصير في كتلة فارغة.
أضف الرمز المختصر لنموذج الاتصال 7 إلى منشور أو صفحة.
أضف الرمز المختصر لنموذج الاتصال 7 إلى منشور أو صفحة.
إذا كنت تستخدم محرر وورد بريس Classic ، فيمكنك لصق الرمز القصير في أي مكان في محرر المحتوى.
استخدم نموذج الاتصال 7 مع محرر وورد بريس الكلاسيكي.
استخدم نموذج الاتصال 7 مع محرر وورد بريس الكلاسيكي.
يجب أن تكون الآن قادرًا على رؤية نموذج الاتصال في الصفحة التي أضفت فيها الرمز القصير لنموذج الاتصال 7. إليك ما يبدو عليه نموذج الاتصال الخاص بنا بالإعدادات المذكورة أعلاه. كما ترى ، يحول Contact Form 7 تلقائيًا علامات النموذج إلى HTML صالح يتم عرضه باستخدام أنماط CSS الافتراضية المضمنة في قالب وورد بريس الخاص بك.
نموذج اتصال تم إنشاؤه باستخدام نموذج الاتصال 7.
نموذج اتصال تم إنشاؤه باستخدام نموذج الاتصال 7.
يعد نموذج الاتصال الخاص بنا في حالته الحالية نقطة انطلاق جيدة ، لكنه يفتقر إلى ميزة رئيسية واحدة. تدعم علامات النموذج مثل “نص” و “بريد إلكتروني” و “عنوان URL” العناصر النائبة ، لكن العناصر الأخرى مثل “مربعات الاختيار” و “أزرار الاختيار” لا تدعم ذلك. بدون تسميات مناسبة ، لن تكون مربعات الاختيار وأزرار الاختيار مفيدة جدًا للزائرين لأنه ليس لديهم أي سياق. لحسن الحظ ، من السهل جدًا إضافة ملصقات في نموذج الاتصال 7!
هناك طريقتان لإضافة تسميات إلى علامات نموذج جهة الاتصال 7. بالنسبة لعلامات النموذج أدناه ، يمكنك ببساطة التفاف علامة النموذج بعلامة.
نص
بريد الالكتروني
URL
هاتف
عدد
تاريخ
منطقة النص
قبول
اختبار
ملف
ألق نظرة على علامة النموذج “text” أدناه.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]لإضافة تسمية إلى علامة النموذج هذه ، يمكننا استبدال علامة النموذج بالمقتطف أدناه. لاحظ المثال الإضافي لـ “Your Name” مباشرة بعد <label>علامة الفتح .
تعبت من مضيف بطيء؟ تم تصميم Kinsta مع مراعاة السرعة والأداء. تحقق من خططنا
<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>هذا ما يبدو عليه هذا التغيير في نموذج الاتصال الخاص بنا. في هذه الحالة ، تخدم التسمية التي تم إنشاؤها حديثًا نفس الغرض مثل العنصر النائب. ومع ذلك ، إذا لم نرغب في تحديد عنصر نائب داخل علامة النموذج ، فإن التسمية ستساعد في تحديد الغرض من مربع إدخال محدد.
أضف تسمية إلى علامة النموذج في نموذج الاتصال 7.
أضف تسمية إلى علامة النموذج في نموذج الاتصال 7.
بالنسبة إلى علامات النموذج التي تعرض عناصر تحكم نموذج متعددة مثل مربعات الاختيار وأزرار الاختيار والقوائم المنسدلة ، يؤدي التفاف علامة النموذج داخل </label>علامة إلى حدوث خطأ. يحدث هذا لأنه من <label>المفترض أن يتم استخدام العلامة مع عنصر تحكم نموذج واحد فقط. تتضمن طبيعة مربعات الاختيار وأزرار الاختيار وخيارات القائمة المنسدلة العديد من عناصر التحكم في النموذج ، لذا فهي غير متوافقة مع حل وضع العلامات الافتراضي.
بالنسبة لخانات الاختيار وأزرار الاختيار والقوائم المنسدلة ، يجب عليك إضافة use_label_elementمعلمة داخل الرمز القصير. ألق نظرة على مثال علامة نموذج مربع الاختيار أدناه حيث use_label_elementيكون بالخط العريض.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox <strong>use_label_element</strong> "Option 1" "Option 2" "Option 3"]بمجرد use_label_elementإضافة المعلمة ، يمكنك إضافة تسمية مباشرة فوق علامة النموذج في محرر نموذج الاتصال.
أضف تصنيفًا إلى مربعات الاختيار وأزرار الاختيار والقوائم المنسدلة في نموذج الاتصال 7.
أضف تصنيفًا إلى مربعات الاختيار وأزرار الاختيار والقوائم المنسدلة في نموذج الاتصال 7.
من أجل الاكتمال ، أضفنا تسميات إلى جميع علامات النموذج في نموذج الاتصال الخاص بنا. ربما لن تحتاج إلى القيام بذلك لموقع إنتاج لأن بعض علامات النماذج تتضمن بالفعل عناصر نائبة. بغض النظر ، أردنا توضيح كيفية عمل الملصقات.
إليك شكل نموذج الاتصال الخاص بنا:
نموذج اتصال مع تسميات.
نموذج اتصال مع تسميات.
الآن بعد أن قمنا بتكوين هيكل نموذج الاتصال الخاص بنا ، فقد حان الوقت لإلقاء نظرة على إعدادات تسليم البريد الإلكتروني في نموذج جهة الاتصال 7. بينما يجب أن تعمل الإعدادات الافتراضية لتسليم البريد بشكل جيد لمعظم المواقع ، لا يزال من المهم فهم مختلف الإعدادات في حال كان موقعك أو حالة الاستخدام تتطلب تكوينًا خاصًا.
للوصول إلى إعدادات تسليم البريد ، انتقل إلى محرر نموذج الاتصال وحدد علامة التبويب “البريد”.
إعدادات تسليم البريد في نموذج الاتصال 7.
إعدادات تسليم البريد في نموذج الاتصال 7.
تتيح لك إعدادات تسليم البريد في نموذج الاتصال 7 تخصيص القوالب والمعلمات المستخدمة لإنشاء وإرسال إشعار إليك بعد قيام شخص ما بإرسال نموذج. إذا كنت تستخدم إعدادات غير صحيحة ، فمن المحتمل ألا يتم إخطارك بعمليات إرسال النماذج. وبالتالي ، من المهم اختبار تسليم النموذج بعد إنشاء نموذج اتصال وتغيير الإعدادات.
يتيح لك نموذج الاتصال 7 تكوين إعدادات تسليم البريد التالية.
إلى – عنوان البريد الإلكتروني الذي سيتم إرسال إشعار إليه.
من – عنوان البريد الإلكتروني المراد إرسال إشعار منه.
الموضوع – موضوع إشعار البريد الإلكتروني.
رؤوس إضافية – حدد رؤوس بريد إلكتروني إضافية مثل “رد على”.
نص الرسالة – نص رسالة الإعلام بالبريد الإلكتروني.
مرفقات الملفات – حدد أي مرفقات لتضمينها في إشعار البريد الإلكتروني.
الآن ، دعنا ننتقل إلى كل إعداد لفهم كيفية تأثيرها على تسليم البريد في نموذج الاتصال 7 بشكل أفضل.
تأكد من تحديد عنوان بريد إلكتروني حقيقي للإعداد “إلى”. بشكل افتراضي ، سيقوم نموذج جهة الاتصال 7 بتعيين عنوان البريد الإلكتروني المرتبط بحساب مستخدم وورد بريس الخاص بك إلى الإعداد “إلى”. إذا كان عنوان بريدك الإلكتروني في وورد بريس غير صالح ، فتأكد من تحديثه في إعدادات ملف التعريف الخاص بك وتغيير عنوان البريد الإلكتروني في نموذج الاتصال 7 أيضًا.
يجب أن يستخدم الإعداد “من” التنسيق التالي – Your Name. بالنسبة لإعدادات البريد الخاصة بنموذج الاتصال ، فإننا نستخدم .kinstalife <وورد بريس@kinstalife.com>
بشكل افتراضي ، ستقوم جهة الاتصال 7 بملء هذا الحقل بـ وورد بريس@your-domain.com. ستحتاج إلى التأكد من أن عنوان البريد الإلكتروني هذا صالح لأن بعض مضيفي وورد بريس يحظرون البريد الإلكتروني الصادر إلى عناوين غير صالحة. هناك عدة طرق لجعل عنوان البريد الإلكتروني هذا صالحًا. يمكنك إما إعداد حساب بريد إلكتروني مخصص لـ وورد بريس@your-domain.com أو يمكنك تمكين الوظائف الشاملة في مزود خدمة البريد الإلكتروني الخاص بك. إذا لم تتمكن من إعداد عنوان البريد الإلكتروني هذا ، فإننا نوصي بتغييره إلى عنوان بريد إلكتروني صالح لتجنب مشاكل التسليم.
يمكن استخدام إعداد “الموضوع” لتحديد سطر موضوع لرسائل الإعلام. بشكل افتراضي ، يعيّن نموذج جهة الاتصال 7 الموضوع كـ Site Name “[your-subject]”- اسم الموضوع في نموذج النموذج الافتراضي الخاص بـ Contact Form 7.
إذا لم يكن لديك علامة نموذج باسم “[your-subject]” في النموذج الخاص بك ، فتأكد من تغييرها إلى شيء آخر. على سبيل المثال ، إذا كان لديك علامة نموذج فقط لتسجيل اسم الزائر (على سبيل المثال ، [your-name]) ، فيمكنك تغيير سطر الموضوع إلى You’ve Received a Message from [your-name].
ضمن “رؤوس إضافية” ، يمكنك تحديد رؤوس البريد الإلكتروني مثل الرد و CC و BCC. بشكل افتراضي ، يضيف نموذج جهة الاتصال 7 العنوان التالي – Reply-To: [your-email]. يتيح لك هذا الرأس الرد على عنوان البريد الإلكتروني المحدد في نموذج الاتصال المقدم.
يعتبر رأس الرد الافتراضي جيدًا إذا كنت تستخدم علامة نموذج البريد الإلكتروني الافتراضية لنموذج الاتصال 7. إذا لم تكن كذلك ، فتأكد من تغييره لمطابقة اسم علامة نموذج البريد الإلكتروني الخاص بك. بالنسبة إلى نموذج الاتصال الخاص بنا ، فإن اسم علامة نموذج البريد الإلكتروني هو “email-632” ، لذلك يجب تغيير علامة نموذج الرد إلى Reply-To: [email-632].
التالي هو “نص الرسالة” ، الذي يحدد محتوى نص البريد الإلكتروني للإشعار. يستخدم النموذج الافتراضي لنموذج الاتصال 7 علامات نموذج [your-name] و [your-email] و [your-subject] و [your-message] ، ويبدو كما يلي:
From: [your-name]
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تخصيص نص الرسالة لرسائل إعلام البريد الإلكتروني الخاصة بنموذج الاتصال 7.
تخصيص نص الرسالة لرسائل إعلام البريد الإلكتروني الخاصة بنموذج الاتصال 7.
إذا كان نموذج الاتصال الخاص بك يتضمن تحميل ملف ، فيمكنك تضمين الملف مع البريد الإلكتروني للإشعار. في نموذج الاتصال لدينا ، لدينا علامة نموذج تحميل ملف باسم “[file-658]”. وبالتالي ، يمكننا إضافة علامة النموذج هذه ضمن “مرفقات الملفات” لضمان تضمين الملف في إشعار البريد الإلكتروني.
قم بتضمين مرفقات الملف في رسائل البريد الإلكتروني لإشعارات نموذج الاتصال 7.
قم بتضمين مرفقات الملف في رسائل البريد الإلكتروني لإشعارات نموذج الاتصال 7.
إذا وجدت أن نموذج الاتصال 7 لا يرسل رسائل بريد إلكتروني ، فهناك بعض الأشياء التي يمكنك التحقق منها قبل الوصول إلى مطور وورد بريس للحصول على المساعدة.
تحقق مما إذا كان الخادم الخاص بك يرسل أنواعًا أخرى من رسائل البريد الإلكتروني. لاختبار ذلك ، يمكنك تشغيل إجراء تسليم بريد إلكتروني آخر عن طريق إجراء تعليق اختباري على منشور مدونة أو إرسال طلب إعادة تعيين كلمة المرور على صفحة تسجيل الدخول إلى وورد بريس الخاصة بك. إذا تلقيت بريدًا إلكترونيًا بعد تنفيذ أحد هذه الإجراءات ، فمن المحتمل أن تكون المشكلة متعلقة بتكوين نموذج جهة الاتصال 7. إذا لم تتلق رسائل بريد إلكتروني ، فاتصل بفريق دعم مضيفك وأخبرهم أنك تواجه مشكلة في تسليم البريد الإلكتروني.
تأكد من تكوين الحقلين “إلى” و “من” في إعدادات تسليم البريد في نموذج الاتصال الخاص بك بشكل صحيح. لكي يعمل نموذج الاتصال 7 بشكل صحيح ، يجب ملء كلا الحقلين بعناوين بريد إلكتروني حقيقية.
يتيح لك نموذج الاتصال 7 تخصيص مجموعة متنوعة من رسائل إرسال النموذج. تظهر هذه الرسائل بعد استيفاء شرط معين. على سبيل المثال ، إذا نسي الزائر ملء حقل مطلوب ، فسيعرض نموذج جهة الاتصال 7 رسالة “الحقل مطلوب”. بالنسبة لمعظم حالات الاستخدام ، يجب أن تعمل الرسائل الافتراضية بشكل جيد. ومع ذلك ، إذا كنت ترغب في تخصيص الرسائل ، فيمكنك القيام بذلك بالنقر فوق علامة التبويب “الرسائل” في محرر نموذج الاتصال.
تخصيص نموذج الاتصال 7 رسائل ظرفية.
تخصيص نموذج الاتصال 7 رسائل ظرفية.
نظرًا لأن الروبوتات الآلية أصبحت أكثر ذكاءً وانتشارًا على مر السنين ، فقد أصبح البريد العشوائي مشكلة رئيسية لنماذج الاتصال. نظرًا لأن نماذج الاتصال عادةً ما تكون مفتوحة للإنترنت العام ، فمن السهل جدًا على برامج كاشطات الويب اكتشافها وإطلاق رسائل البريد العشوائي إلى صندوق البريد الإلكتروني الخاص بك. لحسن الحظ ، هناك طرق مختلفة لدرء مرسلي البريد العشوائي وحماية نموذج الاتصال الخاص بك.
إذا سبق لك إرسال نموذج على الإنترنت ، فمن المحتمل أنك على دراية بـ reCAPTCHA ، وهي تقنية طورتها Google لتحديد سلوك الروبوت الآلي. تطلب الإصدارات الأقدم من reCAPTCHA (V2) من المستخدمين تمرير أحجية أو تحدي.
لا يتطلب أحدث إصدار من reCAPTCHA (V3) أي تفاعل من المستخدمين. بدلاً من ذلك ، تراقب بشفافية نشاط المستخدم في الخلفية للتمييز بين زوار الروبوت وزوار البشر. نظرًا لأن نموذج الاتصال 7 يدعم reCAPTCHA V3 ، فإننا نوصي باستخدام هذا الإصدار الأخير لأنه يوفر تجربة مستخدم أفضل للزوار.
لإعداد reCAPTCHA ، ستحتاج أولاً إلى إنشاء مفتاح API. للقيام بذلك ، قم بتسجيل الدخول إلى حساب Google الخاص بك وانتقل إلى صفحة إعداد reCAPTCHA .
قم بتسجيل موقع جديد لتكامل reCAPTCHA.
قم بتسجيل موقع جديد لتكامل reCAPTCHA.
انتقل من خلال نموذج التسجيل لإنشاء reCAPTCHA الخاص بك.
التسمية – حدد تسمية من اختيارك.
نوع reCAPTCHA – يدعم نموذج الاتصال 7 reCAPTCHA v3 ، لذا حدد هذا الإصدار.
المجالات – إذا كان موقعك يستخدم مجالًا جذرًا ، فأضف الإصدارين بدون www و www من المجال الخاص بك. إذا كان موقعك يستخدم نطاقًا فرعيًا ، فما عليك سوى إضافة النطاق الفرعي.
المالكون – ستتم إضافة عنوان البريد الإلكتروني المرتبط بحساب Google الخاص بك كمالك افتراضيًا. لا تتردد في إضافة عناوين بريد إلكتروني إضافية إذا لزم الأمر.
بعد أن تملأ جميع الخيارات ، انقر فوق إرسال . سيتم تقديمك بعد ذلك مع “مفتاح الموقع” و “المفتاح السري” الخاصين بالموقع. تأكد من الاحتفاظ بهذه المفاتيح في مكان آمن لأنك ستحتاج إلى إضافتها إلى نموذج الاتصال 7.
موقع Google reCAPTCHA والمفاتيح السرية.
موقع Google reCAPTCHA والمفاتيح السرية.
بعد ذلك ، انقر فوق “اتصال” في الشريط الجانبي للوحة معلومات وورد بريس ، وانقر فوق دمج . حدد خيار reCAPTCHA ، والصق مفتاح موقعك والمفتاح السري في الحقول الخاصة بهما. أخيرًا ، انقر فوق حفظ التغييرات لإنهاء تكامل reCAPTCHA.
تكوين reCAPTCHA في نموذج الاتصال 7.
تكوين reCAPTCHA في نموذج الاتصال 7.
بعد تكوين reCAPTCHA في نموذج الاتصال 7 ، سترى شعار reCAPTCHA في الزاوية اليمنى السفلية من صفحة نموذج الاتصال الخاصة بك. هذا يعني أن reCAPTCHA نشط ويحمي نموذج الاتصال الخاص بك من عمليات إرسال البريد العشوائي.
نموذج اتصال وورد بريس محمي بواسطة reCAPTCHA V3.
نموذج اتصال وورد بريس محمي بواسطة reCAPTCHA V3.
إذا كنت تستخدم Cloudflare لحماية موقعك ، فيمكنك إعداد قاعدة صفحة خاصة لصفحة نموذج الاتصال لتقليل عمليات إرسال نماذج جهات الاتصال غير المرغوب فيها.
حماية نموذج الاتصال الخاص بك مع Cloudflare.
حماية نموذج الاتصال الخاص بك مع Cloudflare.
لإضافة قاعدة صفحة ، انقر فوق علامة التبويب “قواعد الصفحة” ، واستخدم الإعدادات التالية للمساعدة في تأمين صفحة الاتصال الخاصة بك.
إذا تطابق عنوان URL – * your-domain.com / your-contact-page / *
التحقق من سلامة المتصفح – تشغيل
مستوى الأمان – مرتفع
تحلل ميزة ” التحقق من سلامة المتصفح ” في Cloudflare رؤوس HTTP. إذا اكتشف رأس HTTP الذي يشيع استخدامه بواسطة الروبوت الآلي ومرسلي البريد العشوائي ، فإنه يرفض الطلب إلى موقعك. سيؤدي تعيين “مستوى الأمان” إلى مستوى عالٍ إلى تحدي جميع الزوار الذين أظهروا سلوكًا ضارًا خلال الأسبوعين الماضيين.
من خلال قصر هذه الإعدادات على صفحة الاتصال الخاصة بك باستخدام قاعدة مطابقة عنوان URL ، لن تتأثر الصفحات الأخرى على موقعك بقواعد الصفحة هذه. نوصي بهذا التكوين لأن الصفحات العادية “للقراءة فقط” على موقعك لا تتطلب عادةً إعداد مستوى أمان مشدد.
لا تترك جمهورك على القراءة. 👀 احصل على اتصال مباشر مع القراء والعملاء المحتملين من خلال المكون الإضافي لنموذج الاتصال 7 ⬇️
انقر للتغريد
نموذج الاتصال 7 هو البرنامج المساعد الأكثر شيوعًا لنموذج الاتصال ولسبب وجيه! يمكن استخدامه لإنشاء كل شيء من نماذج الاتصال الأساسية ، إلى اختبارات الأسئلة والأجوبة ، إلى النماذج المعقدة التي تدعم مرفقات الملفات والقوائم المنسدلة.
وأفضل ما في الأمر أنه يأتي مع دعم reCAPTCHA المدمج للمساعدة في تأمين نموذج الاتصال الخاص بك ضد مرسلي البريد العشوائي.
