Soumission du formulaire d’inscription d’utilisateur
Description : Ce projet consiste à créer un formulaire Web qui collecte des informations auprès des utilisateurs pour l'enregistrement. Une fois que l'utilisateur a saisi ses informations, le formulaire envoie les informations reçues à une adresse e-mail spécifiée pour traitement.
Table des matières
- Caractéristiques
- Technologies
- Vous devez
- Conditions préalables
- Installation
- Confidentialité et sécurité
- Générer et inclure le fichier de chargement automatique
Caractéristiques:
- Une interface de formulaire Web simple et conviviale pour la saisie des données utilisateur
- Champs de collecte d'informations sur l'utilisateur, telles que le nom, l'adresse e-mail et les informations de contact
- Validation du formulaire pour garantir l'exactitude et l'exhaustivité des informations saisies
- Fonctionnalité de courrier électronique pour envoyer les informations collectées à une adresse e-mail spécifiée pour traitement
- Configuration du modèle pour formater les informations collectées de manière claire et organisée
Technologies :
- HTML, CSS et JavaScript pour le développement côté client
- Langage de programmation PHP côté serveur pour le traitement des formulaires et la fonctionnalité de messagerie
- Bibliothèque Composer pour la gestion des dépendances PHP
- Serveur local Open Server pour le déploiement et les tests d'applications
- Dans l'ensemble, ce projet fournit un moyen simple et efficace de collecter des informations sur les utilisateurs pour l'enregistrement et de rationaliser le processus d'enregistrement.
Nous sommes heureux de vous présenter une version démo du projet que nous avons hébergé sur les pages Github. Suivez le lien vers la version démo du projet pour le vérifier.
Pour envoyer un formulaire par e-mail, vous devez :
- Installez Composer sur votre ordinateur.
- Vérifiez si votre fournisseur SMTP bloque l'envoi d'e-mails.
- Si vous utilisez Windows, vérifiez si votre système d'exploitation bloque l'envoi SMTP.
- Installez Open Server ou tout autre serveur local prenant en charge l'envoi d'e-mails.
- Clonez ce référentiel.
- Veuillez noter qu'avant d'utiliser le formulaire, vous devez le configurer avec vos paramètres de messagerie dans le fichier mail.php.
Comment configurer la soumission d'un formulaire par e-mail
Conditions préalables
Avant de commencer, assurez-vous de disposer des conditions préalables suivantes :
- Compositeur installé sur votre ordinateur
- Un serveur local prenant en charge l'envoi d'e-mails (tel qu'Open Server)
- Accédez à votre fournisseur SMTP pour vérifier si l'envoi d'e-mails est bloqué
- Accédez à votre OS pour vérifier si l'envoi SMTP est bloqué (Windows uniquement)
Installation
Pour configurer l'envoi d'un formulaire par e-mail, procédez comme suit :
- Clonez ce référentiel sur votre ordinateur local.
- Installez Composer si vous ne l'avez pas déjà fait.
- Vérifiez si votre fournisseur SMTP bloque l'envoi d'e-mails.
- Si vous utilisez Windows, vérifiez également si votre système d'exploitation bloque l'envoi SMTP.
- Installez Open Server ou tout autre serveur local prenant en charge l'envoi d'e-mails.
- Configurez le fichier
mail.php de la manière suivante :- Recherchez le bloc "try {" et recherchez le commentaire "// config.php".
- Modifiez les valeurs : définissez votre adresse e-mail (par exemple " [email protected] ") pour
$mail->Username et dupliquez-la pour $mail->setFrom(EMAIL_FROM) . - Dans la ligne
$mail->addAddress(EMAIL_TO) , remplacez l'argument EMAIL_TO par l'adresse e-mail à laquelle vous souhaitez recevoir les soumissions du formulaire (vous pouvez utiliser votre propre adresse e-mail à des fins de test). - Enfin, remplacez le
SMTP_PASSWORD par le mot de passe que vous avez généré à l'étape suivante.
- Générez un mot de passe d'application dans votre compte Google :
- Accédez à votre « compte » (pas votre compte Gmail mais votre compte Google).
- Dans la barre de recherche, tapez « mots de passe d'application ».
- Choisissez n’importe quel nom pour vous orienter.
- Vous recevrez un mot de passe que vous devrez copier et coller au lieu de
SMTP_PASSWORD entre parenthèses « votre mot de passe ». - Notez que vous ne pourrez plus afficher le mot de passe, alors ne fermez pas cet onglet du navigateur avant de l'avoir utilisé.
Mesures de confidentialité et de sécurité pour la soumission de formulaires électroniques
La confidentialité est un aspect essentiel lors de la configuration de l’envoi d’un formulaire par courrier électronique. Pour garantir la confidentialité des informations sensibles, il est fortement recommandé de prendre les précautions suivantes :
- Ne partagez pas votre mot de passe d'envoi d'e-mails : évitez de partager votre mot de passe d'envoi d'e-mails par e-mail ou par toute autre méthode de communication comme les chats ou les messages. Conservez le mot de passe dans un endroit sécurisé auquel vous seul avez accès.
- Ne publiez pas le fichier de configuration sur des ressources publiques : ne publiez jamais le fichier de configuration (par exemple, mail.php) sur des ressources publiques comme GitHub ou d'autres services d'hébergement. Utilisez plutôt un fichier config.php dans lequel vous pouvez créer des variables pour stocker les données de configuration. Il est également recommandé d'ajouter le fichier
config.php à .gitignore pour l'exclure du référentiel lors du téléchargement sur GitHub.
Le respect de ces précautions vous aidera à protéger votre vie privée et à sécuriser votre projet contre les menaces potentielles. Veuillez vous assurer de respecter ces recommandations lors de la configuration de l'envoi du formulaire par courrier électronique.
Générer et inclure le fichier de chargement automatique
Pour terminer la configuration du projet, vous devez exécuter la commande composer dumpautoload dans le terminal, qui génère un nouveau fichier vendor/autoload.php . Ce fichier contient une liste de toutes les classes et de leurs emplacements, et est déjà inclus dans votre code ( mail.php ) pour charger automatiquement les classes lorsqu'elles sont utilisées.
L'exécution de cette commande vous permet d'ajouter au projet toutes les classes nécessaires répertoriées dans le fichier composer.json .
C'est ça! Vous êtes maintenant prêt à commencer à recevoir des soumissions de formulaires par e-mail.
Frontend Mentor - Composant d'introduction avec solution de formulaire d'inscription
Il s'agit d'une solution au composant d'introduction avec défi de formulaire d'inscription sur Frontend Mentor. Les défis Frontend Mentor vous aident à améliorer vos compétences en codage en construisant des projets réalistes.
