كيفية إضافة نماذج الاتصال باستخدام البرنامج المساعد - P2: استخدم WPForms

في المقالة السابقة من سلسلة "نموذج الاتصال" ، تعلمنا ما هو نموذج الاتصال وكيفية استخدام المكون الإضافي لنموذج الاتصال 7. كما وعدت ، كتبت تعليميًا آخر مع WPForms وسأعرض عليك في هذه المقالة.

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

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

الخطوة 1: تثبيت وتفعيل البرنامج المساعد WPForms

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

نموذج الاتصال من WPForms - أداة إنشاء نماذج السحب والإفلات لـ WordPress

المؤلف (المؤلفون): WPForms

الإصدار الحالي: 1.7.1.2

تاريخ التحديث الأخير: 18 نوفمبر 2021

wpforms-lite.1.7.1.2.zip

98٪ التقييمات 5،000،000+ مرات التثبيت يتطلب WP 4.9+

الخطوة 2: إنشاء نموذج اتصال جديد واختيار نموذج

في لوحة تحكم المسؤول ، انتقل إلى WPForms > إضافة جديد .

هذه هي الواجهة التي يجب أن تعمل بها:

في الشريط الجانبي الأيسر ، يمكنك رؤية 5 أقسام:

1. الإعداد : قم بتسمية نموذج الاتصال واختيار القالب الخاص به.
2. الحقول : أضف الحقول وخصصها لنموذج الاتصال.
3. الإعدادات : تكوين الإشعارات والتأكيدات والإعدادات العامة.
4. التسويق : الارتباط بأدوات التسويق عبر البريد الإلكتروني مثل Constant Contact و Campaign Monitor و Mailchimp ...
5. المدفوعات : أضف دفعة من PayPal Standard و Stripe و Authorize.Net.

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

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

هناك أربعة قوالب افتراضية:

• نموذج اتصال بسيط
• نموذج الاشتراك في النشرة الإخبارية
• اقتراح ل
• نموذج فارغ

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

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

الخطوة 3: أضف الحقول إلى نموذج الاتصال

أضف الحقول

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

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

بعد ذلك ، لتخصيص حقل ، انقر فوقه ، ثم قم بتحرير معلماته في علامة التبويب " خيارات الحقول" .

بالإضافة إلى ذلك ، يمكنك حذف أو تكرار حقل بالمرور فوقه والنقر فوق الأزرار المطلوبة.

في هذه المقالة ، أحتاج إلى إضافة الحقول التالية:

بعد إضافة كل هذه الحقول ، تحتاج إلى تخصيص كل حقل في الخطوات التالية.

تخصيص الخيارات العامة لكل حقل

بشكل عام ، هناك نوعان من الخيارات لتخصيص كل حقل:

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

• التسمية : أدخل اسم الحقل الذي تريد عرضه.
• الوصف : هذا هو عرض النص أسفل الحقل لإخبار المستخدمين بما يجب عليهم فعله.
• مطلوب : إنه اختياري! ضع علامة عليه لجعل هذا الحقل إلزاميًا ليتم ملؤه.

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

خيارات متقدمة : هناك بعض الميزات المتقدمة لكل مجال. من الاختياري أن تتعامل معهم ، ولكن هناك بعض الأشياء المهمة التي يجب أن تنظر فيها:

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

ملحوظة :

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

• يمكنك النقر فوق زر علامة الاستفهام بجوار الخيارات / الحقول لقراءة تعليمات WPForms الخاصة بهم.

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

تخصيص حقل "اسمك"

حدد حقل نص الخط البسيط واملأ المعلومات الأساسية فقط:

في هذا المجال ، هناك خياران إضافيان في قسم الخيارات المتقدمة :

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

تخصيص حقل "رقم هاتفك"

هذا المجال لا يوجد لديه شيء خاص. ما عليك سوى تحديد حقل الأرقام وملء المعلومات الأساسية:

تخصيص حقل "بريدك الإلكتروني"

حدد حقل البريد الإلكتروني واملأ المعلومات الأساسية للحقل:

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

تخصيص مجالات "الموقع للدراسة" و "الرئيسية"

أولاً ، اختر حقل القائمة المنسدلة . في قسم الاختيارات ، أدخل خيارات الحقل. يمكنك النقر فوق (+) (-) لإضافة / إزالة الاختيارات.

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

بالإضافة إلى ذلك ، في هذا المجال ، هناك خياران متقدمان يجب أن تهتم بهما:

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

تخصيص حقل "التسجيل في"

حدد حقول مربعات الاختيار وأدخل اختيارات مثل حقول القائمة المنسدلة .

في هذا المجال ، هناك خياران متقدمان يجب أن تهتم بهما:

• استخدم اختيارات الصور : يمكنك استخدامها لتوضيح اختياراتك وجعل نموذج الاتصال الخاص بك أكثر جاذبية وتصورًا.
• الاختيارات العشوائية : يمكن أن يتجنب هذا الأشخاص اختيار خيار لمجرد أنه الخيار الأول.

الخطوة 4: تكوين نموذج الاتصال

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

تكوين الإعدادات العامة

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

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

تكوين الإخطارات

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

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

ملاحظة : يمكن للعلامات الذكية إضافة معلومات إلى إشعارات نموذج الاتصال تلقائيًا.

هذا مثال على إعداداتي:

تكوين التأكيدات

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

عند الانتهاء من جميع عمليات التكوين ، ما عليك سوى النقر فوق حفظ .

الخطوة 5: اعرض النموذج على الصفحات / المنشورات

لعرض النماذج الخاصة بك على الصفحات / المنشورات ، هناك طريقتان.

الطريقة الأولى هي النقر فوق تضمين لعرض النموذج الخاص بك على الصفحة:

بعد ذلك ، قم بتضمين نموذج الاتصال في صفحة جديدة أو صفحة موجودة على موقعك.

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

بعد ذلك ، الصق هذا الرمز المختصر في المنشورات / الصفحات المطلوبة.

وها هي النتيجة:

لا يبدو مثل نموذج نموذج الاتصال حتى الآن ، لذلك لا بد لي من تصميمه قليلاً.

الخطوة 6: تصميم النموذج

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

الآن ، انقر فوق كل حقل ، وانتقل إلى Advanced Options > CSS Classes ، وأضف القيم التالية:

• اسمك وسجل ل: ip-100
• رقم هاتفك ، بريدك الإلكتروني ، موقع الدراسة ، التخصص : ip-50

بعد ذلك ، انتقل إلى Customizer > Addition CSS ، أضف هذا الرمز:

 .wpforms-field-container {
    عرض: فليكس ؛
    التفاف المرن: التفاف.
		تبرير المحتوى: مسافة بين
}

.ip-50 {
    العرض: 48٪! مهم ؛
}

.ip-100 {
		العرض: 100٪! مهم ؛
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium ،
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	أقصى عرض: 100٪ ؛
}

.ip-100 ul {
	عرض: فليكس ؛
	تبرير المحتوى: مسافة بين ؛
}

div.wpforms-container-full {
    الهامش السفلي: 24 بكسل ؛
    الخلفية: #eeeeee ؛
    الحشو: 20 بكسل ؛
}

أخيرًا ، انقر فوق نشر .

وإليك النتيجة النهائية:

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

الكلمات الأخيرة

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

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