كود html جاهز لنموذج الملاحظات. إنشاء نموذج ردود الفعل

29.01.2023

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

لغة البرمجة

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

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

CSS

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

النموذج (الحد الأقصى للعرض: 400 بكسل؛ العرض: 100%؛ الهامش: 0 تلقائي؛) الإدخال (حجم الصندوق: مربع الحدود؛ العرض: كتلة؛ الحدود: لا شيء؛ ظل الصندوق: داخلي 0px 0px 4px 1px rgba(0, 0، 0، 0.11)؛ 0px 2px 0 1px أسود ؛

جزء العميل

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

إذا كنت تريد أن تفعل كل شيء بالطريقة القديمة، فستحتاج إلى تعديل جزء HTML العلوي قليلاً وتعيين قيمة سمة أسلوب النموذج (post أو get). كل هذا يتوقف على الطريقة التي تريد بها نقل البيانات من النموذج. ولا تنس أيضًا كتابة الإجراء الذي سيشير إلى المسار إلى ملف php.

وسنستخدم طريقة أكثر تقدمًا ونرسل البيانات دون إعادة تحميل الصفحة، وعند تلقي رد من الخادم، سنعطي المستخدم رسالة حول نجاح العملية أو وجود خطأ. ومع ذلك، سنحتاج أيضًا إلى ملفين، دعنا نقول contact.php وcustom.js.

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

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( النوع: "POST"، عنوان url: "contact.php"، البيانات: str، Success : الوظيفة(msg) ( if(msg == "ok") ( تنبيه("تم إرسال الرسالة"); ) else ( تنبيه("خطأ! ربما تكون قد ملأت الحقول بشكل غير صحيح."); ) ) ) );

الآن دعونا نفهم خطة العمل ولماذا نحتاج إلى كل هذه المكتبات والملفات. عندما ينقر المستخدم على زر الإرسال، لدينا حدث إرسال، والذي سنكتبه في custom.js وبناء عليه سنتلقى جميع البيانات من النموذج ونمررها إلى ملف contact.php. هنا نتحقق مرة أخرى مما إذا كانت حقولنا فارغة (لتجنب احتمال آخر للبريد العشوائي)، ونرسل رسالة عبر البريد الإلكتروني ونخطر المستخدم بالنتائج، والتي يتم إرسالها كرد على custom.js.

إذا (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = Trim($_POST["mfbName"]); $txtemail = Trim($_POST["mfbMail "]); $txtphone = Trim($_POST["mfbPhone"]); // من منهم $fromMail = " [البريد الإلكتروني محمي]"; // أدخل بريدك الإلكتروني هنا $emailTo = " [البريد الإلكتروني محمي]"; $subject = "Feedback"; $subject = "=?utf-8?b؟".base64_encode($subject) ."?="; $headers = "من: نموذج نموذج\n"; $headers . = "نوع المحتوى: نص/عادي؛ charset="utf-8"\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Date: ". date("D, d M Y h:i:s" O") ."\r\n"; // نص الرسالة $body = "تم استلام رسالة من الموقع ".$site." \n\nالاسم: ".$txtname."\nالهاتف: ".$txtphone."\ne-mail: ".$txtemail."\nالرسالة: ".$txtmessage; mail($emailTo, $subject, $body, $headers); صدى "موافق";

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

تجريبي

ملفات

الإضافات الجاهزة

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

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


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

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

نموذج الملاحظات

أدخل الهاتف:

بريدك:

سؤالك:


لنكتب الأنماط:

Html، body( الارتفاع: 100%; الهامش: 0; ) html( لون الخلفية: #fff; اللون: #333; الخط: 12px/14px Verdana, Tahoma, sans-serif; المؤشر: default; ) #feedback-form (لون الخلفية: #ececec؛ الهامش: 50 بكسل تلقائي 0؛ محاذاة النص: المركز؛ العرض: 430 بكسل؛ الحشو: 15 بكسل؛) #feedback-form h2 (الهامش السفلي: 25px؛) #feedback-form input, #feedback - منطقة نص النموذج (لون الخلفية: #fff؛ الحد: 1 بكسل صلب #A9A9A9؛ الحشو: 1 بكسل 5 بكسل؛ العرض: 90%؛) # إدخال نموذج التعليقات (الارتفاع: 26 بكسل؛) # منطقة نص نموذج التعليقات (الارتفاع: 75 بكسل؛) الحشو العلوي: 5 بكسل؛ ) # إدخال نموذج التعليقات (الهامش العلوي: 15 بكسل؛ لون الخلفية: #0B7BB5؛ الحد: 1 بكسل صلب #CCCCCC؛ اللون: #FFFFFF؛ وزن الخط: غامق؛ الارتفاع: 40 بكسل؛ السطر- الارتفاع: 40 بكسل؛ تحويل النص: عرض كبير: 225 بكسل؛

ونتيجة لكل هذه الإجراءات سوف تحصل على هذا النموذج:

الآن حان الوقت للتعامل مع الخادم. سيتضمن السيناريو الخاص بنا عدة أجزاء:

  • جلسة؛
  • وظائف ثانوية
  • معالجة البيانات الواردة؛
  • إخراج الرسالة.

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

إعدادات

في هذه المرحلة، سنقوم بإنشاء ثلاثة متغيرات: $my_email (صندوق البريد الذي يتم إرسال البيانات إليه)، $path_log (المسار إلى ملف السجل)، و $time_back (الوقت الذي يعود فيه المستخدم إلى الموقع).

// حدد صندوق البريد الخاص بك $my_email = " [البريد الإلكتروني محمي]"; // حدد مكان تخزين السجلات $path_log = "log.txt"; // الوقت الذي يعود فيه المستخدم إلى الموقع (ثانية) $time_back = 3;

وظائف ثانوية

نحن هنا نصف خمس وظائف من شأنها تبسيط عملية معالجة البيانات.

قوالب إخراج الرسالة:

الدالة error_msg($message)( $message = "".$message.""; إرجاع $message; ) الدالة Success_msg($message)( $message = "".$message.""; إرجاع $message; )

مسح البيانات الواردة من النموذج:

وظيفة Clear_data($var)(return Trim(strip_tags($var));)

إرسال الرسالة:

الوظيفة send_mail($email, $subj, $text, $from)( $headers = "From: ".$from." \r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers ) return true;

والوظيفة الأخيرة هي التحقق من الهاتف والبريد من أجل التسجيل الصحيح لتنسيقهما.

وظيفة check_format($data, $type)( Switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; )break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( إرجاع صحيح; ) استراحة; ) إرجاع خطأ; )

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

معالجة البيانات الواردة

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

// تعرف على الصفحة السابقة $prev_page = $_SERVER["HTTP_REFERER"]; // رسائلنا $msg = ""; // حالة البريد الإلكتروني $status_email = "";

الآن، لتجنب مشاكل الترميز، نشير إليه باستخدام الرأس.

Header("نوع المحتوى: نص/html; مجموعة الأحرف=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))( $number = Clear_data ($_POST["number"]); $email = Clear_data($_POST["email"]); $question = Clear_data($_POST["question"]); check_format($email, "email") && !empty($question))( // تشكيل خطاب $e_title = "رسالة جديدة)"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!}
"; $e_body .= "البريد الإلكتروني: ".$email; $e_body .= "
"; $e_body .= "سؤال: ".$question; $e_body .= ""; $e_body .= ""; // النهاية قم بتكوين خطاب if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "success"; $msg = Success_msg("شكرًا لك على سؤالك.
سنرد عليك في أقرب وقت ممكن."); )else( $status_email = "error"; $msg = error_msg("حدث خطأ أثناء إرسال البريد الإلكتروني."); ) // الكتابة إلى الملف $str = " الوقت: ".date ("d-m-Y G:i:s""."\n\r"; $str .= "الهاتف: ".$number."\n\r"; $str .= "البريد: " .$email." \n\r"; $str .= "سؤال: ".$question."\n\r"; str .= "= =================\n\r"; ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "املأ النموذج بشكل صحيح!"); ) )else( $msg = error_msg("حدث خطأ!"); ) )else( خروج ;)

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

إخراج الرسالة

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

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

هذا كل شيء، نموذج ملاحظات بسيط لموقع HTML جاهز. فقط لا تنس تغيير البريد الإلكتروني الموجود في ملف sendmessage.php إلى بريدك الإلكتروني.

إضافة نموذج الملاحظات المنبثق إلى الموقع

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

أولاً، نحتاج إلى توصيل jQury Fancybox، والذي يمكنك تنزيله في نهاية المقالة.

قم بإضافة هذه السطور قبل علامة الإغلاق، فقط قم بتغيير المسار إلى الملفات الخاصة بك.

ونعطيها الأنماط.

Modalbox (اللون: #FFFFFF؛ العرض: كتلة؛ المؤشر: المؤشر؛ الحشو: 10 بكسل 11 بكسل؛ حجم الخط: 1.2em؛ الحدود: صلب 1 بكسل #F9F9F9؛ نصف قطر الحدود: 2 بكسل؛ الخلفية: #70C6B9؛ العرض: 210 بكسل؛ نص -الديكور: لا شيء؛ محاذاة النص: المركز؛ الهامش: 0 تلقائي .modalbox:hover (الخلفية:#979797;)

يرجى ملاحظة أن الزر، عند النقر عليه، سيؤدي إلى ظهور نافذة منبثقة، ويجب تعيين فئة modalbox والمسار href = “#inline”. وبدون ذلك لن يتم فتح النموذج المنبثق على الموقع.

ثم نقوم بإخفاء النموذج الذي أنشأناه سابقًا بحيث يتم فتحه في نافذة منبثقة. للقيام بذلك، تحتاج إلى استبدال الأنماط #inline من القديم إلى الجديد.

#inline ( العرض: لا شيء؛ الهامش الأيسر: 30 بكسل؛ العرض: 80%؛ الهامش: 0 تلقائي؛ الخلفية: #fff؛ الحشو: 10 بكسل 20 بكسل؛)

ونتيجة لذلك، نحصل على زر مثل هذا.

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

مرة أخرى، يمكن تغيير الأنماط وتخطيط الحقول والعناصر حسب حاجتك. على سبيل المثال، للاتصال مرة أخرى من الموقع، سيكون كافيا لترك حقلين فقط - الاسم ورقم الهاتف، وإزالة الحقول المتبقية.

لا تنس أنه لكي يعمل النموذج، ستحتاج إلى إضافة المعالج في نهاية الموقع، المنشور أعلاه، وتحميل ملف sendmessage.php إلى جذر الموقع.

نموذج التعليق على ووردبريس

إذا كان موقعك يعمل على محرك WordPress، فيمكنك استخدام مكونات إضافية خاصة لإضافة نموذج اتصال. أحد أفضل الإضافات الخاصة بـ Contact Form 7، يمكنك تنزيلها من الموقع الرسمي، أو من خلال لوحة الإدارة في قسم الإضافات.

بعد تفعيل البرنامج المساعد، ستظهر علامة تبويب جديدة في القائمة اليسرى. افتحه وانقر فوق "إضافة جديد".

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

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

انسخ هذا الرمز، وانتقل إلى الصفحة المطلوبة، وحدد تنسيق "النص" في المحرر المرئي، والصق هذا الرمز القصير واحفظ الصفحة.

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

الآن سيتمكن زوار موقعك من الاتصال بك من خلال نموذج الاتصال الذي تم إنشاؤه في محرك WordPress.

إنشاء نموذج ملاحظات منبثق لـ WordPress

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

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

    للبدء، الصق الكود التالي مباشرة بعد علامة فتح النص.

    X

    دعونا معرفة ما هو:

    • رابط بالمعرف=”callme-open”، عند النقر عليه، سيتم فتح النموذج الخاص بنا. يرجى ملاحظة أنه لا ينبغي إدراج هذا الرابط بعد العلامة المفتوحة، ولكن في المكان الذي تريد أن يوجد فيه هذا الزر. عادةً ما تتم إضافته إلى الزاوية اليمنى من رأس الصفحة، بجوار رقم هاتف شركتك.
    • ستقوم كتلة bg-b بإنشاء خلفية موقع داكنة عند فتح النموذج المنبثق.
    • ستحتوي كتلة callme على نموذج الملاحظات نفسه.
    • X – سيكون هذا هو الصليب الموجود في زاوية النموذج، عند النقر عليه سيتم إغلاق النموذج.
    • حسنًا، كود php الذي سيتم من خلاله إطلاق الرمز القصير للمكون الإضافي Contact Form 7.

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

    Bg-b ( الموضع: مطلق؛ العرض: 100%؛ الارتفاع: 100%؛ اليسار: 0؛ الأعلى: 0؛ الخلفية: rgba (51,51,51,0.55); مؤشر z: 1000; ) الجسم ( الموضع: نسبي؛ .callme (الموضع: ثابت؛ الأعلى: 30%؛ اليسار: 50%؛ العرض: 300 بكسل؛ الهامش الأيسر: -150 بكسل؛ فهرس z: 1100؛ الخلفية: #fff؛ الحشو: 20 بكسل 20 بكسل 10 بكسل؛ نصف القطر الحدودي :4px;) .callme صغير (الموضع:مطلق; اليمين:10px; الأعلى:10px; حجم الخط:15px; المؤشر:المؤشر;)

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

    يجب إدراج هذا البرنامج النصي في ملف التذييل، قبل علامة إغلاق النص.

    تبقى اللمسات الأخيرة وسيكون النموذج المنبثق على WordPress جاهزًا. قم بإضافة نمط العرض: لا شيء إلى الفئتين .callme و .bg-b. يعد ذلك ضروريًا حتى لا يظهر النموذج على الشاشة عند إطلاق الموقع.

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

    تحديث 06/06/2018

    في أحدث إصدارات ووردبريس، سكربتات jQuery لا تعمل بالرمز $، لذا يجب أخذ ذلك بعين الاعتبار واستبدال $ بـ jQuery

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

    عنوان URL: "http://site.ru/sendmessage.php"

    ويمكنكم تحميل مصادر النموذجين الأولين عن طريق

    تحديث 07/04/2018

    نظرًا للطلبات العديدة، تم تحديث نموذج الملاحظات. الآن يأخذ في الاعتبار مربع الاختيار الخاص بالموافقة على إرسال البيانات وفقًا لتشريعات الاتحاد الروسي رقم 152-FZ "بشأن البيانات الشخصية"، وتم تحسين القدرة على التكيف مع أي دقة شاشة، وتم ضغط ملفات js وcss.

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

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

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

    تم إرسال نموذج تعليقات PHP عبر البريد الإلكتروني

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

    1. JQTransform- مكون إضافي يسمح لك بجعل نموذج ملاحظاتنا جميلًا!

    2. formValidator- ويقوم هذا البرنامج المساعد بفحص نموذج الاتصال للتأكد من صحة المعلومات المدخلة، وإذا حدث شيء ما، يعرض تلميحات الأدوات!

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

    ملاحظة للأذكياء:

    يمكن تقديم نموذج التعليقات الخاص بالموقع بتنسيق HTML! لكنها لن تبدأ العمل إلا بمساعدة PHP! ولا شيء آخر!

    هذا أنا لأولئك الذين يبحثون عن نموذج التعليقات بتنسيق HTML فقط. ستفعل ذلك، لكنه لن ينجح!

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

    لقد قمت بالتنقيب عن نموذج الملاحظات هذا على موقع الويب www.tutorialzine.com، حيث يؤدي الرابط مباشرة إلى الصفحة الأصلية، أي. موقع مؤلف هذا النموذج!

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

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

    1. تم تصميم نموذج التعليقات هذا خصيصًا للبرجوازية، وتم تنزيله من هناك، لذلك سيرسل لك krakozyabl بدلاً من الأحرف الروسية العادية. فهم الترميز. وبشكل عام، سيتم ربط كل "الأختام" بهذا!

    2. نص التحقق من الصحة في البداية لا يفهم رسائلنا، لذلك يجب كتابتها هناك!

    3. حتى بعد هذه الخطوات، إذا قمت بتحديد موضوع الرسالة باللغة الروسية، تصل الرسالة بالموضوع - لا يوجد موضوع (أتمنى أن أكون كتبته بشكل صحيح)، يمكن علاج ذلك إذا قمت بتحديد التشفير في ملف فئة PHPMailer .

    4. في النموذج الأصلي، تم ضغط النص الموجود في حقول الإدخال إلى الأسفل، وليس في المنتصف. هذا خلل في البرنامج المساعد JQTransform.

    حسنًا، يبدو أن كل شيء قد تم كتابته وتحذيره. هيا لنذهب!