Comment mettre en place des formulaires dans un site web statique

Les sites web varient en termes de conception, d'objectif et de complexité, mais sont généralement classés en deux catégories : statiques et dynamiques. Les sites web statiques sont pré-rendus et fournissent le même contenu à tous les visiteurs. Ils sont simples dans leur structure, généralement faciles à gérer et rapides à charger. En revanche, les sites web dynamiques utilisent des langages de programmation côté serveur pour générer du contenu à la volée.

Les sites web statiques ne permettent généralement pas de gérer des éléments interactifs tels que des formulaires directement sur le site, car ces opérations nécessitent un serveur pour stocker et traiter les données. Mais voilà le hic : les formulaires constituent une passerelle importante entre les utilisateurs et nous. Grâce aux formulaires, nous pouvons obtenir des suggestions ou des demandes précieuses de la part de nos utilisateurs, ce qui nous permet d'optimiser le contenu de notre site web en fonction de ce retour d'information et d'offrir une meilleure expérience à nos utilisateurs. Cependant, les sites web statiques ne peuvent pas accomplir cette tâche directement. Nous pouvons donc améliorer l'expérience de l'utilisateur en personnalisant notre contenu.

Sélectionnez le service de traitement des formulaires

Les services de traitement des formulaires sont des tiers qui collectent et traitent les données des formulaires pour les sites web statiques. Ils fournissent l'infrastructure côté serveur nécessaire pour traiter les soumissions de formulaires, améliorant ainsi la fonctionnalité et l'interactivité d'un site web tout en conservant les avantages d'un site web statique.

Lorsqu'un utilisateur soumet un formulaire, les données sont envoyées au point de terminaison du service de traitement des formulaires. Le service traite alors les données, les stocke de manière sécurisée et envoie une notification au destinataire approprié. Il existe de nombreux services de traitement des formulaires. Examinons quelques-uns des services de traitement de formulaires les plus populaires.

1) Formspree

Formes libres est un service convivial de traitement des formulaires qui simplifie le processus d'ajout et de gestion des soumissions de formulaires dans les sites statiques. Il est disponible en version gratuite avec des fonctionnalités de base, telles que 50 soumissions de formulaires par mois, et en version payante avec des fonctionnalités plus avancées, notamment des listes sûres et une protection contre le spam.

2. Formbucket

FormBucket Mention offre un moyen pratique de collecter et de gérer les soumissions de formulaires en sauvegardant les formulaires dans des "buckets", chacun avec une URL unique.Vous pouvez utiliser la page conviviale du tableau de bord de Formbucket pour définir les champs du formulaire et définir les règles de validation pour s'aligner sur la marque de votre site. Vous pouvez utiliser la page conviviale du tableau de bord de Formbucket pour définir les champs du formulaire et définir les règles de validation afin de les aligner sur l'image de marque de votre site.

3. formulaire de demande

Getform Getform offre une interface utilisateur intuitive pour gérer les soumissions de formulaires, les notifications par e-mail et l'intégration avec des services populaires tels que Slack et Google Sheets.

Mise en place de services de traitement de formulaires avec Getform

La gestion des soumissions de formulaires sur votre site web peut être grandement simplifiée par l'utilisation d'un service de traitement de formulaires tel que Getform. Lorsqu'un utilisateur soumet un formulaire, Getform prend en charge l'ensemble du processus, éliminant ainsi le besoin d'une API de backend pour traiter et stocker ces soumissions.

Grâce à cette intégration transparente, vous pouvez gérer efficacement toutes vos réponses dans une boîte de réception dédiée. Pour commencer, assurez-vous d'être familiarisé avec la fonctionHTMLetCSSrépondre en chantantJavaScriptAyez une compréhension de base et suivez les étapes ci-dessous :

1. inscription Compte Getform.
2. Allez sur le tableau de bord de votre compte Getform et cliquez sur le bouton+ Créé Bouton.
3. Dans la boîte de dialogue qui s'affiche, assurez-vous que le champ "Formulaires" . Donnez un nom descriptif au point d'extrémité et sélectionnez le fuseau horaire approprié. Cliquez ensuite sur"Créer".

Getform génère l'URL du point de terminaison de la soumission du formulaire, qui doit être ajoutée à l'attribut action de l'élément du formulaire.

Créer des formulaires avec HTML et CSS

Une fois que vous avez mis en place vos services de traitement des formulaires, vous pouvez créer des formulaires à l'aide de HTML, CSS et JavaScript.

1) Dans le terminal, créez un fichier nomméformulairesdu dossier du projet, et changez le répertoire actuel en répertoire du projet :mkdir formes

mkdir formulaires
cd formulaires
mkdir formulaires
cd formulaires
mkdir formulaires
cd formulaires

2. ajoutez les fichiers de projet suivants :

1TP5Systèmes basés sur Tunix
touch index.html styles.css script.js
#windows
echo > index.html & echo > styles.css & echo > script.js
1TP5Systèmes basés sur Tunix
touch index.html styles.css script.js

#windows
echo > index.html & echo > styles.css & echo > script.js
1TP5Systèmes basés sur Tunix
touch index.html styles.css script.js

#windows
echo > index.html & echo > styles.css & echo > script.js

3) Créez ensuite un formulaire HTML. Dans ce guide, le code fourni ci-dessous vous aidera à créer un formulaire comprenant des zones de saisie pour le nom et l'adresse électronique, une zone de texte pour le message et un bouton d'envoi. Ce code peut être ajouté à votre index.html Documentation :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulaire de contact</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contactez nous</h1>
        <form class="contact-form" name="contactForm" action="/fr/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <div class="input-group">
                <label for="name" class="form-label">Nom.</label>
                <input type="text" id="name" name="name" class="form-input" required>
                <label for="email" class="form-label">Courriel.</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">Soumettre</button>
            </div>  
        <input type="hidden" name="trp-form-language" value="fr"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulaire de contact</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contactez nous</h1>
        <form class="contact-form" name="contactForm" action="/fr/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <div class="input-group">
                <label for="name" class="form-label">Nom.</label>
                <input type="text" id="name" name="name" class="form-input" required>

                <label for="email" class="form-label">Courriel.</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">Soumettre</button>
            </div>  
        <input type="hidden" name="trp-form-language" value="fr"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulaire de contact</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contactez nous</h1>
        <form class="contact-form" name="contactForm" action="/fr/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <div class="input-group">
                <label for="name" class="form-label">Nom.</label>
                <input type="text" id="name" name="name" class="form-input" required>

                <label for="email" class="form-label">Courriel.</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">Soumettre</button>
            </div>  
        <input type="hidden" name="trp-form-language" value="fr"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>

4. naviguez jusqu'au panneau Getform et copiez l'URL du point final, puis collez cette URL dans l'attribut action à l'intérieur de la balise d'ouverture du formulaire dans le code HTML.
5) Enfin, ajoutez des styles CSS au fichier styles.css pour personnaliser la conception et l'apparence du formulaire.

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 spécifiques et à des règles de validation avant d'être traitées ou stockées. La validation des données permet d'éviter la soumission de données incorrectes ou malveillantes, de fournir 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 l'exactitude des données.

Il existe plusieurs façons de mettre en œuvre la validation des données, notamment la validation côté client à l'aide de JavaScript, la validation côté serveur ou une combinaison des deux. Dans cet article, nous allons mettre en œuvre la validation côté client pour le formulaire de contact afin de nous assurer que l'utilisateur ne soumet pas de champs vides et que l'adresse électronique fournie est correctement formatée.

1) Tout d'abord, ajoutez le code suivant dans le fichierscript.js pour définir la fonction de validation :

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;
}
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;
}
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() fait deux choses : d'abord, elle vérifie que les champs nom et message sont vides, puis elle valide le champ email à l'aide d'une expression régulière et vérifie que l'adresse email est dans un format valide.

Si les champs sont vides ou si le format de l'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 soumis.

Des règles de validation supplémentaires peuvent être ajoutées pour garantir l'exactitude et l'intégrité des données soumises. Par exemple, la longueur des données saisies par l'utilisateur peut être validée, ou les utilisateurs peuvent être empêchés de soumettre certains caractères dans les messages, ce qui contribue à prévenir 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 du callback de l'écouteur de l'événement click. Chaque fois que l'utilisateur clique sur le boutonsoumettre (un rapport, etc.)Le callback déclenche la fonction chaque fois que le bouton est pressé. Pour appeler la fonction, ajoutez l'élément script.js Ajoutez le code suivant au fichier :

document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn') ;
if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault() ; 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); ; function resetFormAfterSubmission()
}, 500) ;
}
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn') ;

if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault() ; 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); ; function resetFormAfterSubmission()
}, 500) ;
}
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn') ;

if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault() ; 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); ; function resetFormAfterSubmission()
}, 500) ;
}

Notez que le code inclut la fonction preventDefault() pour empêcher l'action de soumission du formulaire par défaut. Cela vous permet de valider le formulaire avant de soumettre des informations à Getform.

Après une validation et une soumission réussies, la fonction resetFormAfterSubmission() est déclenchée pour réinitialiser le formulaire après un délai d'une demi-seconde afin de permettre d'autres soumissions.

résumés

Maintenant que les formulaires ont été mis en œuvre avec succès, il existe d'innombrables possibilités de les personnaliser. Par exemple, les formulaires peuvent être stylisés à l'aide de CSS ou de votre langage de préprocesseur préféré, et des techniques de validation avancées peuvent être mises en œuvre pour améliorer la conception et la fonctionnalité du formulaire.