نموذج تواصل Tailwind
فئات مساعدة فقط. يجب أن يكون Tailwind موجودًا في الصفحة. هذا المقتطف لا يضيف سكربت CDN ولا خطًا.
ما الذي تنسخونه
هذا القالب نموذج تواصل موسوم بفئات Tailwind المساعدة. ويظل إرسالًا عاديًا بطريقة POST إلى Formgong.
لا يحمّل المقتطف Tailwind. ولا يضيف برنامجًا نصيًا من شبكة CDN، ولا يحمّل خطًا.
يجب أن يكون Tailwind موجودًا أصلًا في صفحتكم أو في بنائكم. وإذا غابت الفئات، فسيُرسل النموذج، لكنه سيظهر بلا تنسيق.
رُسمت المعاينة في هذه الصفحة بـ CSS الخاص بـ Formgong حتى تروا الحقول. وهي ليست عرضًا من Tailwind.
تتبع التسميات الظاهرة لغة الصفحة. وتبقى أسماء الحقول name وemail وphone وmessage من أجل Telegram.
الفئات والإضافة الداكنة
تستخدم حقول الإدخال إطارًا وحشوًا ونصف قطر صغيرًا. وتستخدم الزر خلفية داكنة ونصًا فاتحًا. ولا توجد عائلة خط مخصصة.
لا تضيفوا فئة تشير إلى خط محمّل. خط الموقع الذي تستخدمونه أصلًا كافٍ.
يضيف المقتطف الإضافي فئات dark: للنص والإطارات والخلفيات. ولا تفعل شيئًا حتى يتضمن بناء Tailwind لديكم الوضع الداكن.
قد يتبع الوضع الداكن في Tailwind النظام، أو فئة على عنصر html. وهذا القالب لا يضبط ذلك. هو يضيف الفئات فقط.
إذا كنتم لا تستخدمون الوضع الداكن، فانسخوا المقتطف الأول واتركوا الإضافي.
تبقى المصيدة مخفية بصريًا بسمة style قصيرة، لا بفئة Tailwind، فتبقى مخفية حتى إذا غاب Tailwind.
الإرسال نفسه كما في قالب HTML
يطابق action والطريقة وaccess_key و_lang وbotcheck قالب HTML العادي. ولا يغيّر Tailwind الطلب.
يبقى Turnstile داخل تعليق حتى تفعّلوه وتلصقوا مفتاح موقع. والعنصر النائب YOUR_TURNSTILE_SITE_KEY ليس مفتاحًا حقيقيًا.
في الخطة المجانية يصل Telegram فورًا ويكون البريد ملخصًا يوميًا. وتبقى الطلبات 30 يومًا. والسماح الشهري 300.
استبدلوا fk_your_access_key بالمفتاح من لوحة التحكم، أو استخدموا الزر في هذه الصفحة وأنتم داخلون.
Formgong هو المشغّل. وتُرسل أسئلة المنتج إلى support@formgong.com.
معاينة
شيفرة النموذج
<!-- هذا الترميز يفترض أن Tailwind موجود في الصفحة. لا يحمّل Tailwind ولا CDN ولا خطًا. --> <form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="ar"> <label class="grid gap-1 text-sm"><span class="font-medium">الاسم</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="text" name="name" autocomplete="name" required></label> <label class="grid gap-1 text-sm"><span class="font-medium">البريد الإلكتروني</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="email" name="email" autocomplete="email" required></label> <label class="grid gap-1 text-sm"><span class="font-medium">الهاتف</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="tel" name="phone" autocomplete="tel"></label> <label class="grid gap-1 text-sm"><span class="font-medium">الرسالة</span><textarea class="w-full rounded-md border border-neutral-300 px-3 py-2" 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 class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">إرسال</button> </form>
الحقول نفسها مع فئات dark: في Tailwind
<!-- هذا الترميز يفترض أن Tailwind موجود في الصفحة. لا يحمّل Tailwind ولا CDN ولا خطًا. --> <form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4 dark:text-neutral-100"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="ar"> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">الاسم</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="text" name="name" autocomplete="name" required></label> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">البريد الإلكتروني</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="email" name="email" autocomplete="email" required></label> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">الهاتف</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="tel" name="phone" autocomplete="tel"></label> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">الرسالة</span><textarea class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" 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 class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">إرسال</button> </form>
أسئلة وأجوبة
هل يعمل هذا في Lovable أو Bolt؟
غالبًا نعم، لأن هذه الأدوات تستخدم Tailwind أصلًا. وقالب البناء بالذكاء الاصطناعي في هذا المركز موجّه يقول القواعد نفسها بالكلام.
هل يمكن تحميل Tailwind من شبكة CDN داخل هذا المقتطف؟
هذا القالب لا يفعل ذلك. البرنامج النصي من شبكة CDN اعتماد على طرف ثالث، وهو غير لازم عندما يبني تطبيقكم Tailwind أصلًا.
لماذا لا تستخدم المعاينة ألواني؟
لا ترى المعاينة بناء Tailwind لديكم. انسخوا الشيفرة إلى صفحة تتوفر فيها Tailwind، وهناك تُطبَّق الفئات المساعدة.
هل تجبر فئات dark: الصفحة على الوضع الداكن؟
لا. لا تُطبَّق إلا عندما يكون الوضع الداكن في Tailwind نشطًا. وقالب الوضع الداكن المنفصل هو CSS عادي للصفحات التي بلا Tailwind.