بناء صفحة اتصل بي
ولكن كيف نستطيع ان نبني نموذج اتصال بسهولة ودون مشاكل؟
الجواب هو عبر استخدام إضافات تسهل عليك الامر, مثل Gravity Forms و Contact Form 7. يكفي ان تثبت أي واحدة منها كي تحظى بعدة امتيازات ستسهل عليك التوصل برسائل من زوارك, لكن خد في الحسبان انه الاضافة الاولى مدفوعة أي انه سيلزمك دفع بعض المال للحصول على خدماتها, لكن عموما فكلا الخيارين جيدين فحتى المجانية منها لها تقريبا نفس الوظائف والمميزات.
سوف نتحدث عن Contact Form 7 في هذا المقال
1 . تركيب وتثبيت الاضافة
طريقة التركيب
1. لإضافة نموذج اتصال إلى موقع / مدونة WordPress ، قم أولاً بتسجيل الدخول إلى حسابك (لوحة تحكم موقعك).
2. بعد ذلك ، ضمن لوحة التحكم ، مرّر مؤشر الماوس فوق Plugins (الاضافات) وانقر على إضافة جديد.
سيكون لديك خياران. يمكنك إما:
-النقر على تحميل الإضافة أعلى الصفحة لتثبيت إضافة من جهة خارجية.
-أو يمكنك استخدام مربع البحث لمحاولة العثور على الإضافة الذي تريد
3. ابحث في خانة البحث عن Contact Form 7 وعند تحديده انقر على التثبيت الآن.
4. عند إكتمال التثبيت، فإن الخطوة الأخيرة هي النقر على تنشيط.
2 . عمل النموذج
بعد تنشيط الإضافة، ستعثر على زر جهة اتصال جديد في لوحة تحكم WordPress (الجانب الأيسر من الشاشة).
انقر على زر “الاتصال”. ثم سترى رمزًا كالتالي:
[*contact-form-7 id=”1234″ title=”Contact form 1″]
انسخ هذا الرمز وافتح الصفحة التي تريد أن يكون فيها نموذج الاتصال الخاص بك عليها وقم بلصق الرمز بداخل محرر الاكواد بداخلها.
الان وبعد ان انتهت مرحلة التركيب, تأتي مرحلة التخصيص, عليك الان تخصيص نموذج الاتصال الخاص بك حسب ما تريد, ولفعل ذلك هناك طرق مختلفة للتخصيص. اسهلها ما سنشرح لكم الان، يجب أولاً الانتقال إلى admin screen.
3 . تخصيص النموذج
في الوقت الحالي ، سيظهر النموذج الافتراضي الموجود في النهاية الخلفية على هذا النحو في الصفحة.
كل شيء سوف يظهر لك بالوضع الافتراضي ولكن لا تقلق، سوف اشرح كيفية تعديل واضافة الحقول.
لنفترض أنك تريد إضافة قائمة منسدلة لاختيار الغرض من الاتصال بك. وبهذه الطريقة ، يمكنك رؤية الرسائل التي تعطي الأولوية لها على الفور.
للقيام بذلك ، تحتاج أولاً إلى وضع المؤشر حيث تريد أن تظهر القائمة في نموذج جهة الاتصال. في هذه الحالة ، هذا ما بين عنوان البريد الإلكتروني والموضوع.
انقر على زرالقائمة المنسدلة (drop-down menu) في شريط الأدوات في الجزء العلوي. ستوصلك إلى هذه القائمة:
إليك كيفية ملء الحقول المختلفة:
- Field type – اختر ما إذا كان الحقل مطلوبًا (اجباريا) لإرسال نموذج الاتصال أم لا.
- Name – هذا يدل على الاسم المستخدم في الوسم. لن تظهر للزائرين ولكنها تجعل من السهل عليك تذكر الغرض من الوسم وتهيئة البريد الإلكتروني المرسل إلى حسابك لاحقًا.
- Options – أدخل الخيارات المتاحة للزائرين الذين يستخدمون القائمة المنسدلة. ضع واحدة في كل سطر. لديك أيضًا خيار السماح بالتحديدات المتعددة واستخدام عنصر فارغ كإعداد افتراضي.
- Id/Class attribute – في هذا المكان ، يمكنك وضع اكواد CSS أو تنسيق للحقل . هذا مفيد جدا للتصميم المتخصص. سوف نتحدث عن ذلك في وقت لاحق.
عندما تنتهي وتتاكد من انك قد قمت بملء معلوماتك بشكل صحيح اضغط على زر Insert Tag
وسوف يظهر كود النموذج بالشكل التالي :
والجدير بالذكر انه وبمجرد فهمك لكيفية عمل الوسوم ، فسوف تتمكن أيضًا من إنشاءها أو إجراء تغييراتعليها.
على سبيل المثال ، لجعل القائمة المنسدلة الجديدة حقلًا غير مطلوب ، يمكنك ببساطة حذف علامة النجمه(*) بعد التحديد. كلما استخدمت هذه الاضافة اكثر ، كلما فهمت كيفية عملها بشكل أفضل.
كل ما تبقى الآن هو إضافة عنوان او وصف للحقول (label). هذا هو النص الذي يصاحب حقل نموذج الاتصال لشرح ما يفعله.
ما عليك سوى نسخ الشفرة الحالية من الحقول الأخرى ولصقها ، ثم تعديلها وفقًا لاحتياجاتك.
لكن حاول ان لا تطلب الكثير من المعلومات من المتصلين بك, لان خصوصية المستخدمين ضرورية جدا, وليس الكل متفق على مشاركتها وأكتفي فقط بطلب الاسم والايميل كي تستطيع الرد, ثم بعد ذلك لا تنسى تعيين الايميل الذي ستصله الرسالة من على نفس الصفحة وعمل حفظ عند الانتهاء.
4 . اعدادات البريد
بعد ذلك ، يجب عليك ضبط اعدادات البريد الإلكتروني المرسل إليك من نموذج الاتصال.
يمكنك القيام بذلك تحت علامة التبويب “’Mail” في الجزء العلوي.
ستجد الحقول المملوءة مسبقًا بوسوم مشابهة تماما لنموذج الاتصال السابق.
كما يوفر لك وسوم الحقول المتوفرة بما في ذلك أي وسوم جديدة قمت بإنشائها مسبقا (طبعا بعد ان تقوم بحفظ النموذج). يمكنك استخدام هذه الوسوم لتخصيص الرسالة القادمة من النموذج الى بريدك الالكتروني.
الخيارات الافتراضية هي جيدة جدا. الشيء الوحيد الذي نحتاج إلى تغييره لمثالنا هو سطر الموضوع.
5 . الرسائل المعدة مسبقا في النموذج
التالي هو علامة تبويب الرسائل (Messages). من هنا تستطيع ان تتحكم بمحتوى الرسائل التي قد يواجهها زوارك أثناء استخدام النموذج.
يوجد رسائل خطأ ، رسائل لعمليات ناجحه أو تلميحات حول كيفية استخدام النموذج بشكل صحيح
أجد أن هذه بالفعل جيدة جدا لذلك عادة ما أترك كل شيء كما هو وأقوم فقط بترجمته للعربية. إذا كان لديك سبب لتغيير أي منها (على سبيل المثال ، لتناسب محتوى موقعك) ، فلا تتردد في القيام بذلك.
6 . اعدادات اضافية
أخيرا ، تستطيع ان تذهب لتبويب الإعدادات الإضافية Additional Settings.
بشكل افتراضي ، هذه تكون فارغة تماما.
يمكنك القيام بأشياء مختلفة – من الحد من قدرة الأشخاص الذين قاموا بتسجيل الدخول فقط على إرسال نموذج الاتصال إلى إعداد النموذج إلى الوضع التجريبي لأغراض الاختبار. هذا ليس مهمًا لأغراضنا ولكن يمكنك العثور على جميع الخيارات المختلفة في الوثائق الخاصة بهذا التطبيق.
اضافات اخرى رائعة خاصة بنموذج الاتصال لووردبرس
اليكم بعض الاضافات الجميلة الاخرى التي ارشحها الى جانب Contact Form 7
Jetpack Forms (free)
Jetpack عبارة عن مجموعة من الإضافات القوية التي تنتجها WordPress.com (انظر المقارنة بين WordPress.org و WordPress.com).
وتشتمل هذه المجموعة على أشكال نماذج الاتصال. عند تشغيله ، يمكنك بدء إدخال النماذج في موقع WordPress الخاص بك مباشرةً من محرر النشر والصفحة.
فيما يلي بعض الميزات البارزة:
- سريع وسهل الاستعمال
- إرسال تنبيهات عبر البريد الإلكتروني لإعلامك حول عمليات إرسال النماذج
- قم بإجراء أي تعديلات من داخل محرر WordPress
- حل رائع لإنشاء نماذج بسيطة
HappyForms (free)
HappyForms جديد نسبيا في السوق.
وهو يتكامل مع مخصص الووردبريس، الأمر الذي يجعل من السهل البدء.
فيما يلي بعض الميزات البارزة:
- خفيف وسريع التصفح
- مجاني تمامًا للاستخدام (ولكنه يأتي مع العلامة التجارية)
- يتيح لك إنشاء النماذج عبر السحب والإفلات
- يعرض عمليات الإرسال النموذجية في لوحة معلومات WordPress
- يأتي مع الحماية من البريد المزعج المضمنة فيه
WPForms (freemium)
برنامج اخر ياتي مع خاصية السحب والإفلات وهو مناسب جدا للمبتدئين حيث يوجد به واجهة مستخدم سهله.
يحتوي WPForms على نسخة مجانية وستحصل على ميزات متميزة مع النسخة المدفوعة. وتشمل هذه:
- امكانية الاتصال مع جميع خدمات التسويق الرئيسية عبر البريد الإلكتروني
- القدرة على تقسيم النماذج الطويلة إلى عدة صفحات
- منطق وجمل شرطيه لنماذج الاتصال
- من السهل جعله متوافقا مع GDPR (حتى انهم لديهم مقال حول هذا الموضوع)
Ninja Forms (freemium)
يتيح لك هذا المكون الإضافي إنشاء نماذج من خلال واجهة سهلة الاستخدام. لديها نسخة مجانية ولكنها تقدم أيضًا إصدارًا متميزًا مع ميزات إضافية ، وإضافات ، ودعم ، وتخطيطات والمزيد. وتشمل هذه:
- امكانية الاتصال مع جميع خدمات التسويق الرئيسية عبر البريد الإلكتروني
- القدرة على قبول المدفوعات من خلال النماذج الخاصة بك
- مزامنة النماذج مع CRM مثل Salesforce
تبلغ تكلفة عضوية نماذج النينجا 99 دولارًا أمريكيًا سنويًا وما فوق.
Gravity Forms (premium)
هو على الارجح الأكثر شعبية بين اضافات النماذج المدفوعة. إنها متقدمة جدًا ، ولها واجهة مستخدم جيدة ونظام دعم رائع.
على عكس ما ذكرناه من الاضافات السابقة في هذه القائمة ، هذه الاضافة لا يوجد منها نسخة مجانية، ولكنك تحصل على الكثير من الميزات للاموال التي تدفعها.
- أكثر من 30 نوعًا من الحقول المتنوعةفي النموذج
- مجموعة واسعة من الوظائف الإضافية
- تحميل الملفات
- القدرة على اظهار مدخلات النموذج للمستخدم على الواجهة الأمامية
- أشكال متعددة الصفحات
- المنطق الشرطي والحسابات المتقدمة
إذا كنت مهتمًا في نماذج Gravity ، تبدأ خططهم بسعر 59 دولارًا سنويًا.
الخلاصة
ان تعلم إضافة نموذج اتصال إلى موقعك WordPress هو شيء يجب على أي شخص يمتلك موقع الكتروني القيام به.
إنها واحدة من أهم الطرق التي يمكن أن يتواصل بها الأشخاص معك.
يجعل نموذج الاتصال موقعك أكثر احترافية ، ويحميك من مرسلي الرسائل غير المرغوب فيها ، ويتأكد من حصولك على المعلومات التي تحتاجها ويعمل بمثابة بواب لموقعك.
في هذه المقالة ، قمنا بتغطية كيفية إضافة نموذج اتصال إلى WordPress باستخدام Contact Form 7. لقد مررنا بالتصميم المتقدم وحماية الرسائل غير المرغوب فيها للنموذج الخاص بك.
وبالإضافة إلى ذلك ، نظرنا في عدد من الإضافات الممتازة الأخرى التي يمكنك استخدامها لإضافة نموذج اتصال إلى موقع WordPress الخاص بك.
هذا كل شيء اخواني فيما يخص التركيب والتخصيص اذا احتجت اكثر من نمودج اتصال واحد على موقعك فيمكنك ذلك بنفس الطريقة عبر التوجه الى (wp-admin / Contact / Add New) وفي النهاية إذا كنت بحاجة إلى مزيد من المعلومات، فيرجى الاطلاع على البرنامج التعليمي Contact Form 7’s Getting Started. فهي تضم كافة الاسئلة الشائعة وكافة الحلول في حال واجهتك مشاكل, آمل أن تجدها مفيدة. بالتوفيق
