Форма контакту на Tailwind
Лише утилітні класи. На сторінці вже має бути Tailwind. Цей сніпет не додає CDN-скрипт і не підключає шрифт.
Що ви копіюєте
Це форма контакту, розмічена утилітними класами Tailwind. Це все ще звичайний POST у Formgong.
Сніпет не вантажить Tailwind. Він не додає CDN-скрипт і не вантажить шрифт.
На сторінці або у збірці Tailwind уже має бути. Якщо класів немає, форма все одно вирушить, але виглядатиме без стилів.
Перегляд на цій сторінці намальовано CSS Formgong, щоб було видно поля. Це не відмальовка Tailwind.
Видимі підписи йдуть за мовою сторінки. Назви полів лишаються name, email, phone і message для Telegram.
Класи і темний додаток
Поля мають рамку, відступ і невелике заокруглення. Кнопка має темне тло і світлий текст. Окремої родини шрифтів немає.
Не додавайте клас, який вказує на завантажений шрифт. Шрифту сайту, який у вас уже є, достатньо.
Додатковий сніпет додає класи dark: для тексту, рамок і тла. Вони нічого не роблять, доки у вашій збірці Tailwind немає темного режиму.
Темний режим Tailwind може йти за системою або за класом на елементі html. Цей шаблон це не налаштовує. Він лише додає класи.
Якщо темний режим вам не потрібен, копіюйте перший сніпет і не зважайте на додатковий.
Пастка лишається візуально схованою коротким атрибутом стилю, а не класом 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="uk"> <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">Email</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="uk"></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="uk"> <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">Email</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="uk"></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.