Comment mettre en œuvre des formulaires dans des sites statiques

Les sites web varient en termes de conception, d’objectif et de complexité, mais sont généralement statiques ou dynamiques. Les sites statiques sont pré-rendus et servent le même contenu à tous les visiteurs. Leur structure simple signifie qu’ils sont généralement faciles à gérer et que leur temps de chargement est rapide. En revanche, les sites dynamiques génèrent du contenu à la volée à l’aide de langages de programmation côté serveur.

Les sites web statiques ne prennent pas en charge les éléments interactifs tels que les formulaires, car ils nécessitent des fonctionnalités de traitement côté serveur, telles que le stockage de données. Mais ce n’est pas l’idéal : les formulaires constituent un canal de communication avec vos utilisateurs. Ils peuvent vous aider à recueillir des informations précieuses sous la forme de suggestions ou de demandes, ce qui vous permet d’améliorer l’expérience de l’utilisateur en adaptant le contenu.

Ce guide vous guide à travers les étapes de la création d’un formulaire pour votre site statique, l’ajout d’un service de gestion des formulaires et le déploiement de votre site avec l’aide du service d’hébergement de sites statiques de Kinsta.

Choisissez un service de gestion des formulaires

Un service de gestion des formulaires est un tiers qui collecte et traite les données des formulaires pour les sites statiques. Ils fournissent l’infrastructure côté serveur nécessaire pour traiter les soumissions de formulaires, améliorant ainsi la fonctionnalité et l’interactivité de vos sites tout en conservant les avantages d’un site statique.

Lorsqu’un utilisateur envoie un formulaire, les données sont envoyées au point de terminaison du service de traitement des formulaires. Le service traite ensuite les données, les stocke de manière sécurisée et envoie des notifications aux destinataires appropriés.

Il existe de nombreux services de traitement des formulaires. Nous allons explorer les plus populaires d’entre eux.

1. Formspree

Formspree est un service de traitement des formulaires convivial qui simplifie l’ajout de formulaires et la gestion des soumissions de formulaires dans les sites statiques. Il propose un plan gratuit avec des fonctionnalités de base, telles que 50 envois de formulaires par mois, et des plans payants avec des fonctionnalités plus avancées, notamment l’inscription sécurisée et la protection contre le spam.

2. Formbucket

FormBucket offre un moyen pratique de collecter et de gérer les envois de formulaires en les enregistrant dans des « buckets », chacun ayant une URL unique. Vous pouvez définir des champs et des règles de validation pour les formulaires qui correspondent à l’image de marque de votre site web à partir de la page conviviale du tableau de bord de Formbucket.

3. Getform

Getform est une plateforme de gestion de formulaires qui offre un moyen simple et sécurisé de gérer les envois de formulaires. Getform propose une interface utilisateur intuitive pour gérer les envois de formulaires, des notifications par e-mails et des intégrations avec des services populaires tels que Slack et Google Sheets.

Comparaison des services Formspree, Formbucket et Getform

Pour faciliter la comparaison, vous trouverez ci-dessous un tableau comparant les trois services ci-dessus et leurs principales caractéristiques :

Lorsque vous choisissez un service de gestion de formulaires, vous devez tenir compte de la facilité d’intégration, des caractéristiques et fonctionnalités souhaitées, du prix et de la compatibilité avec votre plateforme d’hébergement. Évaluez les exigences spécifiques de votre formulaire et comparez chaque service de traitement de formulaires pour trouver celui qui répond le mieux à vos besoins.

Configurer le service de traitement des formulaires avec Getform

L’utilisation d’un service de traitement des formulaires tel que Getform peut simplifier considérablement la gestion des envois de formulaires sur votre site web. Lorsqu’un utilisateur envoie un formulaire, Getform prend en charge le processus, éliminant ainsi le besoin d’une API backend pour traiter et stocker ces envois.

Cette intégration transparente vous permet de gérer efficacement toutes les réponses dans une boîte de réception dédiée. Pour commencer, assurez-vous d’avoir des connaissances de base en HTML, CSS et JavaScript et suivez les étapes suivantes :

1. Ouvrez un compte Getform.
2. Accédez au tableau de bord de votre compte Getform et cliquez sur le bouton + Créer.
3. Dans la boîte de dialogue qui s’affiche, assurez-vous que l’option Formulaire est sélectionnée. Fournissez un nom de point de terminaison descriptif et sélectionnez le fuseau horaire approprié. Cliquez ensuite sur Créer.

   

   Getform génère une URL d’envoi de formulaire, que vous devez ajouter à l’attribut action de votre élément de formulaire.

Créez votre formulaire avec HTML et CSS

Maintenant que vous avez configuré le service de traitement des formulaires, vous pouvez utiliser HTML, CSS et JavaScript pour créer votre formulaire.

1. Dans votre terminal, créez un dossier de projet appelé forms et remplacez le répertoire actuel par le répertoire du projet :

   mkdir forms
   cd forms

2. Ajoutez les fichiers de projet suivants :

   #unix-based systems
   touch index.html styles.css script.js 
   
   #windows
   echo. > index.html & echo. > styles.css & echo. > script.js

3. Ensuite, créez un formulaire HTML. Pour les besoins de ce guide, le code fourni ci-dessous vous aidera à créer un formulaire comprenant des champs de saisie pour un nom et une adresse e-mail, une zone de texte pour les messages et un bouton d’envoi. Vous pouvez ajouter ce code à votre fichier index.html:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="container">
           <h1 class="form-title">Contact Us</h1>
           <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
               <div class="input-group">
                   <label for="name" class="form-label">Name:</label>
                   <input type="text" id="name" name="name" class="form-input" required>
   
                   <label for="email" class="form-label">Email:</label>
                   <input type="email" id="email" name="email" class="form-input" required>
   
                   <label for="message" class="form-label">Message:</label>
                   <textarea id="message" name="message" class="form-textarea" rows="4" required>
                   </textarea>
               </div>
   
               <div class="form-control">
                   <button type="submit" id="submitBtn" class="form-submit">Submit</button>
               </div>  
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>

4. Accédez au tableau de bord Getform et copiez l’URL du point de terminaison. Collez ensuite cette URL dans l’attribut action de la balise d’ouverture de votre formulaire dans le code HTML.
5. Enfin, n’hésitez pas à ajouter des styles CSS dans le fichier styles.css pour personnaliser la conception et l’apparence du formulaire.

Mettre en œuvre la validation des données avec JavaScript

La validation des données permet de vérifier que les données saisies par l’utilisateur répondent à des critères et à des règles de validation spécifiques avant de les traiter ou de les stocker.

La validation des données permet d’éviter d’envoyer des données incorrectes ou malveillantes, de donner aux utilisateurs un retour d’information immédiat sur les erreurs de saisie et de s’assurer que seules les données valides sont traitées ultérieurement. Elle joue un rôle essentiel dans le maintien de l’intégrité et de la précision des données.

Il existe plusieurs façons de mettre en œuvre la validation des données, notamment en utilisant JavaScript pour effectuer la validation côté client, la validation côté serveur ou une combinaison des deux approches. Dans ce guide, nous allons mettre en œuvre la validation côté client pour le formulaire de contact afin de nous assurer que les utilisateurs ne soumettent pas de champs vides et que l’adresse e-mail fournie est au bon format.

1. Commencez par définir la fonction de validation en ajoutant le code suivant au fichier script.js:

   function validateForm() {
       const name = document.getElementById('name').value;
       const email = document.getElementById('email').value;
       const message = document.getElementById('message').value;
       if (name.trim() === '' || message.trim() === '') {
           alert('Please fill out all fields.');
           return false;
       }
       const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
       if (!emailRegex.test(email)) {
           alert('Please enter a valid email address.');
           return false;
       }
       return true;
   }

   La fonction validateForm() a deux objectifs : d’abord, elle vérifie si les champs nom et message sont vides, puis elle valide le champ e-mail à l’aide d’une expression régulière et vérifie que l’adresse e-mail est dans un format valide.

   Si les champs sont vides ou si le format de l’adresse e-mail n’est pas valide, la fonction se déclenche et affiche un message d’alerte. Inversement, si tous les champs du formulaire passent ces contrôles de validation, la fonction renvoie true et le formulaire est envoyé.

   Vous pouvez également ajouter d’autres règles de validation pour garantir l’exactitude et l’intégrité des données soumises. Par exemple, vous pouvez vérifier la longueur des entrées des utilisateurs ou les empêcher de saisir certains caractères dans le message, ce qui permet d’éviter les failles de sécurité potentielles telles que les attaques par injection.

2. Ensuite, appelez la fonction ci-dessus pour activer la validation à l’aide d’un rappel d’écoute d’événement click. Ce rappel déclenche la fonction chaque fois qu’un utilisateur clique sur le bouton d’envoi. Pour appeler la fonction, ajoutez le code suivant à votre fichier script.js:

   document.addEventListener('DOMContentLoaded', function () {
   	const submitButton = document.getElementById('submitBtn');
   
   	if (submitButton) {
   		submitButton.addEventListener('click', function (event) {
   			event.preventDefault();
   			if (validateForm()) {
   				document.forms['contactForm'].submit();
   				resetFormAfterSubmission();
   			}
   			return false;
   		});
   	}
   });
   
   function resetFormAfterSubmission() {
   	setTimeout(function () {
   		const contactForm = document.forms['contactForm'];
   		contactForm.reset();
   	}, 500);
   }

   Notez que la fonction preventDefault() est incluse dans le code pour empêcher l’action de soumission du formulaire par défaut. De cette manière, vous pouvez valider le formulaire avant de soumettre les informations à Getform.

   En outre, après la validation et l’envoi réussis, la fonction resetFormAfterSubmission() est déclenchée, réinitialisant le formulaire après un délai d’une demi-seconde pour permettre d’autres envois.

Déployez votre site statique avec Kinsta

Kinsta propose une solution d’hébergement infogéré, qui vous permet d’héberger différents projets web et bases de données. Avec son plan gratuit, vous pouvez héberger jusqu’à 100 sites statiques directement depuis GitHub, GitLab ou Bitbucket.

Pour déployer votre site statique avec Kinsta, commencez par pousser vos codes vers votre fournisseur Git préféré. Ensuite, suivez les étapes suivantes :

1. Connectez-vous au tableau de bord MyKinsta.
2. Sur le tableau de bord, cliquez sur le menu déroulant Ajouter un service et sélectionnez Site statique.
3. Si vous hébergez un projet pour la première fois avec Kinsta, sélectionnez et activez votre fournisseur de service Git préféré.
4. Sélectionnez le dépôt de votre projet.
5. Sélectionnez la branche à déployer et fournissez un nom de site unique.
6. Spécifiez le chemin racine du répertoire de publication qui contient les fichiers HTML et les ressources à déployer en ajoutant un point.
7. Enfin, cliquez sur Créer un site.

Dans quelques secondes, MyKinsta déploiera votre site.

Pour intégrer le formulaire dans un site existant, copiez et collez le HTML du formulaire directement dans la section désirée du site. Veillez à inclure les propriétés CSS et le code JavaScript associés pour garantir un style et une fonctionnalité cohérents.

Par ailleurs, comme vous avez déjà déployé le formulaire séparément, vous pouvez fournir aux utilisateurs l’URL – sous forme d’hyperlien ou de bouton – sur laquelle ils peuvent cliquer pour accéder au formulaire.

Pour tester la fonctionnalité du site en direct, cliquez sur l’URL du site fourni. Saisissez les données demandées dans le formulaire pour vous assurer qu’il fonctionne comme prévu. Confirmez que le formulaire valide les données saisies par l’utilisateur, affiche des alertes d’erreur le cas échéant et soumet avec succès des données valides en vue d’un traitement ultérieur.

Après avoir envoyé le formulaire, Getform vous redirigera vers une page de confirmation ou de remerciement, indiquant que l’envoi a été effectué avec succès.

Pour consulter les réponses au formulaire, accédez à votre tableau de bord Getform et consultez les envois dans la boîte de réception des messages.

Résumé

Maintenant que vous avez réussi à mettre en œuvre le formulaire, il existe d’innombrables possibilités de le personnaliser. Par exemple, vous pouvez améliorer la conception et la fonctionnalité du formulaire en le stylisant davantage à l’aide de CSS ou de votre langage de préprocesseur préféré et en mettant en œuvre des techniques de validation avancées.

Outre le service d’hébergement de sites statiques, Kinsta propose également un service d’hébergement d’applications, conçu pour des applications plus dynamiques – comme les applications web qui nécessitent un traitement côté serveur, des interactions avec des bases de données et d’autres fonctionnalités complexes.

En accédant à ces deux services, les utilisateurs bénéficient d’une solution d’hébergement complète pour gérer une série de projets web dans un écosystème unique, des simples sites statiques aux applications web complexes.

Vous pouvez désormais transformer votre site statique en une expérience dynamique grâce aux services de traitement des formulaires. Quel est le service que vous préférez ou avec lequel vous avez de l’expérience ? Partagez-le dans les commentaires ci-dessous.

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).

• LinkedIn