טופס יצירת קשר עם 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="he"> <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="he"></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="he"> <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="he"></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.