Formulaire de contact minimal
Des libellés, trois champs et un bouton. Pas de bloc de style. Le navigateur dessine les champs. L’envoi est le même que pour les autres modèles de départ.
Ce que vous copiez
Ce modèle est le formulaire de contact sans bloc de style et sans classes utilitaires. Le navigateur dessine les contrôles avec leur aspect par défaut.
C’est utile lorsque vous voulez voir la requête clairement, ou lorsque votre propre feuille de styles fera la peinture.
Les champs sont toujours le nom, l’e-mail, un téléphone facultatif et un message. Le bouton envoie un POST ordinaire.
Il n’y a pas de framework, pas de police et pas de script. Si votre CSS global restyle les inputs, ce CSS s’appliquera. Ce fichier ne le combat pas.
L’aperçu de cette page saute aussi les styles de carte des autres modèles, afin que les contrôles ressemblent davantage à un formulaire sans style.
Ce qui reste nécessaire
Même un formulaire nu a besoin de access_key, _lang et botcheck. C’est ainsi que Formgong reconnaît le formulaire, la langue et le honeypot.
Le honeypot est caché par un court attribut style sur son enveloppe. C’est le seul style de l’extrait. Sans lui, les gens pourraient remplir le piège.
Turnstile est dans un commentaire. L’extrait supplémentaire est le même formulaire avec ces lignes décommentées et YOUR_TURNSTILE_SITE_KEY encore à remplacer.
Décommenter les lignes ne crée pas de clé. Créez le widget dans Cloudflare, activez Turnstile sur le formulaire, puis collez la clé de site.
Un script commenté ne s’exécute pas. Laissez le commentaire en place jusqu’à ce que vous vouliez vraiment le widget.
La même livraison que les modèles stylés
Telegram imprime les noms de champs en gras. Gardez-les courts. Ne traduisez que le texte que le visiteur lit.
Sans _redirect, Formgong montre sa page de remerciement. N’ajoutez _redirect que comme une URL https absolue qui vous appartient.
Le gratuit comprend 300 soumissions par mois, 30 jours de conservation, Telegram immédiat et un résumé quotidien par e-mail.
Les données sont stockées dans l’UE. Formgong exploite le service. L’adresse d’assistance est support@formgong.com.
Lorsque le formulaire nu fonctionne, vous pouvez l’envelopper dans votre propre mise en page. Vous n’avez pas à partir d’un modèle stylé.
Aperçu
Code du formulaire
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="fr"> <label>Nom <input type="text" name="name" autocomplete="name" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" required></label> <label>Téléphone <input type="tel" name="phone" autocomplete="tel"></label> <label>Message <textarea 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 type="submit">Envoyer</button> </form>
Le même formulaire avec Turnstile décommenté
<form action="https://formgong.com/submit" method="POST"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="fr"> <label>Nom <input type="text" name="name" autocomplete="name" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" required></label> <label>Téléphone <input type="tel" name="phone" autocomplete="tel"></label> <label>Message <textarea 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 type="submit">Envoyer</button> </form>
Questions et réponses
Pourquoi y a-t-il encore un style sur le honeypot ?
Pour que le piège reste hors de l’écran. Tout le reste est sans style exprès. Retirer cette seule règle rend le piège visible.
Le CSS de mon site va-t-il casser le POST ?
Le CSS ne change pas le POST. Un style peut cacher le bouton d’envoi, mais les noms de champs et l’URL d’action sont ce qui compte.
Est-il plus petit pour une raison ?
Oui. C’est la même requête avec moins de peinture, afin que vous puissiez le déposer dans une page qui a déjà un design.
Ai-je besoin du champ téléphone ?
Non. Supprimez ce libellé si vous ne voulez pas de numéro de téléphone. Laissez email si vous voulez une adresse de réponse dans la boîte de réception.