Formgong

Formulaire de contact Gatsby

Formgong team ·

Un formulaire de contact Gatsby peut partir du navigateur vers Formgong. Gatsby livre des fichiers statiques, donc aucun serveur ne reçoit le POST. Une fonction Gatsby et un secret d'e-mail ne sont pas nécessaires. Collez le formulaire, remplacez la clé, et les messages arrivent par e-mail et dans Telegram. Le site reste statique.

Gatsby
<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" placeholder="Votre nom" required></label>
  <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="vous@exemple.com" required></label>
  <label>Message <textarea name="message" placeholder="Comment pouvons-nous vous aider ?" 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>
  
  <button type="submit">Envoyer</button>
</form>

Comment fonctionnent les formulaires dans Gatsby

Gatsby transforme des pages React en HTML statique. Son guide de formulaire propose un service de formulaires, Netlify Forms ou un serveur à vous. Gatsby Functions est le chemin serveur documenté. C'est une fonction que vous déployez et entretenez.

Un fichier dans src/pages peut contenir un formulaire HTML. Il poste vers https://formgong.com/submit avec access_key, _lang et botcheck. Seuls les noms qui commencent par GATSBY_ arrivent dans le navigateur. Cette clé est publique, donc ce préfixe convient.

Mise en place dans Gatsby

  1. Créez un formulaire dans Formgong et copiez la clé. Elle commence par fk_.
  2. Ajoutez src/pages/contact.js et collez le formulaire. L'action est https://formgong.com/submit.
  3. Remplacez fk_your_access_key. Un nom comme GATSBY_FORMGONG_KEY est facultatif. Ne mettez jamais un mot de passe SMTP dans un nom GATSBY_.
  4. Lancez gatsby develop et envoyez un test. Puis gatsby build. Le POST part du navigateur, donc la build en ligne se comporte pareil.
  5. Si le site est sur Netlify, n'ajoutez pas data-netlify. Un formulaire seulement React est invisible au scan HTML, sauf si vous publiez aussi une copie cachée avec form-name.

Formgong ou une fonction Gatsby ?

Utilisez une Gatsby Function si l'envoi doit modifier votre base ou appeler une API privée.

Utilisez Formgong pour le contact et les leads. Vous évitez SMTP, une fonction à héberger et le HTML caché que Netlify demande pour React.

Questions et réponses

Gatsby inclut-il un formulaire de contact ?

Non. Le guide officiel cite un backend de formulaires, Netlify Forms si vous hébergez là, ou votre serveur. La page reste statique.

Pourquoi Netlify rate-t-il mon formulaire Gatsby ?

Netlify lit le HTML après la build. Un formulaire qui n'apparaît qu'après React est manqué. Postez vers Formgong, ou ajoutez une copie statique cachée.

Puis-je utiliser fetch et rester sur la page ?

Oui. Appelez fetch sur https://formgong.com/submit et envoyez Accept: application/json. Le formulaire HTML marche encore si JavaScript est coupé.

La clé est-elle sûre dans le bundle Gatsby ?

Oui. Elle n'accepte que les envois de votre formulaire. En Pro, vous pouvez limiter les domaines. Ne mettez pas de clé privée dans un nom GATSBY_.

Commencer gratuitement

Toutes les plateformes →