Formulário de contacto Tailwind

Apenas classes utilitárias. A página já deve ter Tailwind. Este snippet não acrescenta um script de CDN nem uma fonte.

O que está a copiar

Este modelo é o formulário de contacto marcado com classes utilitárias do Tailwind. Continua a ser um POST normal para o Formgong.

O excerto não carrega o Tailwind. Não acrescenta um script de CDN e não carrega uma fonte.

A sua página, ou a sua compilação, já tem de incluir o Tailwind. Se as classes faltarem, o formulário envia na mesma, mas fica sem estilo.

A pré-visualização desta página é desenhada com o CSS do Formgong para ver os campos. Não é uma renderização Tailwind.

As etiquetas visíveis seguem o idioma da página. Os nomes dos campos ficam name, email, phone e message para o Telegram.

Classes e o extra escuro

Os inputs usam um contorno, espaçamento interno e um raio pequeno. O botão usa um fundo escuro e texto claro. Não há uma família de fontes própria.

Não acrescente uma classe que aponte para uma fonte descarregada. A fonte do site, a que já usa, chega.

O excerto extra acrescenta classes dark: para o texto, os contornos e os fundos. Não fazem nada até a compilação Tailwind ter modo escuro.

O modo escuro do Tailwind pode seguir o sistema, ou uma classe no elemento html. Este modelo não configura isso. Só acrescenta as classes.

Se não usar o modo escuro, copie o primeiro excerto e ignore o extra.

O honeypot continua visualmente oculto com um atributo style pequeno, não com uma classe Tailwind, por isso fica oculto mesmo que o Tailwind falte.

O mesmo envio do modelo HTML

A ação, o método, access_key, _lang e botcheck coincidem com o modelo HTML simples. O Tailwind não muda o pedido.

O Turnstile fica num comentário até o ligar e colar uma chave do site. O marcador YOUR_TURNSTILE_SITE_KEY não é uma chave real.

No plano gratuito, o Telegram chega de imediato e o email é um resumo diário. Os envios ficam 30 dias. O limite mensal é 300.

Substitua fk_your_access_key pela chave do painel, ou use o botão desta página enquanto tem sessão iniciada.

O Formgong é o operador. As perguntas sobre o produto vão para support@formgong.com.

Pré-visualização

Código do formulário

HTML

<!-- Esta marcação espera que o Tailwind já esteja na página. Não carrega Tailwind, nem um CDN, nem uma fonte. -->
<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="pt">
  <label class="grid gap-1 text-sm"><span class="font-medium">Nome</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">E-mail</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">Telefone</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">Mensagem</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>Deixe este campo vazio <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcional. Ative o Turnstile neste formulário, retire estas marcas de comentário e cole a chave do sítio.
<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="pt"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">Enviar</button>
</form>

Os mesmos campos com classes dark: do Tailwind

Os mesmos campos com classes dark: do Tailwind

<!-- Esta marcação espera que o Tailwind já esteja na página. Não carrega Tailwind, nem um CDN, nem uma fonte. -->
<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="pt">
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Nome</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">E-mail</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">Telefone</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">Mensagem</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>Deixe este campo vazio <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcional. Ative o Turnstile neste formulário, retire estas marcas de comentário e cole a chave do sítio.
<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="pt"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">Enviar</button>
</form>

Perguntas e respostas

Isto funciona no Lovable ou no Bolt?

Muitas vezes sim, porque essas ferramentas já usam Tailwind. O modelo para o construtor de IA neste hub é um prompt que diz as mesmas regras por palavras.

Posso carregar o Tailwind a partir de um CDN neste excerto?

Este modelo não o faz. Um script de CDN é uma dependência de terceiros, e é desnecessário quando a aplicação já compila o Tailwind.

Porque é que a pré-visualização não usa as minhas cores?

A pré-visualização não consegue ver a sua compilação Tailwind. Copie o código para uma página que tenha Tailwind e as classes utilitárias aplicam-se aí.

As classes dark: forçam uma página escura?

Não. Só se aplicam quando o modo escuro do Tailwind está ativo. O modelo escuro à parte é CSS simples para páginas sem Tailwind.