كيفية تنفيذ النماذج Html في المواقع الثابتة

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

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

يرشدك هذا الدليل خلال خطوات إنشاء نموذج لموقعك الثابت وإضافة خدمة معالجة النماذج ونشر موقعك بمساعدة خدمة استضافة الموقع الثابت من Kinsta  .

اختر خدمة التعامل مع النماذج

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

عندما يرسل المستخدم نموذجًا، يتم إرسال البيانات إلى نقطة نهاية خدمة معالجة النموذج. تقوم الخدمة بعد ذلك بمعالجة البيانات وتخزينها بشكل آمن وإرسال إشعارات إلى المستلمين المناسبين.

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

1.فورمسبري

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

2. شكل دلو

يوفر FormBucket  طريقة ملائمة لجمع وإدارة عمليات إرسال النماذج عن طريق حفظها في “مجموعات”، ولكل منها عنوان URL فريد. يمكنك تحديد الحقول وتعيين قواعد التحقق من صحة النماذج التي تتوافق مع العلامة التجارية لموقع الويب الخاص بك من صفحة لوحة التحكم سهلة الاستخدام في Formbucket.

3. الحصول على النموذج

Getform  عبارة عن منصة خلفية للنماذج توفر طريقة بسيطة وآمنة للتعامل مع عمليات إرسال النماذج. يوفر Getform واجهة مستخدم سهلة الاستخدام لإدارة عمليات إرسال النماذج وإشعارات البريد الإلكتروني والتكامل مع الخدمات الشائعة مثل Slack وGoogle Sheets.

مقارنة خدمات Formspree وFormbucket وGetform

ولتسهيل المقارنة، يوجد أدناه جدول يقارن بين الخدمات الثلاث المذكورة أعلاه وميزاتها الرئيسية:

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

قم بإعداد خدمة معالجة النماذج باستخدام Getform

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

يتيح لك هذا التكامل السلس إدارة جميع الاستجابات بكفاءة داخل صندوق بريد وارد مخصص للرسائل. للبدء، تأكد من أن لديك فهمًا أساسيًا لـ HTML و CSS و JavaScript واتبع الخطوات التالية:

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

   

   سيقوم Getform بإنشاء عنوان URL لنقطة نهاية إرسال النموذج، والذي يجب عليك إضافته إلى سمة عنصر النموذج الخاص بك action .

قم بإنشاء النموذج الخاص بك باستخدام HTML وCSS

الآن وبعد أن قمت بإعداد خدمة معالجة النماذج، يمكنك استخدام HTML و CSS و JavaScript  لإنشاء النموذج الخاص بك.

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

   mkdir forms
   cd forms

2. أضف ملفات المشروع التالية:

   #unix-based systems
   touch index.html styles.css script.js 
   
   #windows
   echo. > index.html & echo. > styles.css & echo. > script.js

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

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="https://kinsta.com/blog/static-site-forms/styles.css">
   </head>
   <body>
       <div class="container">
           <h1 class="form-title">Contact Us</h1>
           <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
               <div class="input-group">
                   <label for="name" class="form-label">Name:</label>
                   <input type="text" id="name" name="name" class="form-input" required>
   
                   <label for="email" class="form-label">Email:</label>
                   <input type="email" id="email" name="email" class="form-input" required>
   
                   <label for="message" class="form-label">Message:</label>
                   <textarea id="message" name="message" class="form-textarea" rows="4" required>
                   </textarea>
               </div>
   
               <div class="form-control">
                   <button type="submit" id="submitBtn" class="form-submit">Submit</button>
               </div>  
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>

4. انتقل إلى لوحة معلومات Getform وانسخ عنوان URL لنقطة النهاية. بعد ذلك، الصق عنوان URL هذا في actionالسمة داخل العلامة الافتتاحية للنموذج الخاص بك في كود HTML.
5. وأخيرًا، لا تتردد في إضافة أنماط CSS في ملف style.css  لتخصيص تصميم النموذج ومظهره.

تنفيذ التحقق من صحة البيانات باستخدام JavaScript

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

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

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

1. أولاً، حدد وظيفة التحقق من الصحة عن طريق إضافة الكود التالي إلى ملف script.js  :

   function validateForm() {
       const name = document.getElementById('name').value;
       const email = document.getElementById('email').value;
       const message = document.getElementById('message').value;
       if (name.trim() === '' || message.trim() === '') {
           alert('Please fill out all fields.');
           return false;
       }
       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       if (!emailRegex.test(email)) {
           alert('Please enter a valid email address.');
           return false;
       }
       return true;
   }

   تخدم الوظيفة validateForm() غرضين: أولاً، تتحقق مما إذا كان حقلا الاسم والرسالة فارغين، ثم تتحقق من صحة حقل البريد الإلكتروني باستخدام تعبير عادي وتتحقق من أن عنوان البريد الإلكتروني بتنسيق صالح.

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

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

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

   document.addEventListener('DOMContentLoaded', function () {
   	const submitButton = document.getElementById('submitBtn');
   
   	if (submitButton) {
   		submitButton.addEventListener('click', function (event) {
   			event.preventDefault();
   			if (validateForm()) {
   				document.forms['contactForm'].submit();
   				resetFormAfterSubmission();
   			}
   			return false;
   		});
   	}
   });
   
   function resetFormAfterSubmission() {
   	setTimeout(function () {
   		const contactForm = document.forms['contactForm'];
   		contactForm.reset();
   	}, 500);
   }

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

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

انشر موقعك الثابت مع Kinsta

تقدم Kinsta حل استضافة مُدار، مما يسمح لك باستضافة مشاريع الويب وقواعد البيانات المختلفة. بفضل خطتها المجانية، يمكنك استضافة ما يصل إلى 100 موقع ثابت مباشرةً من GitHub أو GitLab أو Bitbucket .

لنشر موقعك الثابت مع Kinsta، قم أولاً بدفع الرموز الخاصة بك إلى موفر Git المفضل لديك. بعد ذلك، اتبع الخطوات التالية:

1. قم بتسجيل الدخول  إلى لوحة تحكم MyKinsta.
2. في لوحة المعلومات، انقر فوق  القائمة المنسدلة “إضافة خدمة” وحدد الموقع الثابت .
3. إذا كنت تستضيف مشروعًا لأول مرة مع Kinsta، فحدد وقم بتمكين مزود خدمة Git المفضل لديك.
4. حدد مستودع المشروع الخاص بك.
5. حدد الفرع المراد نشره، وقم بتوفير اسم موقع فريد.
6. حدد المسار الجذري لدليل النشر الذي يحتوي على ملفات HTML وأصول النشر عن طريق إضافة نقطة.
7. وأخيرا، انقر فوق إنشاء موقع .

في غضون ثوانٍ قليلة، سيقوم MyKinsta بنشر موقعك.

لدمج النموذج بسلاسة في موقع موجود، قم بنسخ HTML الخاص بالنموذج ولصقه مباشرة في القسم المطلوب من الموقع. تأكد من تضمين خصائص CSS وكود JavaScript المرتبطين لضمان اتساق التصميم والوظائف.

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

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

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

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

ملخص

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

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

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

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