نموذج التعليقات القابلة للتخصيص: كيفية إنشاء عبر الإنترنت؟ كيف تصنع نماذج ردود الفعل الجميلة من البوب \u200b\u200bHTML و PHP مع هاتف وإرسال طلب بواسطة E -mail؟

تعليمات لإنشاء نموذج ملاحظات على HTML و CSS ، بالإضافة إلى مجموعة من النماذج الجاهزة والدليل لتوصيلها وتكوينها.

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

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

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

الشكل 1. ما هو شكل ردود الفعل ولماذا هو ضروري جدا؟

ما هو شكل ردود الفعل ولماذا هو ضروري جدا؟

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

نموذج التغذية المرتدة هو صفحة أو كتلة منفصلة (قسم) ، تتكون من عدة حقول لإدخال النص وزر "إرسال". كقاعدة عامة ، يحتوي النموذج القياسي على الحقول التالية:

• الاسم الكامل
• البريد الإلكتروني (عنوان البريد الإلكتروني)
• رقم الهاتف المحمول
• عناوين موقعك
• حقل لإدخال رسالة نصية

ومع ذلك ، يمكن أن تكون الحقول بقدر ما تريد ، ويمكن توقيعها كما تريد. كل هذا يتوقف على احتياجاتك وخيالك.

الشكل 2. ما هو شكل ردود الفعل ولماذا هو ضروري جدا؟

• بالإضافة إلى ذلك ، يضيف بعض المالكين بطاقات Google أو Yandex إلى نموذج التعليقات ، وأشكال إدخال الموقع باستخدام الشبكات الاجتماعية "Vkontakte" و "Facebook" و "Google+" وما إلى ذلك. لكننا سنتحدث عن إنشاء أبسط أشكال التعليقات ، التي ستحتاج إليها على دراية بحصرية بأساسيات اللغة التي تتميز لغة البرمجة ولا شيء أكثر.

كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

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

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

كتابة رمز HTML للتعليقات

• الخطوة 1. من أجل الإشارة إلى الشكل في لغة البرمجة يتم استخدام العلامة ‹النموذج› ‹/form›. في الداخل سيتم تعيين أحجام وأنماط وغيرها من الخصائص الحيوية للشكل. عند تسجيل العلامة نفسها ، يحتاج إلى تعيين فئة للإشارة إليها ، الأمر الذي سيساعد في تثبيت النموذج CSS أنماط.

الشكل 1. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 2. كذلك لإنشاء الحقل الأول من شكلنا داخل العلامة \u003cاستمارة\u003e تحتاج إلى كتابة علامة الكتلة ‹P›وهو المسؤول عن إنشاء خط جديد.

الشكل 2. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوه 3. داخل العلامة ‹P› من السطر الجديد ندخل العلامة التالية: ‹تسمية \u003d" الاسم "›اسم \u003c/مُلصَق\u003e. إنه مسؤول عن أسماء مجال النموذج المستقبلي.

الشكل 3. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 4. على الخط الجديد ، كل شيء في نفس العلامة ‹P› نصف علامة إنشاء حقل مع القيم التالية: ‹type type \u003d" text »name \u003d" name "placeholder \u003d"أدخل أسمك "مطلوب \\\u003e. معامل " اكتب \u003d "نص"" يعين نوع حقل النص ، والمعلمة " العنصر النائب \u003d "أدخل أسمك «» يعين النص الأولي في حقل النص بالذات. معامل " مطلوب»يوضح زائر الموقع أن هذا الحقل إلزامي لملء. نتيجة لذلك ، يجب أن تحصل على نموذج بحقل واحد ، كما هو موضح في لقطة الشاشة أدناه.

الشكل 4. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 5. على سبيل المثال أعلاه ، أضف الحقول المتبقية التي تحتاجها ، في كل مرة تبدأ من العلامة ‹P›. لتثبيت حقل برسالة نصية ، استخدم العلامة ‹textarea name \u003d" message "cols \u003d" 50 ″ Rows \u003d "6 ″ مطلوب› ‹/textarea›. خيارات " كولز" و " الصفوف»هي المسؤولة عن عرض وارتفاع حقل النص. يمكنك تعيين المعلمات التي تحبها أكثر. يجب أن تحصل على شيء من هذا القبيل الموضح في لقطة الشاشة أدناه.

الشكل 5. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 6. لحماية نفسك من الروبوتات ، التي هي كثيرًا على الإنترنت اليوم ، قم بإنشاء سطر آخر مع علامة ‹اسم الإدخال \u003d" bezspama "type \u003d" text »style \u003d" display: none "value \u003d" " /›. بسبب المعلمة " النمط \u003d "Display: None"»لن يكون هذا الحقل مرئيًا من قبل البشر ، ولكن سيتم ملء الروبوتات تلقائيًا. وبالتالي ، يمكنك دائمًا التمييز بين الشخص الحي عن البرنامج.

الشكل 6. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 7. ستكون المرحلة الأخيرة من العلامة هي إنشاء زر إرسال. يتم استخدام العلامة لهذا \u003cزر\u003e. إنشاء كتلة جديدة ‹P› وداخله ، أدخل رمز الزر مع المعلمات التالية: ‹button class \u003d" إرسال "type \u003d" إرسال "›ارسل رسالة \u003c/زر\u003e. يجب أن تتحول نتيجة مماثلة ، كما هو موضح في لقطة الشاشة.

الشكل 7. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

العمل مع أنماط متتالية (CSS)

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

الشكل 8. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

قم بتوصيل الأنماط CSS إلى لغة البرمجة يمكنك طريقتان:

• انسخ الرمز من جدولنا المتتالي إلى أسفل الملف style.cssالذي هو موجود في استضافة الموقع
• انقل ملف أنماطنا إلى استضافةك وتوصيله

ملف style.css يتصل داخل العلامة ‹الرأس› ‹/head› باستخدام البرنامج النصي ‹Link Rel \u003d" STYLESHEET "media \u003d" screen "href \u003d" style.css "›. في حالة عدم وجود ملف له أنماط لا يكمن في نفس المجلد مثل ملف HTML الرئيسي ، فأنت بحاجة إلى تحديد المسار إليه. في ملفنا مع أنماط ، كل عنصر لديه تسمية. إذا كنت ترغب في ذلك ، يمكنك تغيير المعلمات بنفسك ، وتوجيهها فقط من خلال مهارات البرمجة الأساسية.

اتصال ملف PHP وإعداده

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

على عكس الملف style.css، يتم إرفاق ملف مع برنامج نصي PHP في خصائص النموذج نفسه. لنبدأ بالترتيب:

• الخطوة 1. افتح الرمز المكتوب مسبقًا وابحث عن سطر مع علامة نموذج مفتوح. أضف خصائص إليها " action \u003d "contact-form.php"" و " الطريقة \u003d "post"". شاهد مثالًا في لقطة الشاشة.

الشكل 9. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 2. قم بتنزيل ملف PHP الخاص بنا ووضعه على الاستضافة في نفس المجلد حيث يوجد مستند HTML. وبالتالي ، سوف تتفاعل ملفات PHP و HTML مع بعضها البعض.

الشكل 10. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

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

الشكل 11. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 4. بعد ذلك ، تحتاج إلى إضافة متغيرين آخرين مع عنوان بريدك الإلكتروني وموضوع الرسالة التي سيتم عرضها على المربع الخاص بك. في خط مع متغير " عنوان $"أشر إلى البريد الإلكتروني ، وفي الخط" $ sub»يتم عرض موضوع الرسالة في لقطة الشاشة.

الشكل 12. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

• الخطوة 5. في خط مع متغير " $ ms»يتم تكوين تنسيق الرسالة التي ستتلقاها عن طريق البريد. يمكنك إعادة كتابتها دون تغيير أو تحرير ذوقك الخاص.

الشكل 13 كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

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

الشكل 14. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

قم بتنزيل ملفات CSS و PHP للتعليقات

بعد تنفيذ جميع الإجراءات في الإخراج ، ستتلقى مثل هذا النموذج البسيط للتغذية المرتدة

الشكل 15. كيفية إنشاء أبسط نموذج التعليقات للموقع على HTML و PHP؟

مجموعة مختارة من أشكال التصميم الجميلة من التعليقات على HTML و CSS لأغراض مختلفة

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

الشكل 1. مجموعة مختارة من أشكال التصميم الجميلة من ردود الفعل على HTML و CSS لأغراض مختلفة

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

قم بتنزيل مجموعة مختارة من نماذج المصمم من الملاحظات للمواقع

الفيديو: إعادة صياغة ردود الفعل إعادة صياغة ردود الفعل