Tailwind संपर्क फ़ॉर्म
सिर्फ़ यूटिलिटी क्लास। पेज पर Tailwind पहले से होना चाहिए। यह स्निपेट CDN स्क्रिप्ट या फ़ॉन्ट नहीं जोड़ता।
आप क्या कॉपी कर रहे हैं
यह स्टार्टर Tailwind यूटिलिटी क्लास से मार्क किया संपर्क फ़ॉर्म है। यह फिर भी Formgong को सामान्य POST है।
स्निपेट Tailwind लोड नहीं करता। यह CDN स्क्रिप्ट नहीं जोड़ता, और फ़ॉन्ट नहीं लोड करता।
आपके पेज या आपके बिल्ड में Tailwind पहले से होना चाहिए। यदि क्लास गायब हों, फ़ॉर्म फिर भी पोस्ट होगा, पर वह बिना स्टाइल दिखेगा।
इस पेज का पूर्वावलोकन Formgong CSS से बना है ताकि आप फ़ील्ड देख सकें। यह Tailwind रेंडर नहीं है।
दिखाई देने वाले लेबल पेज की भाषा का पालन करते हैं। फ़ील्ड नाम Telegram के लिए name, email, phone और message रहते हैं।
क्लास और डार्क अतिरिक्त
इनपुट बॉर्डर, पैडिंग और छोटा रेडियस उपयोग करते हैं। बटन गहरा बैकग्राउंड और हल्का टेक्स्ट उपयोग करता है। कोई कस्टम फ़ॉन्ट फ़ैमिली नहीं है।
ऐसी क्लास न जोड़ें जो डाउनलोड किए फ़ॉन्ट की ओर इशारा करे। साइट का फ़ॉन्ट, जो आप पहले से उपयोग करते हैं, काफ़ी है।
अतिरिक्त स्निपेट टेक्स्ट, बॉर्डर और बैकग्राउंड के लिए 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="hi"> <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="hi"></div> --> <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">भेजें</button> </form>
Tailwind की dark: क्लास वाले वही फ़ील्ड
<!-- यह मार्कअप मानता है कि 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="hi"> <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="hi"></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 उपयोग करते हैं। इस हब पर AI बिल्डर स्टार्टर एक प्रॉम्प्ट है जो वही नियम शब्दों में कहता है।
क्या आप इस स्निपेट में CDN से Tailwind लोड कर सकते हैं?
यह टेम्पलेट ऐसा नहीं करता। CDN स्क्रिप्ट तीसरे पक्ष की निर्भरता है, और वह अनावश्यक है जब आपका ऐप पहले से Tailwind बनाता है।
पूर्वावलोकन मेरे रंग क्यों नहीं उपयोग करता?
पूर्वावलोकन आपका Tailwind बिल्ड नहीं देख सकता। कोड ऐसे पेज में कॉपी करें जहाँ Tailwind हो, और यूटिलिटी क्लास वहाँ लागू होती हैं।
क्या dark: क्लास पेज को ज़बरदस्ती डार्क बनाती हैं?
नहीं। वे केवल तब लागू होती हैं जब आपका Tailwind डार्क मोड सक्रिय हो। अलग डार्क-मोड स्टार्टर उन पेजों के लिए सादा CSS है जिनमें Tailwind नहीं है।