Formgong

Formulaire de contact Tailwind

Uniquement des classes utilitaires. Tailwind doit déjà être sur la page. Ce snippet n’ajoute ni script CDN ni police.

Connectez-vous pour utiliser ce modèle

Ce que vous copiez

Ce modèle est le formulaire de contact balisé avec des classes utilitaires Tailwind. C’est toujours un POST ordinaire vers Formgong.

L’extrait ne charge pas Tailwind. Il n’ajoute pas de script CDN, et il ne charge pas de police.

Votre page, ou votre build, doit déjà inclure Tailwind. Si les classes manquent, le formulaire s’envoie quand même, mais il paraîtra sans style.

L’aperçu de cette page est dessiné avec le CSS de Formgong pour que vous voyiez les champs. Ce n’est pas un rendu Tailwind.

Les libellés visibles suivent la langue de la page. Les noms de champs restent name, email, phone et message pour Telegram.

Classes et l’extrait sombre

Les inputs ont une bordure, du padding et un petit rayon. Le bouton a un fond sombre et un texte clair. Il n’y a pas de famille de police propre.

N’ajoutez pas une classe qui pointe vers une police téléchargée. La police du site, celle que vous utilisez déjà, suffit.

L’extrait supplémentaire ajoute des classes dark: pour le texte, les bordures et les fonds. Elles ne font rien tant que votre build Tailwind n’a pas le mode sombre.

Le mode sombre de Tailwind peut suivre le système, ou une classe sur l’élément html. Ce modèle ne configure pas cela. Il ajoute seulement les classes.

Si vous n’utilisez pas le mode sombre, copiez le premier extrait et ignorez l’extrait supplémentaire.

Le honeypot reste caché visuellement avec un petit attribut style, pas avec une classe Tailwind, afin de rester caché même si Tailwind manque.

Le même envoi que le modèle HTML

L’action, la méthode, access_key, _lang et botcheck correspondent au modèle HTML simple. Tailwind ne change pas la requête.

Turnstile reste dans un commentaire jusqu’à ce que vous l’activiez et colliez une clé de site. L’emplacement YOUR_TURNSTILE_SITE_KEY n’est pas une vraie clé.

Sur la formule gratuite, Telegram arrive tout de suite et l’e-mail est un résumé quotidien. Les soumissions restent 30 jours. L’allocation mensuelle est de 300.

Remplacez fk_your_access_key par la clé du tableau de bord, ou utilisez le bouton de cette page pendant que vous êtes connecté.

Formgong est l’opérateur. Les questions sur le produit vont à support@formgong.com.

Aperçu

Code du formulaire

HTML
<!-- Ce balisage suppose que Tailwind est déjà sur la page. Il ne charge ni Tailwind, ni un CDN, ni une police. -->
<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="fr">
  <label class="grid gap-1 text-sm"><span class="font-medium">Nom</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">Téléphone</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">Message</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>Laissez ce champ vide <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Facultatif. Activez Turnstile pour ce formulaire, retirez ces marques de commentaire et collez la clé du site.
<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="fr"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">Envoyer</button>
</form>
Les mêmes champs avec les classes dark: de Tailwind
Les mêmes champs avec les classes dark: de Tailwind
<!-- Ce balisage suppose que Tailwind est déjà sur la page. Il ne charge ni Tailwind, ni un CDN, ni une police. -->
<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="fr">
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Nom</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">Téléphone</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">Message</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>Laissez ce champ vide <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Facultatif. Activez Turnstile pour ce formulaire, retirez ces marques de commentaire et collez la clé du site.
<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="fr"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">Envoyer</button>
</form>

Questions et réponses

Cela fonctionnera-t-il dans Lovable ou Bolt ?

Souvent oui, parce que ces outils utilisent déjà Tailwind. Le modèle pour constructeur d’IA sur ce hub est un prompt qui dit les mêmes règles en mots.

Puis-je charger Tailwind depuis un CDN dans cet extrait ?

Ce modèle ne le fait pas. Un script CDN est une dépendance tierce, et il est inutile lorsque votre application construit déjà Tailwind.

Pourquoi l’aperçu n’utilise-t-il pas mes couleurs ?

L’aperçu ne peut pas voir votre build Tailwind. Copiez le code dans une page qui a Tailwind, et les classes utilitaires s’y appliquent.

Les classes dark: forcent-elles une page sombre ?

Non. Elles ne s’appliquent que lorsque le mode sombre de Tailwind est actif. Le modèle sombre séparé est du CSS simple pour les pages sans Tailwind.