Formulaire de contact HTML
Un formulaire de contact en HTML simple. Le navigateur l’envoie. Pas de backend, pas de framework, pas de police.
Ce que vous copiez
Ce modèle est un formulaire de contact en HTML simple. Le navigateur l’envoie avec un POST ordinaire. Il n’y a pas d’appel fetch, pas de framework et pas d’étape de build.
Collez le balisage dans une page statique, un embed Webflow, ou tout endroit qui accepte un élément de formulaire. La page n’a pas besoin de son propre serveur.
Le formulaire demande un nom, une adresse e-mail et un message. Le téléphone est facultatif. Ces mots sont aussi les noms des champs.
Telegram imprime le nom de chaque champ en gras au-dessus de la réponse. Les noms courts tels que name, email et message restent lisibles sur un téléphone.
Rien ici ne collecte un fichier, un paiement ou une note de Formgong. C’est seulement un moyen pour un visiteur de vous joindre.
Comment l’envoi fonctionne
L’action du formulaire est l’origine Formgong plus /submit, avec la méthode POST. Un access_key caché nomme le formulaire.
La clé est publique et appartient à la page. Elle permet à un visiteur d’envoyer une soumission. Elle ne peut pas changer les destinataires ni activer un webhook.
Un champ caché _lang porte la langue de la page, par exemple en. Formgong s’en sert pour la page de remerciement et pour le texte d’erreur.
Il ne traduit pas le message du visiteur. Écrivez les libellés visibles dans la langue de la page, et gardez les noms de champs en anglais.
Le honeypot est un input nommé botcheck. Il est hors de l’écran, avec tabindex -1 et autocomplete désactivé. Les gens le laissent vide.
Une soumission qui remplit botcheck est stockée comme spam et n’est pas livrée. Le visiteur voit tout de même un chemin de succès ordinaire.
Turnstile est facultatif. L’extrait laisse le widget à l’intérieur d’un commentaire. Il n’y a pas de clé de site dans ce modèle.
Si vous activez Turnstile pour le formulaire, retirez les marques de commentaire et collez votre propre clé de site. Jusque-là, ces lignes ne font rien.
Sans un _redirect caché, Formgong montre sa propre page de remerciement. L’extrait supplémentaire règle _redirect sur une adresse https.
Remplacez https://example.com/thanks par une page que vous contrôlez. Un chemin relatif n’est pas accepté.
Après l’avoir collé
Créez un formulaire dans le tableau de bord, ou utilisez le bouton de cette page, et remplacez fk_your_access_key si vous avez copié l’emplacement réservé.
Connectez Telegram dans les réglages du formulaire lorsque vous voulez le message sur votre téléphone. Sur la formule gratuite, l’e-mail est un résumé quotidien et Telegram est immédiat.
Envoyez un test depuis la page publiée. Un fichier ouvert en file:// n’est pas un test fiable du formulaire en ligne.
La formule gratuite conserve les soumissions pendant 30 jours. Les formules payantes peuvent les conserver plus longtemps. Formgong les stocke dans l’UE.
La formule gratuite comprend 300 soumissions par mois. Le spam ne compte pas dans ce nombre.
S’il vous faut un formulaire de cabinet, d’emploi ou de devis, utilisez un modèle de métier plus bas sur ce site. Cette page n’est que la mise en page simple de contact.
Les questions sur le service vont à support@formgong.com. Formgong est l’opérateur du service. Ce modèle ne nomme aucune autre entreprise comme opérateur.
Aperçu
Code du formulaire
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <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 une redirection de remerciement
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="fr"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <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
Ce formulaire a-t-il besoin de JavaScript ?
Non. Le navigateur envoie le formulaire tout seul. Le modèle AJAX est celui qui reste sur la page avec fetch.
Où vont les messages ?
Dans la boîte de réception Formgong, et vers l’e-mail et Telegram lorsque vous les connectez. Écrivez à support@formgong.com si la question porte sur le service lui-même.
Puis-je ajouter des champs ?
Oui. Ajoutez des inputs aux noms courts, tels que city. Telegram imprime ce nom au-dessus de la réponse. Ne renommez pas access_key ni botcheck.
L’aperçu envoie-t-il un vrai message ?
Non. L’aperçu de cette page ne montre qu’une note. Rien n’est envoyé tant que vous n’avez pas placé l’extrait sur votre propre site avec une vraie clé d’accès.