كيفية إرسال نموذج بدون تحديث الصفحة في WordPress

-إرسال-نموذج-بدون-تحديث-الصفحة-في-WordPress.jpg


إرسال النموذج دون تحديث الصفحة

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

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

لماذا يتم تمكين إرسال نموذج Ajax في WordPress

Ajax Form Submission مفيد بشكل خاص إذا كنت تريد تضمين النموذج في نافذة منبثقة. بدون تمكين إرسال نموذج AJAX ، يجب تحديث الصفحة بأكملها ، مما يؤدي إلى إغلاق النافذة المنبثقة. بهذه الطريقة ، يمكن أن يفوت المستخدمون رسالة تأكيد مهمة تحافظ على مشاركتهم.

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

إرسال نماذج Ajax

لتمكين إرسال نموذج Ajax على موقع WordPress الخاص بك ، نوصي WPForms، أفضل شكل مكون إضافي لبرنامج WordPress.

الخطوة 1: إنشاء نموذج جديد

لبدء إنشاء نموذج ، تحتاج إلى تثبيته أولاً WPForms المساعد على موقع WordPress الخاص بك.

لا تعرف كيف؟ ليس هناك أى مشكلة. يمكنك الانتقال إلى دليلنا حول كيفية تثبيت مكون WordPress الإضافي للحصول على كل شيء مرتبة.

بعد تثبيت البرنامج المساعد وتنشيطه ، انتقل إلى لوحة معلومات WordPress وانتقل إلى WPForms »إضافة جديد. ستتم إعادة توجيهك الآن إلى صفحة حيث يمكنك تحديد قالب للنموذج الخاص بك.

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

تكوين نموذج WPForms

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

إزالة الحقل من wpforms

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

تحت خيارات المجال يمكنك تغيير تسمية الحقل وتغيير تنسيق حقل الاسم وتغيير حجم الخط وتمكين التسميات والتسميات الفرعية أو تعطيلها. لديك أيضًا خيار التمكين المنطق الشرطي اختيار.

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

الآن بعد أن قمنا بإنشاء نموذج اتصال بسيط ، دعنا نضيف ميزة تحميل الملف إليه.

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

استمارة نقل الملفات

الخطوة 3: تمكين إرسال نموذج Ajax

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

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

تمكين تقديم نموذج Ajax

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

احفظ التغييرات عند الانتهاء. يمكنك أيضًا تعيين رسالة تأكيد يتلقاها الزوار عندما يضغطون على زر الإرسال.

إعدادات تأكيد نموذج تحميل الملف

الخطوة 4: انشر النموذج مع تقديم Ajax

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

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

شكل تضمين wpforms

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

ثم يمكنك النقر فوق ينشر زر للسماح أخيرًا للنموذج أن يصبح نشطًا.

كان الأمر سهلاً ، أليس كذلك؟

قد ترغب الآن في تتبع عدد نقرات الزر التي يتلقاها نموذج الاتصال الخاص بك. للقيام بذلك ، راجع دليلنا تتبع الروابط ونقرات الزر.



scroll to top