نموذج تواصل بالوضع الداكن

نموذج تواصل بألوان داكنة وكتلة تنسيق في الصفحة. يستخدم خط النظام ولا يحمّل ملف خط.

سجّلوا الدخول لاستخدام القالب

ما الذي تنسخونه

هذا القالب نموذج تواصل بمخطط ألوان داكن مكتوب في قالب أسلوب على الصفحة.

مكدس الخطوط هو system-ui وSegoe UI. ولا يحمّل المقتطف ملف خط، ولا يتصل بمستضيف خطوط.

الألوان مضبوطة على النموذج نفسه: خلفية داكنة، ونص فاتح، وزر فاتح. وهي لا تعتمد على CSS الخاص بـ Formgong.

تستخدم المعاينة في هذا الموقع الفكرة نفسها، مع ورقة أنماط الموقع، حتى تروا التباين قبل النسخ.

الإرسال هو POST من HTML عادي. والألوان الداكنة لا تغيّر access_key ولا _lang ولا botcheck.

داكن دائمًا، أو وفق النظام

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

المقتطف الإضافي فاتح افتراضيًا، وينتقل إلى الألوان الداكنة نفسها داخل prefers-color-scheme: dark.

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

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

ترث حقول الإدخال الخط. لا يوجد @import ولا رابط إلى ورقة أنماط على نطاق آخر.

التسليم والحدود

يمكن ترجمة التسميات. وتبقى أسماء الحقول name وemail وphone وmessage حتى يبقى Telegram قصيرًا.

تستخدم المصيدة أسلوبًا قصيرًا حتى تبقى خارج الشاشة في المخطط الفاتح والداكن معًا.

Turnstile اختياري وموضوع داخل تعليق. ولا تلصقوا مفتاح الموقع إلا بعد تفعيل Turnstile على النموذج.

تسمح الخطة المجانية بـ 300 طلب في الشهر، وتحتفظ بها 30 يومًا في الاتحاد الأوروبي، وترسل Telegram فورًا، وترسل البريد ملخصًا يوميًا.

Formgong هو المشغّل. وsupport@formgong.com هو عنوان الدعم.

معاينة

شيفرة النموذج

HTML

<style>
.fg-dark {
  font-family: system-ui, "Segoe UI", sans-serif;
  color: #e8eaef;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: 12px;
  max-width: 32rem;
}
.fg-dark label { display: grid; gap: 4px; }
.fg-dark input, .fg-dark textarea {
  font: inherit;
  color: inherit;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 10px;
}
.fg-dark button {
  font: inherit;
  background: #e8eaef;
  color: #161b22;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
}
</style>
<form class="fg-dark" 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" 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>

فاتح افتراضيًا، وداكن إذا كان النظام كذلك

فاتح افتراضيًا، وداكن إذا كان النظام كذلك

<style>
.fg-auto { font-family: system-ui, "Segoe UI", sans-serif; display: grid; gap: 12px; max-width: 32rem; }
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea, .fg-auto button { font: inherit; }
@media (prefers-color-scheme: dark) {
.fg-auto {
  font-family: system-ui, "Segoe UI", sans-serif;
  color: #e8eaef;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: 12px;
  max-width: 32rem;
}
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea {
  font: inherit;
  color: inherit;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 10px;
}
.fg-auto button {
  font: inherit;
  background: #e8eaef;
  color: #161b22;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
}
}
</style>
<form class="fg-auto" 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" 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>

أسئلة وأجوبة

هل سيصطدم هذا بالسمة الداكنة لموقعي؟

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

هل يمكن استخدام لون العلامة على الزر؟

نعم. غيّروا خلفية الزر في قالب الأسلوب. ولا تضيفوا استيراد خط لمطابقة محرف علامة من طرف ثالث.

هل يومض المقتطف الخاص بالنظام فاتحًا ثم داكنًا؟

يبدأ فاتحًا، ثم يطبّق المتصفح استعلام الوسائط. ومن يفضّلون الألوان الداكنة يُفترض أن يروا القواعد الداكنة من دون طلب ثانٍ.

هل المصيدة ظاهرة في الوضع الداكن؟

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