دليل شامل: إنشاء نموذج اتصال احترافي باستخدام Netlify Forms و Next.js

Updated يونيو 14, 2026 11 min read

Aldawsari

دقائق القراءة: 11

مقدمة: لماذا نماذج الاتصال ضرورية وكيف تسهلها Netlify؟

تُعد نماذج الاتصال جزءًا لا يتجزأ من أي موقع ويب أو تطبيق تفاعلي، فهي الجسر الذي يربط بين الزوار وأصحاب المواقع، مما يتيح جمع المعلومات، استقبال الاستفسارات، أو حتى معالجة الطلبات. تقليديًا، يتطلب التعامل مع إرسالات النماذج إما خدمة خارجية إضافية أو كتابة أكواد معقدة من جانب الخادم (server-side code). لكن ماذا لو كان هناك حل أبسط وأكثر فعالية؟ هنا يأتي دور Netlify Forms، التي تُقدم طريقة سلسة لإنشاء وإدارة النماذج دون الحاجة إلى تعقيدات برمجية.

ما هي Netlify؟

Netlify هي منصة ويب قوية ومتكاملة تُمكن المطورين من نشر مشاريع الويب بسهولة فائقة، مع توفير سير عمل قابل للتكوين. لا تقتصر خدماتها على استضافة المواقع الثابتة (static websites) ودوال Lambda فحسب، بل تمتد لتشمل ميزة Netlify Forms المخصصة. تعمل خدمة النماذج هذه كجزء من عملية البناء والنشر (build and deployment pipeline) للموقع. عندما تقوم بتضمين نموذج (form) يحتوي على سمة معينة في صفحتك، تتعرف Netlify عليه تلقائيًا وتُهيئه ليعمل بكفاءة.

ماذا سنبني في هذا الدليل؟

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

تكلفة استخدام Netlify Forms

تُقدم Netlify Forms خطة مجانية للبدء، وهي محدودة بـ 100 عملية إرسال للنموذج شهريًا لكل موقع ويب. إذا بقيت ضمن هذا الحد، فستظل الخدمة مجانية تمامًا. ومع ذلك، إذا تجاوزت 100 عملية إرسال على أي موقع، فإن الفئة الأولى المدفوعة تبدأ من 19 دولارًا أمريكيًا شهريًا (وقت كتابة هذا المقال). يُمكنك دائمًا التحقق من أحدث خطط التسعير على موقع Netlify الرسمي.

الجزء الأول: إنشاء نموذج اتصال باستخدام HTML النقي

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

الخطوة 1: بناء نموذج HTML الأساسي

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

للبدء، أنشئ ملف HTML جديدًا في الجذر الرئيسي لمشروعك. يجب أن يتضمن هذا الملف البنية الأساسية لوثيقة HTML. داخل وسم <body>، أضف نموذجنا الجديد:

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </p>
  <p>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" />
  </p>
  <p>
    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

في المقتطف أعلاه، قمنا بالآتي:

إنشاء نموذج جديد.
يحتوي النموذج على سمة name، وسمة method بقيمة "POST"، وسمة data-netlify مضبوطة على "true". هذه السمات حاسمة لكي تتعرف Netlify على النموذج.
إنشاء ثلاثة حقول للنموذج مع تسميات (labels)، كل منها مُعرّف بسمة name.
إنشاء زر لإرسال النموذج.

أهم ما يجب ملاحظته هو سمة data-netlify واسم النموذج (form name). عندما تقرأ Netlify الموقع، ستتعرف على هذه الحقول وتستخدمها لتحويل نموذجك إلى نموذج فعال ونشط.

يمكنك أيضًا إضافة بعض الأنماط (CSS) لجعل التسميات تبدو أكثر تناسقًا. يمكنك اختياريًا إضافة هذا إلى وسم <head> في وثيقتك:

<style>
  body {
    font-family: sans-serif;
  }
  label {
    display: block;
    margin-bottom: .2em;
  }
</style>

وفي هذه المرحلة، يجب أن يكون لدينا نموذج أساسي جاهز!

الآن، ستحتاج إلى رفع هذا النموذج إلى GitHub أو أي مزود Git آخر تدعمه Netlify، وسنكون جاهزين للخطوة التالية.

الخطوة 2: تهيئة النموذج الجديد مع Netlify

بمجرد دفع نموذجنا إلى مزود Git الخاص بنا، يمكننا الآن مزامنته مع Netlify. أولاً، قم بإنشاء حساب أو استخدم حسابًا موجودًا في Netlify وانقر على زر New site from Git.

هنا، حدد مزود Git الذي استخدمته. في مثالنا، سنستخدم GitHub.

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

إذا كنت تتبع هذا الدليل، فإن نموذجنا هو HTML نقي، مما يعني أنه لا توجد خطوات بناء (build steps) أو دليل خاص يتم النشر إليه. ولكن لا تتردد في تعديل هذه الإعدادات إذا قمت بشيء مختلف.

الآن، انقر فوق Deploy site، والذي سيفتح صفحة جديدة في Netlify، وفي وقت قصير سيتم نشر موقعك بنجاح.

أخيرًا، انقر على الرابط (URL) في الجزء العلوي من لوحة تحكم مشروع Netlify الذي ينتهي بـ netlify.app. بمجرد تحميله، سترى نموذجك!

الخطوة 3: عرض إرسالات النموذج

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

بمجرد الإرسال، ستلاحظ أنك تنتقل إلى صفحة Netlify تُفيد بأن النموذج قد تم إرساله بنجاح. يمكنك الآن العودة إلى لوحة تحكم مشروع Netlify الخاصة بك والتمرير لأسفل قليلًا حيث يمكنك رؤية مربع يعرض Recent form submissions بالإضافة إلى إرسالك الجديد.

الجزء الثاني: إضافة نموذج Netlify مخصص إلى تطبيق React (Next.js)

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

ملاحظة: عرضنا لـ Next.js هو لتطبيق يتم عرضه بشكل ثابت (statically rendered app). إذا كنت تقوم بتحميل نموذجك من جانب العميل (client-side)، مما يعني أن HTML الأساسي لا يتضمن النموذج، فراجع الملاحظات في نهاية هذه الصفحة للحصول على مزيد من المعلومات حول الحلول.

الخطوة 0: إعداد تطبيق Next.js جديد

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

yarn create next-app [project-name]
# أو
npx create-next-app [project-name]

سنقوم بتسمية مشروعنا my-nextjs-netlify-form. بمجرد أن ينتهي Next.js من تثبيت التبعيات (dependencies)، سيعطيك تعليمات للانتقال إلى دليل مشروعك وبدء خادم التطوير (development server). وبعد تشغيل yarn dev أو npm run dev، يجب أن تكون جاهزًا للعمل مع تطبيق Next.js الخاص بك:

الخطوة 1: دمج نموذج HTML في تطبيق Next.js

ستبدو خطوتنا الأولى مشابهة جدًا للجزء الأول. داخل ملف pages/index.js، نريد العثور على مُغلف الشبكة (grid wrapper) وسنستخدمه لإضافة نموذجنا. ابحث عن <div className={styles.grid}> واستبدل الكتلة بأكملها بما يلي:

<div className={styles.grid}>
  <div className={styles.card}>
    <form name="contact" method="POST" data-netlify="true">
      <p>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" />
      </p>
      <p>
        <label htmlFor="email">Email</label>
        <input type="text" id="email" name="email" />
      </p>
      <p>
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message"></textarea>
      </p>
      <p>
        <button type="submit">Send</button>
      </p>
    </form>
  </div>
</div>

ما نقوم به هنا هو:

الاستفادة من الشبكة الموجودة في Next.js.
الاستفادة من البطاقة (card) الموجودة التي سنُضمن نموذجنا فيها.
داخل البطاقة، نقوم بلصق نفس نموذج HTML تمامًا كما في الجزء الأول.

إذا أعدنا تحميل الصفحة، يمكننا الآن رؤية نموذجنا داخل بطاقة، هكذا:

الآن قبل المتابعة، نريد القيام بشيئين. أولاً، نظرًا لأننا ننشئ هذا النموذج في تطبيق JavaScript، توصي Netlify بإضافة حقل إدخال مخفي (hidden input) باسم النموذج الخاص بنا. داخل نموذجنا، أضف الإدخال التالي في الجزء العلوي من عنصر النموذج:

<input type="hidden" name="form-name" value="contact" />

تأكد من أن قيمة هذا الإدخال هي نفسها اسم النموذج الخاص بك (contact). ثانيًا، نظرًا لأن البطاقة التي نعيد استخدامها مخصصة لقائمة من الروابط، يتضمن Next.js بعض تأثيرات التمرير (hover effects). هذا يجعل النموذج مربكًا للاستخدام، لذا دعنا نزيلها. أزل ما يلي من ملف styles/Home.module.css:

.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}

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

وعندما تكون جاهزًا، على غرار ما سبق، أضف هذا كمستودع جديد إلى GitHub أو مزود Git المفضل لديك.

الخطوة 2: إعداد ونشر تطبيق Next.js الخاص بك على Netlify

سيبدو نشر تطبيقنا على Netlify مشابهًا جدًا، ولكن قبل أن نصل إلى هناك، نحتاج إلى إعداد تطبيق Next.js الخاص بنا ليكون قادرًا على التصدير عند البناء (export on build). في تطبيق Next.js الخاص بنا، داخل ملف package.json، نريد تحديث سكربت البناء (build script) إلى:

"build": "next build && next export"

الآن عندما تقوم بتشغيل سكربت build، سيقوم بتجميع التطبيق إلى HTML و CSS و JS ثابت داخل دليل out. سيتيح لنا هذا نشره على Netlify. يمكنك حتى تجربته محليًا على جهازك إذا أردت. مع هذا التغيير، قم بحفظه ودفعه إلى مزود Git الخاص بك.

بعد ذلك، سيبدو نشر التطبيق مشابهًا في الغالب للجزء الأول. الفرق الوحيد هو أنه نظرًا لأن لدينا تطبيق Next.js، نحتاج إلى إضافة خطوات البناء الخاصة بنا. للبدء، سنرغب في توصيل مزود Git الخاص بنا تمامًا كما في الجزء الأول. بمجرد وصولنا إلى صفحة Deploy Settings، نريد تكوين أمر البناء (Build command) ودليل النشر (Publish directory).

سيكون أمر البناء الخاص بنا هو yarn build أو npm run build اعتمادًا على مدير الحزم الذي استخدمته.
سيكون دليل النشر هو out.

بعد ذلك، انقر فوق Deploy site، وسيبدأ تمامًا كما كان من قبل. بمجرد الانتهاء من النشر، سنكون جاهزين لفتح التطبيق.

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

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

ميزة إضافية: الحفاظ على الزوار في موقعك برسالة نجاح

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

للقيام بذلك، على نموذج HTML الخاص بك، أضف السمة التالية:

action="/?success=true"

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

بعد ذلك، يمكننا استخدام خطافي useState و useEffect (hooks) لرؤية هذه المعلمة وتحديث الصفحة. في الجزء العلوي من الملف، دعنا نستورد هذه الخطافات:

import { useState, useEffect } from 'react';

داخل مكون Home الخاص بنا في الأعلى، دعنا نضيف حالتنا (state):

const [success, setSuccess] = useState(false);

وللكشف عن معلمة URL، يمكننا استخدام خطاف useEffect:

useEffect(() => {
  if (window.location.search.includes('success=true')) {
    setSuccess(true);
  }
}, []);

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

ما يفعله هذا هو أنه عندما يتم عرض المكون (component renders)، سيتم تشغيل خطاف useEffect هذا، والتحقق من المعلمات في URL، والبحث عن success=true. إذا وجدها، فسيقوم بتحديث متغير حالة success الخاص بنا إلى true!

بعد ذلك، تحت عنوان صفحتنا (<h1>)، دعنا نضيف المقتطف التالي:

{success && (
  <p style={{ color: 'green' }}>Successfully submitted form!</p>
)}

هنا، نتحقق مما إذا كانت قيمة success صحيحة (true)، وإذا كانت كذلك، فإننا نُضمّن سطرًا نصيًا يقول إن النموذج قد تم إرساله بنجاح.

بينما لا يمكنك إرسال نموذجك محليًا، يمكنك اختبار هذا عن طريق زيارة تطبيقك الذي يعمل محليًا مع معلمة URL ?success=true مثل:

http://localhost:3000/?success=true

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

وستلاحظ أن نموذجنا لا يزال يُرسل بنجاح!

ملاحظات هامة حول Netlify Forms والكود من جانب العميل

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

خيارات متقدمة لـ Netlify Forms

إعداد سير عمل متقدم مع أدوات أخرى

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

منع البريد العشوائي (Spam) باستخدام reCAPTCHA

البريد العشوائي (Spam) مشكلة حقيقية. لا تريد أن يغمر صندوق بريدك بالرسائل غير المرغوب فيها، لذا يمكنك الاستفادة من حقل Honeypot المدمج في Netlify أو يمكنك اتباع إرشاداتهم حول كيفية إضافة reCAPTCHA 2. اطلع على وثائق Netlify حول مرشحات البريد العشوائي.

الخلاصة التقنية

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