نموذج تواصل HTML
نموذج تواصل بـ HTML بسيط. المتصفح يرسله. بلا خادم خلفي ولا إطار عمل ولا خط.
ما الذي تنسخونه
هذا القالب نموذج تواصل مكتوب بـ HTML عادي. يرسله المتصفح بطلب POST عادي. لا يوجد هنا استدعاء fetch، ولا إطار عمل، ولا خطوة بناء.
الصقوا الترميز في صفحة ثابتة، أو في تضمين Webflow، أو في أي موضع يقبل عنصر نموذج. لا تحتاج الصفحة إلى خادم خاص بها.
يسأل النموذج عن الاسم، وعنوان البريد الإلكتروني، والرسالة. الهاتف اختياري. وهذه الكلمات هي أيضًا أسماء الحقول.
يطبع Telegram اسم كل حقل بخط عريض فوق الإجابة. وتبقى الأسماء القصيرة مثل name وemail وmessage مقروءة على الهاتف.
لا يجمع هذا القالب ملفًا، ولا دفعة، ولا تقييمًا لـ Formgong. هو فقط وسيلة ليصلكم بها الزائر.
كيف يعمل الإرسال
سمة action في النموذج هي أصل Formgong مضافًا إليه /submit، والطريقة POST. الحقل المخفي access_key يسمي النموذج.
المفتاح عام، وموضعه في الصفحة. يتيح للزائر إرسال طلب. ولا يمكن به تغيير المستلمين ولا تشغيل ويب هوك.
يحمل الحقل المخفي _lang لغة الصفحة، مثل en. يستخدمه Formgong لصفحة الشكر ولنص الخطأ.
وهو لا يترجم رسالة الزائر. اكتبوا التسميات الظاهرة بلغة الصفحة، وأبقوا أسماء الحقول بالإنجليزية.
المصيدة حقل إدخال اسمه botcheck. يقع خارج الشاشة، مع tabindex -1 وإيقاف autocomplete. يتركه الناس فارغًا.
الطلب الذي يُملأ فيه botcheck يُخزَّن كرسالة غير مرغوب فيها ولا يُسلَّم. ويظل الزائر يرى مسار النجاح العادي.
Turnstile اختياري. يترك المقتطف الأداة داخل تعليق. لا يوجد مفتاح موقع في هذا القالب.
إذا فعّلتم Turnstile للنموذج، فأزيلوا علامات التعليق والصقوا مفتاح الموقع الخاص بكم. وإلى أن تفعلوا ذلك، لا تنفّذ هذه الأسطر شيئًا.
من دون الحقل المخفي _redirect يعرض Formgong صفحة الشكر الخاصة به. ويضبط المقتطف الإضافي _redirect على عنوان https.
استبدلوا https://example.com/thanks بصفحة تتحكمون بها. المسار النسبي غير مقبول.
بعد اللصق
أنشئوا نموذجًا في لوحة التحكم، أو استخدموا الزر في هذه الصفحة، واستبدلوا fk_your_access_key إذا نسختم العنصر النائب.
اربطوا Telegram في إعدادات النموذج عندما تريدون الرسالة على هاتفكم. في الخطة المجانية يكون البريد ملخصًا يوميًا، ويكون Telegram فوريًا.
أرسلوا اختبارًا من الصفحة المنشورة. فتح الملف بصيغة file:// ليس اختبارًا موثوقًا للنموذج الحي.
تحتفظ الخطة المجانية بالطلبات مدة 30 يومًا. ويمكن للخطط المدفوعة الاحتفاظ بها مدة أطول. يخزنها Formgong في الاتحاد الأوروبي.
تشمل الخطة المجانية 300 طلبًا في الشهر. ولا تُحتسب الرسائل غير المرغوب فيها ضمن هذا العدد.
إذا احتجتم إلى نموذج عيادة أو وظيفة أو عرض سعر، فاستخدموا قالبًا قطاعيًا في موضع لاحق من هذا الموقع. هذه الصفحة هي تخطيط التواصل البسيط فقط.
تُرسل أسئلة الخدمة إلى support@formgong.com. Formgong هو مشغّل الخدمة. ولا يسمي هذا القالب أي شركة أخرى مشغّلًا.
معاينة
شيفرة النموذج
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <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" required></label> <label>البريد الإلكتروني <input type="email" name="email" autocomplete="email" required></label> <label>الهاتف <input type="tel" name="phone" autocomplete="tel"></label> <label>الرسالة <textarea name="message" 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> <!-- اختياري. فعّلوا Turnstile لهذا النموذج، ثم أزيلوا علامات التعليق والصقوا مفتاح الموقع. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="ar"></div> --> <button type="submit">إرسال</button> </form>
النموذج نفسه مع تحويل إلى صفحة الشكر
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="ar"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <label>الاسم <input type="text" name="name" autocomplete="name" required></label> <label>البريد الإلكتروني <input type="email" name="email" autocomplete="email" required></label> <label>الهاتف <input type="tel" name="phone" autocomplete="tel"></label> <label>الرسالة <textarea name="message" 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> <!-- اختياري. فعّلوا Turnstile لهذا النموذج، ثم أزيلوا علامات التعليق والصقوا مفتاح الموقع. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="ar"></div> --> <button type="submit">إرسال</button> </form>
أسئلة وأجوبة
هل يحتاج هذا النموذج إلى JavaScript؟
لا. يرسل المتصفح النموذج بنفسه. قالب AJAX هو الذي يبقى في الصفحة بواسطة fetch.
إلى أين تذهب الرسائل؟
إلى صندوق وارد Formgong، وإلى البريد وTelegram عندما تربطونهما. اكتبوا إلى support@formgong.com إذا كان السؤال عن الخدمة نفسها.
هل يمكنكم إضافة حقول أخرى؟
نعم. أضيفوا حقول إدخال بأسماء قصيرة، مثل city. يطبع Telegram هذا الاسم فوق الإجابة. ولا تعيدوا تسمية access_key أو botcheck.
هل ترسل المعاينة رسالة حقيقية؟
لا. لا تعرض المعاينة في هذه الصفحة إلا ملاحظة. ولا يُرسل شيء حتى تضعوا المقتطف في موقعكم مع مفتاح وصول حقيقي.