نموذج اتصال Gatsby

Formgong team ·

نموذج اتصال Gatsby يستطيع الإرسال من المتصفح إلى Formgong. يخرج Gatsby ملفات ثابتة، لذلك لا يوجد خادم يستقبل POST. لا تحتاج إلى دالة Gatsby ولا إلى سر للبريد. الصق النموذج وغيّر المفتاح، فتصل الطلبات بالبريد وفي Telegram. يبقى الموقع ثابتًا من دون خادم.

Gatsby
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ar">
  <label>الاسم <input type="text" name="name" autocomplete="name" placeholder="اسمك" required></label>
  <label>البريد الإلكتروني <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>الرسالة <textarea name="message" placeholder="كيف يمكننا مساعدتك؟" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>اترك هذا الحقل فارغًا<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">إرسال</button>
</form>

كيف تعمل النماذج في Gatsby

يحوّل Gatsby صفحات React إلى HTML ثابت. دليل النموذج لديه يذكر خدمة نماذج أو Netlify Forms أو خادمًا تديره أنت. Gatsby Functions هو المسار الموثق على الخادم. إنها دالة تنشرها وتبقيها.

ملف داخل src/pages يمكن أن يحمل نموذج HTML عاديًا. يرسل إلى https://formgong.com/submit مع access_key و_lang وbotcheck. لا يصل إلى المتصفح إلا الأسماء التي تبدأ بـ GATSBY_. هذا المفتاح عام، لذا هذه البادئة مناسبة.

الإعداد في Gatsby

  1. أنشئ نموذجًا في Formgong وانسخ المفتاح. يبدأ بـ fk_.
  2. أضف src/pages/contact.js والصق النموذج. اجعل الإجراء https://formgong.com/submit.
  3. استبدل fk_your_access_key. اسم مثل GATSBY_FORMGONG_KEY اختياري. لا تضع كلمة سر SMTP في اسم يبدأ بـ GATSBY_.
  4. شغّل gatsby develop وأرسل تجربة. ثم شغّل gatsby build. يعمل POST في المتصفح، لذلك تتصرف النسخة المنشورة بالطريقة نفسها.
  5. إذا كان الموقع على Netlify فلا تضف data-netlify. نموذج React وحده لا يظهر في فحص HTML إلا إذا نشرت أيضًا نسخة مخفية تحمل form-name.

Formgong أم دالة Gatsby؟

استخدم Gatsby Function إذا كان الإرسال يغيّر قاعدة بياناتك أو يستدعي واجهة خاصة.

استخدم Formgong لنماذج الاتصال. تتجنب SMTP ودالة تستضيفها وHTML المخفي الذي تطلبه Netlify من React.

أسئلة وأجوبة

هل يتضمن Gatsby نموذج اتصال؟

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

لماذا لا ترى Netlify نموذج Gatsby؟

تقرأ Netlify ملف HTML بعد البناء. النموذج الذي يظهر فقط بعد تشغيل React يضيع. أرسل إلى Formgong أو أضف نسخة ثابتة مخفية.

هل أستطيع استخدام fetch والبقاء في الصفحة؟

نعم. استدع fetch على https://formgong.com/submit وأرسل Accept: application/json. نموذج HTML يعمل إذا كان JavaScript متوقفًا.

هل المفتاح آمن داخل حزمة Gatsby؟

نعم. يقبل فقط إرسالات نموذجك. في Pro يمكنك حصر النطاقات. لا تضع مفاتيح خاصة في اسم GATSBY_.

ابدأ مجانًا