هل تريد منع صفحتك من التحديث عندما يقوم الزائر بإرسال نموذج؟ بشكل افتراضي ، يتم إعادة تحميل الصفحة بالكامل بالنقر فوق الزر "إرسال" في النموذج. وذلك عندما يتم نقل البيانات المدخلة في النموذج وتخزينها على الخادم.
في هذه المقالة ، سنوضح لك كيفية تمكين إرسال Ajax في نماذج WordPress الخاصة بك ومنع الصفحة من إعادة التحميل.
لماذا تمكين تقديم نموذج Ajax في WordPress؟
يُعد إرسال نموذج Ajax مفيدًا بشكل خاص إذا كنت تريد تضمين نموذج في نافذة منبثقة مشروطة. بدون تمكين إرسال نموذج AJAX ، سيلزم تحديث الصفحة بأكملها ، مما يؤدي إلى إغلاق النافذة المنبثقة. وبهذه الطريقة ، قد يفوت المستخدمون رسالة التأكيد المهمة التي تحافظ على تفاعلهم.
مع تمكين إرسال نموذج AJAX ، يمكن للمستخدمين رؤية رسالة التأكيد عند إرسال النموذج في نفس الصفحة دون الحاجة إلى إعادة تحميله.
لتمكين إرسال نموذج ajax على موقع WordPress الخاص بك ، نوصي باستخدام WPForms ، وهو أفضل مكون إضافي للنماذج لـ WordPress.
الخطوة 1: إنشاء نموذج جديد
لبدء إنشاء النموذج الخاص بك ، ستحتاج أولاً إلى تثبيت ملحق WPForms على موقع WordPress الخاص بك.
لست متأكدا كيف؟ لا يوجد مشكل. يمكنك الاطلاع على دليلنا حول كيفية تثبيت مكون WordPress الإضافي لإصلاحه.
بمجرد تثبيت المكون الإضافي وتنشيطه ، انتقل إلى لوحة تحكم WordPress الخاصة بك وانتقل إلى WPForms »إضافة جديد. ستتم الآن إعادة توجيهك إلى صفحة حيث يمكنك تحديد قالب للنموذج الخاص بك.
تقدم WPForms 7 قوالب نماذج مختلفة للاختيار من بينها. دعنا نختار نموذج اتصال بسيط الخيار لهذا البرنامج التعليمي ثم قم بإضافة حقل تحميل ملف إلى النموذج.
سترى الآن أداة إنشاء النماذج على شاشتك. على الجانب الأيسر من الشاشة لديك أضف الحقول و ال خيارات المجال لسان. يمكنك استخدام علامات التبويب هذه لتكوين نموذج الاتصال الخاص بك.
يسهّل WPForms عليك إضافة حقول إلى النموذج الخاص بك مع السحب والإفلات. يمكنك أيضًا تغيير موضع الحقول عن طريق السحب والإسقاط. إذا كنت تريد حذف حقل ، فهذا سهل أيضًا. فقط قم بالمرور فوق الحقل غير المرغوب فيه وانقر فوق إزالة الرمز الذي سيظهر في الركن الأيمن العلوي من الحقل.
تحت خيارات المجال علامة التبويب ، يمكنك تغيير تسمية الحقل ، وتغيير تنسيق حقل الاسم ، وتغيير حجم الخط ، وتمكين التسميات والعلامات الفرعية أو تعطيلها. لديك أيضا خيار لتمكين منطق شرطي اختيار.
بمجرد الانتهاء من إنشاء النموذج الخاص بك مع منشئ النموذج ، انقر فوق حفظ الزر ، حتى تظل التغييرات سليمة.
الآن بعد أن أنشأنا نموذج اتصال بسيط ، دعنا نضيف ميزة تحميل الملف.
لإضافة وظيفة تحميل ملف ، كل ما عليك فعله هو النقر فوق حقل تحميل الملف في الجزء الأيمن. بدلاً من ذلك ، يمكنك سحب حقل نموذج "تحميل ملف" وإفلاته في الموضع المفضل لديك في أداة إنشاء النماذج.
الخطوة 3: تمكين إرسال نموذج Ajax
بمجرد حفظ التغييرات ، انقر على التكوينات علامة التبويب على الجانب الأيسر من منشئ الصفحة. سترى العديد من الخيارات هنا. انتقل إلى جنرال لواء اختيار. أسفل هذا ، سترى سلسلة من الحقول. هنا يمكنك تغيير اسم النموذج الخاص بك ، وإضافة وصف للنموذج ، وتغيير نص الزر ، وما إلى ذلك.
إذا قمت بالتمرير لأسفل الشاشة ، فسترى بعض خانات الاختيار. يمكنك تحديد خانة الاختيار التي تقول تمكين تقديم نموذج Ajax. أكمل العملية بالضغط على حفظ زر في الزاوية العلوية اليمنى من الشاشة.
اذهب الآن إلى تنبيه علامة التبويب أسفل جنرال لواء لسان. سيُعلمك هذا الخيار في كل مرة يقوم فيها شخص بإرسال نموذجك. لذا في الحقل الأول ، أدخل عنوان البريد الإلكتروني للمشرف أو من المسؤول عن تلقي رسائل البريد الإلكتروني. يمكنك أيضًا إدخال موضوع البريد الإلكتروني واسم المرسل وعنوان المستلم ورسالتك الخاصة.
بمجرد القيام بذلك ، تأكد من حفظ التغييرات الخاصة بك. يمكنك أيضًا تكوين رسالة تأكيد سيتلقاها الزوار بعد الضغط على زر إرسال.
الخطوة 4: نشر النموذج الخاص بك مع تقديم Ajax
الخطوة الأخيرة هي نشر استمارة تقديم Ajax الممكّنة على موقع الويب الخاص بك. لذلك ، انتقل إلى الصفحة حيث تريد أن يظهر النموذج.
يمكنك البدء بالذهاب إلى الصفحات »إضافة جديد في لوحة تحكم WordPress الخاصة بك. الآن أضف عنوانًا لصفحتك. في محرر النصوص لصفحتك ، انقر فوق إضافة نموذج اختيار. ستظهر نافذة جديدة على الشاشة.
انقر فوق السهم المنسدل وحدد النموذج الذي أنشأته للتو. انقر الآن على إضافة نموذج زر. سترى أن كود التضمين ينعكس في محرر النصوص لصفحتك. يمكنك التحقق من شكل النموذج بالنقر تقدم زر على الجانب الأيمن من الشاشة.
ثم يمكنك النقر فوق لتنشر الزر للسماح أخيرًا للنموذج بالتنشيط.
كان ذلك سهلاً ، أليس كذلك؟
قد ترغب الآن في تتبع عدد النقرات التي يتلقاها نموذج الاتصال الخاص بك. للقيام بذلك ، راجع دليلنا حول تتبع الارتباطات ونقرات الأزرار.
