نموذج اتصال JavaScript يرسل إلى البريد

Formgong team · Updated 2026-10-06

نموذج اتصال JavaScript ما زال يحتاج عنوانًا لـ POST. استدع fetch، وأرسل الحقول، واقرأ رد JSON. يقبل Formgong هذا الاستدعاء بلا خادم لديك. لا تلزم مكتبة ولا مسار API ولا SMTP خاص. في الخطة المجانية Telegram فوري، والبريد ملخص يومي.

انسخ نموذج JavaScript هذا

لغة النموذجالتسميات والنصوص التوضيحية والزر ورسائل Formgong للزوار (_lang).

JavaScript

<form id="fg-contact" 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>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "تم الإرسال. شكرًا لك!" : "تعذّر الإرسال. يرجى المحاولة مرة أخرى.");
      if (result.success) form.reset();
    } catch {
      status.textContent = "فشل الاتصال. يرجى المحاولة مرة أخرى.";
    } finally {
      button.disabled = false;
    }
  });
</script>

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="hi">
  <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>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
      if (result.success) form.reset();
    } catch {
      status.textContent = "कनेक्शन विफल। कृपया फिर से कोशिश करें।";
    } finally {
      button.disabled = false;
    }
  });
</script>

أرسل FormData بدل JSON

أرسل FormData بدل JSON

<script>
  const form = document.querySelector("#fg-contact");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const status = form.querySelector("[role=status]");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "تم الإرسال. شكرًا لك!" : "تعذّر الإرسال. يرجى المحاولة مرة أخرى.");
      if (!result.success) return;
      form.reset();
    } catch {
      status.textContent = "فشل الاتصال. يرجى المحاولة مرة أخرى.";
    }
  });
</script>

استدعاء fetch فقط إذا كان النموذج في الصفحة

استدعاء fetch فقط إذا كان النموذج في الصفحة

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "ar", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "تعذّر الإرسال. يرجى المحاولة مرة أخرى.");
  return result.message; // localized "Sent. Thank you!"
}

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

الناس يبحثون عن نموذج JavaScript يرسل البريد، لا عن نموذج fetch. fetch مجرد استدعاء المتصفح الذي ينفذ POST. لا يلزم EmailJS ولا Axios ولا مسار خادم.

أرسل ترويسة Accept بقيمة application/json، وإلا يرد الطرف بتحويل كما في النموذج العادي. fetch الفاشل يرمي خطأ. الطلب المرفوض يعود و success فيه false مع نص يمكنك إظهاره.

الإعداد في JavaScript

أنشئ نموذجًا في Formgong وانسخ المفتاح.
الصق الرمز أعلاه. هو نموذج ونص قصير: async و await و JSON و try catch لأخطاء الشبكة.
اترك حقل الفخ فارغًا وخارج الشاشة. إذا ملأه روبوت، يُحفظ الطلب كمزعج ولا يُسلّم.
يعطل النص الزر أثناء الطلب ثم يظهر نص الرد. النجاح يفرغ النموذج.
افتح الصفحة الحية وأرسل تجربة. راجع الصندوق، ثم اربط Telegram إذا أردت تنبيهًا على الهاتف.

طرق إرسال نموذج JavaScript

الخيار	ما تشغّله أنت	ما تحصل عليه
mailto:	لا شيء على خادم. يفتح البريد.	رسالة فقط إذا أرسل الزائر. على الهاتف ينكسر هذا بسهولة.
مسار API خاص	خادم و SMTP وسر.	بريد تتحكم به. ويبقى لديك المزعج والتوقف والرمز.
EmailJS	نصهم في الصفحة.	بريد عبر خدمتهم. لا سعر في هذا الصف. لم يُراجع السعر ذلك اليوم.
Formspree	لا شيء. المتصفح يرسل إلى Formspree.	بريد ولوحة. المجاني 50 إرسالًا في الشهر. Personal يكلف 15 دولارًا في الشهر.
Formgong	لا شيء. fetch يرسل إلى Formgong.	Telegram فورًا. في Free البريد ملخص يومي. 300 إرسال في الشهر، والبيانات في الاتحاد الأوروبي.

أسعار Formspree من formspree.io/plans في 2026-10-06. حدود Formgong من الرمز. EmailJS يظهر في هذا البحث. لم يُراجع سعره ذلك اليوم. رد Web3Forms.com بـ HTTP 403، لذا ليس في الجدول.

الأسعار · نموذج اتصال HTML يرسل إلى البريد

حزمة المكوّنات: npm install @formgong/core (npm: @formgong/core)

أضف إلى مشروع قائم: npx formgong init (npm: formgong)

fetch أم مكتبة أم خادمك؟

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

استخدم HTML العادي إذا قد يكون JavaScript مغلقًا. النموذج أعلاه ما زال فيه action، فيعمل إن لم يجر النص.

اكتب خادمك فقط إذا كان الطلب يغيّر بيانات في تطبيقك. EmailJS يرسل عبر نصه. Formgong طلب POST واحد.

أسئلة وأجوبة

هل يرسل JavaScript النموذج إلى البريد بلا خادم؟

المتصفح لا يتحدث SMTP. يمكنه إرسال الحقول بـ POST إلى خلفية. تلك الخلفية ترسل البريد. أنت لا تشغّل خادمًا لهذا النموذج.

هل أرسل FormData أم JSON؟

JSON يناسب حقول النص. FormData يناسب إذا كان النموذج موجودًا وإذا أرسلت ملفاتًا. كلاهما يصل إلى الصندوق نفسه. لا تضع Content-Type بنفسك مع FormData.

لماذا أحصل على تحويل بدل JSON؟

POST النموذج العادي يعيد تحويلًا. للحصول على JSON أرسل ترويسة Accept بقيمة application/json. ثم اقرأ success والنص.

كيف أعالج الأخطاء؟

fetch الفاشل يرمي خطأ. هذا خطأ شبكة. الطلب المرفوض يعيد JSON و success فيه false. أظهر هذا النص وأبق ما كتبه الشخص.

هل أحتاج EmailJS أو مكتبة أخرى؟

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

ابدأ مجانًا

كل المنصات →