نموذج تعليقات Ajax في نافذة مشروطة. نموذج اتصال بسيط في Ajax معالجة النموذج في نافذة مشروطة

مرحبا عزيزي القراء! سأوضح في هذا البرنامج التعليمي كيف يمكننا إنشاء نموذج اشتراك بالبريد الإلكتروني بتنسيق HTML5 مع التحقق من صحة العنوان المُدخل باستخدام JQuery. سوف نستخدم التعبيرات العادية للتحقق، وسوف نقوم بحفظ العنوان الذي تم إدخاله في قاعدة بيانات MySql. وبالتالي، عند الحفظ، سيتم استخدام AJAX (أي، سنستدعي البرنامج النصي PHP دون إعادة تحميل الصفحة). يمكن عرض النتيجة على الصفحة التجريبية، ويمكنك أيضًا تنزيل الكود المصدري. هيا بنا نبدأ!

العلامات الأساسية

لنبدأ بإنشاء ملف Index.html جديد. وسنقوم بإنشاء بنية مستند بسيطة تلتزم بـ HTML5. سنقوم أيضًا بربط أنماط CSS والمكتبة على الفور، وسنحتاج إليها عند التحقق من البريد الإلكتروني المُدخل:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15





نموذج الاشتراك عبر البريد الإلكتروني باستخدام أداة التحقق من صحة jQuery





أنت الآن جاهز لإنشاء النموذج!

نموذج الاشتراك بالبريد الإلكتروني

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

1
2
3
4
5
6
7
8
9



يشترك

لنقم بتغليف النموذج في كتلة div #Completeform بحيث يمكن طي النموذج بعد حفظ العنوان.

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

يتم إخفاء خطأ Span with id في البداية، وتكون خاصية العرض بالقيمة none مسؤولة عنها، وقد كتبنا هذا في ملف النمط، المزيد عن ذلك لاحقًا. ولكن بمجرد قيام المستخدم بإدخال عنوان بريد إلكتروني غير صحيح في النطاق، يتم عرض رسالة تحذير.

مدقق jQuery وطلب AJAX

لنبدأ بميزة بسيطة للتحقق من عنوان البريد الإلكتروني. نحن نستخدم سلسلة تعبير عادية للتحقق مما إذا كانت السلسلة النصية تتطابق مع بنية البريد الإلكتروني القياسية ثم نعيد قيمة منطقية صحيحة وإلا فستكون خاطئة.

دعونا نلقي نظرة على وظيفة CompleteInviteForm(). لمنع ارتباك نموذج إدخال العنوان، سنستخدم تأثير FadeOut لمدة 400 مللي ثانية. وكرد اتصال، دعنا نستدعي الدالة $.ajax()، ونستخدمها لاستدعاء ملف save.php وحفظ العنوان المُدخل في قاعدة البيانات. سأقدم الكود المصدري لملف save.php أدناه، لكن الآن دعونا نلقي نظرة على الدالة $.ajax().

$.ajax - يقوم بتحميل صفحة بعيدة باستخدام طلب HTTP. تُمرر الدالة ‎ $.ajax()‎ كائنًا يتكون من أزواج المفاتيح/القيمة التي تُستخدم لتهيئة الطلب وإدارته. في حالتنا، سوف نستخدم الكائنات التالية:

  • النوع: 'POST' - حدد نوع الطلب إلى الملف، بشكل افتراضي GET، الفرق بين POST وGET ليس كبيرًا جدًا، إنه فقط مع طلب GET يتم نقل البيانات في الرأس ومع POST في النص للطلب، لذا باستخدام POST يمكنك نقل كمية أكبر من المعلومات؛
  • url:'save.php' - المسار إلى الملف القابل للتنفيذ؛
  • البيانات:’email=’+$(“#email”).val() - البيانات التي يتم إرسالها إلى الخادم. باستخدام محدد CSS #email، نصل إلى العنصر باستخدام id = "email" ونحصل على محتويات سمة القيمة، أي البريد الإلكتروني الذي أدخله المستخدم. وسنقوم بتعيين هذا المحتوى لمتغير البريد الإلكتروني، والذي سنستخدمه في ملف save.php؛
  • Success: function())( $('#completeform').before('كل شيء جاهز! لقد تمت إضافتك إلى القائمة البريدية.');) - يتم استدعاء وظيفة النجاح عند اكتمال طلب ajax بنجاح. تقوم الوظيفة بالإجراءات التالية. قبل قسم #Completeform، نقوم بإدراج محتوى لإعلام المستخدم بإضافة بريده الإلكتروني إلى القائمة البريدية.

1
2
3
4
5
6
7
8
9
10
11
12

الدالة CompleteInviteForm() (
setTimeout(function () ( $("#Completeform" ) .fadeOut (400، function () (
$.اجاكس ((
النوع: "منشور"،
عنوان URL: "save.php"،
البيانات: "email=" + $("#email" ) .val () ,
النجاح: الوظيفة () (
$("#Completeform" ) .before ("لقد انتهيت! لقد تمت إضافتك إلى القائمة البريدية." ) ; )
} ) ;
} ) ;
} , 1100 ) ;
}

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

معالجة النموذج

لتسهيل الوصول إلى عناصر الصفحة، لنقم بإنشاء متغيرين باستخدام محددات #error و #btnwrap.

فار erdiv = $("#خطأ" ) ;
var btnwrap = $("#btnwrap" ) ;

باستخدام معالج الحدث المباشر، نقوم بتتبع النقرة على زر "الاشتراك" بمعرفه = "sendbtn" . الطريقة e.preventDefault(); يلغي السلوك القياسي للمتصفح لإجراء ما (النقر فوق الزر)، أي إلغاء تحديث الصفحة وتغيير عنوان URL. نقوم بتعيين البريد الإلكتروني الذي تم إدخاله إلى المتغير emailval، ويمكننا البدء في معالجة هذا المتغير.

الأول إذا (!isEmail(emailval)) يتحقق مما إذا كانت وظيفة isEmail قد أعادت خطأ، فهذا يعني أن عنوان البريد الإلكتروني الذي أدخله المستخدم لا يتطابق مع التعبير العادي، أي غير صحيح، وسنقوم بإعلام المستخدم بهذا في كتلة الخطأ وعرض رسالة (أنت لست أنت، لقد أدخلت عنوان بريدك الإلكتروني بشكل صحيح).

الآن يتم تنفيذ عملية if الثانية فقط إذا قام المستخدم بإدخال عنوان بريد إلكتروني صالح. ثم يمكننا أن نبدأ عملية حفظ العنوان.

لتوضيح العملية، أدخل النص المناسب في مربع الخطأ، ثم ضع صورة GIF في المربع الذي يوجد به زر "الاشتراك". ونحن نسمي الدالة CompleteInviteForm()، والتي ناقشناها أعلاه.

1
2
3
4
5
6
7
8
9
10
11
12

إذا (! isEmail(emailval)) ) (
erdiv.html ("لقد أدخلت عنوان بريدك الإلكتروني بشكل غير صحيح")؛
erdiv.css ("عرض"، "كتلة")؛
}
إذا (isEmail(emailval)) ) (
erdiv.css ("color"، "#719dc8")؛
erdiv.html("معالجة...");
(CompleteInviteForm(), 900);
}
} ) ;
} ) ;

قاعدة البيانات

منذ أن اخترت طريقة حفظ العنوان المدخل في قاعدة البيانات، سأتحدث بإيجاز عن إنشاء قاعدة البيانات والجدول نفسه، وكذلك، كما وعدت، رمز ملف save.php الذي يعمل مع قاعدة بيانات MySql.

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

لتخزين عناوين المشتركين نحتاج إلى جدول واحد يحتوي على حقلين، لنسميه العنوان :

الحقول ستكون على النحو التالي:

  • المعرف — معرف عنوان البريد الإلكتروني (المعروف أيضًا بالمفتاح الأساسي)؛
  • العنوان - عنوان البريد الإلكتروني نفسه.

ملف save.php

حان الوقت الآن للحديث عن العنصر الأخير في الاشتراك الذي تم إنشاؤه، وهو ملف save.php. يحتوي على برنامج نصي PHP لحفظ عنوان البريد الإلكتروني في قاعدة البيانات.

1
2
3
4
5
6

أولاً، نتحقق مما إذا كان متغير البريد الإلكتروني موجودًا في مصفوفة POST العامة؛ وإذا كان الأمر كذلك، فإننا نخصص قيمته للمتغير المحلي $email. بعد ذلك، نقوم بإنشاء اتصال بالخادم mysql_connect() جذر المستخدم، بدون كلمة مرور. نقوم باختيار قاعدة بيانات البريد الإلكتروني وتنفيذ استعلام إلى قاعدة البيانات، وإدراج سجل جديد في جدول العناوين، حيث سيتم إدراج قيمة متغير البريد الإلكتروني $ في حقول العناوين. هذا كل شئ!

وبهذا يختتم الدرس. أود أن أذكرك أن هذا الاشتراك يعمل فقط على الخادم (نظرًا لأننا نستخدم قاعدة البيانات و).

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

هيكل المادة

إذا كنت تقوم بإنشاء موقع ويب على محرك، على سبيل المثال، Joomla أو WordPress، فيمكنك بالطبع استخدام العديد من الحلول الجاهزة للنماذج، بما في ذلك المصممين. ولكن ماذا لو كنت تصمم ببساطة باستخدام HTML خالص وطلب العميل "إحياء" النماذج حتى تعمل. هذا هو المكان الذي يكون فيه هذا النموذج مفيدًا.

محدث. 08/02/2018
تمت إعادة كتابة المقالة مع الأخذ في الاعتبار أن النموذج تم نشره على GitHub

اذا هيا بنا نبدأ. أولاً، قم بتنزيل مصادر النموذج من مستودع GitHub الخاص بي.

لقد قمت بتجميع هذا التجميع باستخدام مدير مهام Gulp. كتبت عن كيفية العمل معه، تأكد من قراءتها.

ربط النموذج بالموقع

قم بفك ضغط الأرشيف باستخدام النموذج. بعد ذلك، انسخ كافة المحتويات من مجلد dist إلى مجلد النماذج (على سبيل المثال، ajax-form) في قالب موقعك. بعد ذلك، نقوم بتوصيل الموارد - الأنماط والبرامج النصية. يوجد إصداران في مجلدات CSS وJS - مضغوط وعادي. إذا كنت تخطط لإجراء تغييرات على التعليمات البرمجية في المستقبل، فمن الأفضل توصيل الإصدارات غير المضغوطة.

إذا كان موقعك يحتوي بالفعل على مكتبة jQuery ممكّنة، فلن تحتاج إلى توصيلها. انتبه على .

تهيئة النموذج

اسمحوا لي أن أشير على الفور إلى أن التحقق من صحة الحقل يتم تنظيمه باستخدام HTML5.

يتم استدعاء النموذج بواسطة الأسلوب .simpleSendForm()، على سبيل المثال:

$("#idForm").simpleSendForm();

بدلاً من #idForm نحدد معرف النموذج. بشكل عام، يمكنك العثور على رمز تهيئة النموذج في ملف scripts.js. يمكن قطع رمز الاتصال بالمكون الإضافي من هناك وكتابته مباشرة قبل ملف . لا تنسَ أمر jQuery.(document).ready() .

يمكن أن يقبل النموذج بعض الخيارات.

خيارات
  • SuccessTitle (سلسلة) — عنوان رسالة الشكر عند إرسال النموذج. الافتراضي هو "شكرًا لاختيارك لنا!"
  • SuccessText (سلسلة) - النص الموجود أسفل عنوان رسالة الشكر. الافتراضي هو "سنتصل بك قريبًا".
  • errorTitle (سلسلة) — عنوان رسالة خطأ إرسال النموذج. الافتراضي هو "لم يتم إرسال الرسالة!".
  • errorSubmit (سلسلة) — نص رسالة خطأ إرسال النموذج. الافتراضي هو "خطأ في إرسال النموذج!".
  • errorNocaptcha (سلسلة) — نص خطأ إذا لم يتم ملء اختبار التحقق.
  • errorCaptcha (سلسلة) - نص الخطأ في حالة فشل التحقق.
  • mailUrl (سلسلة) - المسار إلى ملف المعالج. الافتراضي هو "../form-submit/submit.php". يجب عليك تغيير المسار الكامل وتحديده إذا لم يكن مجلد "إرسال النموذج" الخاص بك موجودًا في جذر الموقع.
  • الإغلاق التلقائي (منطقي) - يغلق النافذة تلقائيًا بعد إرسال النموذج بنجاح (للنماذج الموجودة في نافذة مشروطة). يتم إغلاق نافذة النموذج، وتظهر رسالة شكر بعد 5 ثوانٍ. يمكن تجاوز هذه المرة.
  • autoCloseDelay (الرقم) - المدة (بالملي ثانية) لعرض رسالة الشكر وبعدها سيتم إغلاقها. الافتراضي هو 5000 (5 ثواني).
  • تصحيح (منطقي) - خطأ افتراضيًا. تمكين التصحيح في حالة وجود مشاكل في النموذج. راجع رسائل الخطأ في وحدة التحكم.
  • كلمة التحقق (منطقية) - خطأ افتراضيًا. تمكين أو تعطيل Recaptcha 2.0.
  • captchaPublicKey (سلسلة) — مفتاح recaptcha العام.
النموذج في نافذة مشروط

يمكن أيضًا عرض النموذج الخاص بنا في نافذة مشروطة. سيتم عرض النموذج بواسطة المكتبة.

كود HTML

رمز الزر

اطلب مكالمة

رمز النموذج

تهيئة الإطار المشروط والنموذج. لنجعل النافذة تغلق تلقائيًا بعد 3 ثوانٍ. بعد تقديم النموذج بنجاح. يمكنك أيضًا العثور على رمز استدعاء Magnific Popup في ملف scripts.js.

استدعاء نموذج بنافذة مشروطة // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline",fixedContentPos: false,fixBgPos : true، overflowY: "auto"، CloseBtnInside: true، أداة التحميل المسبق: false، midClick: true، RemovalDelay: 300، mainClass: "mfp-top-up" )); // ===== Init modal form ==== $("#idForm").simpleSendForm (( SuccessTitle: "لقد تم قبول طلبك!"، SuccessText: "سوف يتصل بك موظفنا في أقرب وقت ممكن." ، إغلاق تلقائي: صحيح، تأخير إغلاق تلقائي: 3000 )); كيفية تمكين Recaptcha؟

إذا كنت تريد تمكين recaptcha في نموذج، فأنت بحاجة إلى إضافة كتلة فارغة مع فئة recaptcha في كود html الخاص بالنموذج في المكان الذي تريد عرضه فيه. بعد ذلك، في كود استدعاء المكون الإضافي للنموذج، نمرر خيار captcha بالقيمة true، ونمرر مفتاح recaptcha العام إلى خيار captchaPublicKey. يمكنك الحصول على المفاتيح العامة والخاصة.

// ===== قم بإدخال كلمة التحقق في النموذج ==== $("#idForm").simpleSendForm(( SuccessTitle: "تم قبول طلبك!"، SuccessText: "سيتصل بك موظفنا في أقرب وقت ممكن ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

بعد ذلك، افتح ملف معالج النموذج Submit.php من دليل إرسال النموذج. نبحث عن المتغير recaptchaOn (حول السطر السابع) ونضبطه على true . بعد ذلك، ابحث عن المتغير السري $ (السطر 89 تقريبًا) وقم بتغيير المفتاح الخاص إلى المفتاح الخاص بك.

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

يرجى ملاحظة أنه في الموقع التجريبي، تعمل كلمة التحقق في وضع الاختبار، كما هو موضح بمفاتيح الاختبار من Google.

الآن دعونا نلقي نظرة على ملف معالج النموذج (submit.php) ونتعرف على الأجزاء الرئيسية من التعليمات البرمجية. يعمل المعالج في PHP، لذلك إذا كنت تريد اختبار النموذج فسوف تحتاج إلى استخدام .

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

معرفة ما إذا كان المسار إلى ملف المعالج محددًا بشكل صحيح في تهيئة النموذج:

mailUrl: — المسار إلى ملف المعالج

تأكد أيضًا من تمكين اختبار recaptcha بشكل صحيح. أي أنه إذا تم تعطيله، فيجب تعيين خيارات recaptcha في رمز التهيئة و$recptchaOn في ملف المعالج على false أو true إذا تم تمكين recaptcha.

Google Recaptcha لا يظهر في النموذج

تحقق مما إذا كان قد تم إرسال قيم recaptcha (استدعاء recaptcha) و$recaptchaOn (ملف المعالج) - حقيقي. تحقق أيضًا مما إذا كنت قد حددت المفاتيح بشكل صحيح - عام وخاص.

فعلت كل شيء حسب التعليمات لكن النموذج لا يعمل أين يمكنني البحث عن الخطأ؟

بادئ ذي بدء، أنصحك بإلقاء نظرة على وحدة تحكم المتصفح والتحقق من الأخطاء. تحقق أيضًا من تمكين مكتبة jQuery. تأكد من تضمين ملف scripts.js بشكل صحيح. إذا كان كل شيء على ما يرام، فحاول تمكين تصحيح الأخطاء باستخدام الخيار debug: true. بعد التشغيل، انظر إلى وحدة التحكم بحثًا عن الأخطاء.

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

هذا كل شئ. شكرًا لكم على اهتمامكم. نراكم في المشاركات القادمة!

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

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

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

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

اليوم لن نبدأ بـ jQuery، بل بتخطيط الزر والنموذج. سنقوم بتضمين جميع البرامج النصية في نهاية الصفحة.

الزر الذي، عند النقر عليه، سيفتح نافذة مشروطة:

تقديم طلبك

يمكنك تعيين أي فئة، ولكن في href اكتب #modal - سيكون هذا هو معرف الحاوية مع التظليل ونموذج الاتصال.

سأقدم الآن رمز النموذج والكتلة التي سيوضع عليها النموذج:

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

بعد إضافة الأنماط أصبح الشكل كالتالي:


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

نضيف أنماطًا بين علامات الرأس:

وقبل علامة إغلاق النص، قم بإضافة البرامج النصية:

Script.js هو برنامج نصي لمعالجة النموذج. نفس Ajax الذي يسمح لنا بتنفيذ الإجراء بأكمله دون إعادة تحميل الصفحة:

$(document).ready(function () ( $("form").submit(function () ( // احصل على معرف النموذج var formID = $(this).attr("id"); // أضف تجزئة إلى معرف الاسم var formNm = $("#" + formID $.ajax(( النوع: "POST"، عنوان url: "mail.php"، البيانات: formNm.serialize()، النجاح: الوظيفة (البيانات) ( // إخراج نص نتيجة الإرسال $(formNm).html(data); خطأ: الوظيفة (jqXHR، نص، خطأ) ( // عرض نص خطأ الإرسال $(formNm).html(error); ) ) ));

لن أقوم بتوفير الكود المصدري لـ CSS وJS من الملفات المسؤولة عن النافذة والنموذج المشروطين، لأنها كبيرة جدًا. إذا كان الأمر كذلك، فانظر إلى المصدر. لكن معالج PHP قياسي إلى حد كبير (إذا جاز لي أن أقول ذلك):

من فضلك لا تنسى تغيير عناوين البريد الإلكتروني الخاصة بك إلى عناوينك الخاصة.

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

يا شباب أحثكم على اختبار النموذج على خادم حقيقي أو افتراضي (استضافة). يرجى التأكد من أن الخادم الخاص بك يدعم PHP، وأن لديك خطة مدفوعة وليست فترة تجريبية. خلاف ذلك، في 90٪ من الحالات، لن يعمل النموذج.

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

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

النسخة المحدثة من المقال موجودة

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

بالطبع، سيكون أمرًا رائعًا إذا كان لديك على الأقل القليل من الفهم لـ HTML/CSS لأن... سيكون عليك سحب الكود إلى صفحتك عن طريق القياس. لن نتطرق إلى لغة PHP؛ سأعرض لك جميع التغييرات الضرورية التي تحتاج إلى إجرائها بنفسك.

تحديث: بناءً على ردود القراء، أدركت أنني بحاجة إلى شيء أكثر جمالاً وعمليًا، يرجى مقابلتي والتحقق منه وإلقاء نظرة. اختر أي واحد تفضله)

UPDATE2: الإصدار 3.0 Adaptive Landing + نموذج ajax مع نقل علامات UTM، اقرأ وانظر. ستعجبك

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

نموذج تعليقات PHP - الهيكل

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

بعد تنزيل المصادر وفك الأرشيف، سترى بنية الملف التالية:

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

من المهم أن تكون استضافتك، حيث توجد ملفات الموقع، تدعم معالجة PHP، وإلا فلن يتم تنفيذ ملف Index1.php ولن يعمل. لتوضيح هذه الفروق الدقيقة، اتصل بالحملة حيث تم تسجيل الاستضافة الخاصة بك أو اختبرها فقط - إنها تعمل، فهذا يعني أن هناك دعمًا. إذا لم يكن الأمر كذلك، فقم بتمكين خيار دعم لغة php

ألقِ نظرة على الرسم التخطيطي لكيفية تفاعل جميع العناصر (الصفحة، النموذج، المعالج)

كود المصدر لاستدعاء النموذج والمعالج

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 طلب معاودة الاتصال طلب معاودة الاتصال

طلب معاودة الاتصال طلب معاودة الاتصال

يوجد أدناه الكود المصدري الكامل لمعالج Index1.php، من أجل إعداد الإرسال إلى صندوق البريد الخاص بك، قم بتغيير " [البريد الإلكتروني محمي]"بالنسبة لك، يمكن ترك الباقي، من حيث المبدأ، دون تغيير

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 سيتم الاتصال بك

سيتم الاتصال بك (الخلفية: #22BFF7 url(img/zakaz.jpg) أعلى -70% مركز بدون تكرار؛ ) setTimeout("location.replace("/index.html")", 3000); /*تغيير عنوان الصفحة الحالية بعد 3 ثواني (3000 مللي ثانية)*/

التحقق من وظائف النموذج

قم باستدعاء النافذة وإدخال البيانات لإجراء فحص اختباري لنموذجنا

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


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