Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Créer un formulaire de contact Bootstrap avec PHP et AJAX

by
Difficulty:BeginnerLength:LongLanguages:

French (Français) translation by Thomas Triboult (you can also view the original English article)

Final product image
What You'll Be Creating

Dans ce tutoriel je vais vous guider pour créer un formulaire de contact fonctionnel qui utilisera le plus populaire des framework front-end, Bootstrap en utilisant PHP et AJAX. En partant de cette base nous verrons quelques fonctionnalités supplémentaires comme des animations CSS avec animate.css, une autre validation via JavaScript et une expérience utilisateur améliorée grâce au contenu asynchrone.

Au moment de l'écriture de ce tutoriel Bootstrap 3.3.5 est la version la plus courante et nous utiliserons la version par défaut de Bootstrap (avec une grille à 12 colonnes). Veillez à utiliser les derniers exemples et structures comme mentionnés dans la documentation Bootstrap.

Structure de fichiers

Premièrement, nous allons créer un dossier racine et y inclure les fichiers et dossiers suivants :

Nous devrons inclure certaines librairies front-end pour nous faciliter la vie, téléchargez (ou utiliser des références externes ou CDN) :

Ajoutez ces libraires, la structure de fichiers devient :

Construire la base du formulaire

Ouvrez le fichier index.html et copiez y la structure HTML suivante :

C'est notre base HTML dans laquelle nous allons insérer le contenu du formulaire. Vous pouvez voir que nous avons lié tous les fichiers CSS et JavaScript nécessaires (notez que nous n'avons pas vraiment besoin de bootstrap.js dans cet exemple). Nous avons ajouter une balise meta viewport pour mieux gérer les media queries dans Boostrap. Le JavaScript a été placé en bas du fichier pour permettre au contenu d'être affiché en premier.

Dans notre balise body, nous avons ajouté une div avec les classes col-sm-6 col-sm-offset-3. Ce qui signifie que pour les fenêtres sm (small - petit) et supérieures nous voulons afficher une colonne de 50% de la largeur totale (il y a un maximum de 12 colonnes). La classe col-sm-offset-3 correspond à une marge fauche de 25%, ce qui affiche une structure prenant la moitié de l'écran centrée horizontalement. En partant de cette structure nous avons ajouter une balise h3 et commencé la base de notre formulaire. Pensez à ajouter un ID à ce formulaire pour que l'on puisse y associer des événements jQuery.

the offset will push our DIV 25 from the right

Pas de gloire sans bravoure

Pour construire le contenu de notre formulaire nous pouvons copier/coller ou écrite le code suivant dans la balise <form></form> :

Ce sont tous les champs de saisie et boutons avec lesquels l'utilisateur interagira. La div initiale à laquelle la classe row est associée est un élément Bootstrap classique et représente un groupe horizontal de balises col. Dans Bootstrap les colonnes créées des marges intérieurs ou gouttières ; ajouter une ligne autour de ces colonnes supprimera les marges à gauche et à droite pour qu'elles s'insèrent parfaitement dans leur conteneur.

Nous avons créé deux colonnes avec la class col-sm-6 (50%) pour diviser notre formulaire en deux. Dans la première col-sm-6 nous avons créé un libellé et un champ de saisie pour le nom, le second représente l'adresse email. Chaque champ inclus un libellé avec un attribut for qui lui permet de cibler le bon champ. Chacune de ces colonnes inclus un form-group qui réuni sémantiquement le libellé et le champ et applique une petite marge en bas.

Displaying two fields inline

Typographie

Bootstrap permet l'utilisation des classe typographique de H1 à H6. Ces classes nous permettent de personnaliser les éléments inline sans avoir à ajouter des marges ou créer des éléments de type block. Nous avons utilisé la classe h4 pour personnaliser rapidement les libellés, les rendant plus gros.

La classe form-control mise sur chaque champ leur permet de prendre toute la largeur disponible dans le conteneur (width: 100%). Cette classe applique aussi plusieurs styles pour créer un formulaire lisible (grande hauteur, bords plats, etc.).

Après ces colonnes on inclus le message. Encore une fois on l'inclus dans un from-group et on applique les même styles que précédemment aux libellé et textarea.

L'appel à l'action

Enfin nous ajoutons le bouton de soumission. Bootstrap propose une quantité de classes permettant de créer une multitude de boutons avec des typographies différentes. Nous avons choisi d'utiliser le bouton de "succès" (btn-success) qui est vert par défaut. De plus nous devons ajouter la classe btn pour réinitialiser le style par défaut des boutons (border, padding, text-align, font-weight). Nous appliquons la classe btn-lg qui créé un gros bouton et enfin la classe pull-right qui fait flotter le bouton à droite.

Après notre bouton nous avons ajouté une div avec l'ID #msgSubmit et appliqué les classes "h3 text-center hidden". La classe h3 permet de créer une entête plus grosse, text-center (vous avez deviné) aligne le texte au centre et enfin notre classe hidden définie display à none et visibility à hidden.

Completed Form

Ajouter la foncitonnalité de soumission

Comme vous pouvez le constater dans votre navigateur préféré nous avons créé un formulaire Bootstrap basique. Toutefois il ne fait absolument rien pour l'instant. Notre prochaine étape consistera en la création d'une fonction qui transmettra asynchronement les valeurs saisies par l'utilisateur à notre mailer PHP.

Ouvrez le fichier scripts.js et copiez y le code suivant :

Ce bout de code jQuery écoute l'envoi du formulaire #contactForm (comme défini précedemment). Cette fonction nous permet de lancer notre propre fonction de soumission du formulaire en lieu et place de la méthode d'envoi classique. L'appel à event.preventDeafult(); stop l'envoi du formulaire qui aurait rafraîchi la page car l'action du formulaire n'est pas définie. Ensuite, il appelle la fonction submitForm();.

submitForm();

Puis nous créons la fonction submitForm(); suivante :

Les trois variables définies récupèrent les valeurs de chaque champ du formulaire que nous utiliserons plus tard.

Nous initialisons un objet AJAX de jQuery avec comme paramètres le type post, l'URL vers le fichier PHP, les données que nous souhaitons envoyer la fonction de rappel en succès. L'attribut data inclus les trois variables concaténées avec un id/libellé. La fonction de rappel est appelé quand l'objet AJAX recoit avec succès des informations du script PHP. La fonction vérifie que le texte renvoyé correspond à la chaine "success". Si c'est le cas il appelle la fonction formSuccess.

La fonction formSuccess supprime la classe hidden de la div #msgSubmit ce qui fait apparaitre le texte.

Lions le tout à la fonction mail de PHP

Enfin nous devons écrire un script PHP qui recevra les données et enverra un mail grâce à la fonction mail de PHP. Ouvrez process.php et ajoutez y le code suivant :

Comme pour le script jQuery précédent, nous devons collecter et enregistrer les variables que nous utiliserons. Nous pouvons récupérer les trois variables de la fonction post et les assigner à des variables PHP du même nom. La variable $EmailTo est une adresse email prédéfinie qui recevra l'email que vous pouvez modifier dans le script. $Subject est une chaîne de caractères qui représente le sujet de l'email.

Le contenu de l'email est construit autour des trois variables. Premièrement on ajoute un texte de description, comme "Name", puis la variable et un retour à la ligne défini par /n (nouvelle ligne ou retour à la ligne). Cette structure est répétée et concaténé à la variable $body.

Pour envoyer l'email nous paramétrons la fonction mail. Les paramètres à fournir sont, dans cet ordre, l'adresse email du destinataire, le sujet, le corps du message et l'adresse de l'expéditeur puis nous récupérons le résultat dans la variable $success.

Pour lancer l'envoi de email nous pouvons appeler la fonction dans un if. Ce qui nous permet de vérifier si l'envoi s'est bien passé ou non. Si la fonction mail renvoi "true" le script renverra "success", si elle échoue il renverra "invalid".

Ce résultat sera envoyé à l'objet AJAX et géré dans la partie cliente. La magie de l'AJAX réside dans le fait que tout ceci est fait de manière asynchrone coté client, ce qui permet à l'utilisateur de continuer à utiliser le site pendant l'envoi.

Améliorations

Nous avons préparé la structure et les fonctionnalités de base de notre formulaire dans la première partie de ce tutoriel. Nous allons à présent attaquer les choses sérieuses avec l'ajout retour à l'utilisateur avec plusieurs fonctionalités additionnelles. Particulièrement, nous allons ajouter la gestion des erreurs sur le formulaire côté client et côté serveur.

Encore une fois, pour nous faciliter la tâche nous allons utiliser certains outils. Ces outils sont :

Ajoutez les dans le projet comme nous l'avons fait précédemment pour Bootstrap et jQuery. Ces outils nous aiderons à informer l'utilisateur lorsqu'il enverra le formulaire. Il existe une pléthore d'outils et de framework de validation de formulaire (en incluant la validation native HTML5), mais j'ai choisi "Bootstrap Validator" car il s'intègre bien dans notre formulaire.

La structure du projet ressemble maintenant à :

Valider notre formulaire

Initialisons le validateur pour s'assurer que le formulaire est valide lors de l'envoi. Retournons dans le fichier scripts.js nous devons modifier la première partie du code qui appelle la fonction submitForm() lors de la soumission du formulaire.

Nous devons la mettre à jour avec le code suivant :

Ce nouveau code vérifie si le Bootstrap Validator a détecté un problème et stoppé le processus. Sinon, nous continuons le traitement classique. Nous devons toujours empêcher l'action par défaut (recharger la page) lors d'un envoi correcte ; donc ne l'enlevez pas.

Cliquer sur le bouton de soumission de notre formulaire quand il n'est pas totalement rempli mettra en rouge les champs vides qui doivent être remplis, c'est aussi facile que ça!

Lors de l'ajout de cette validation nous avons désactivé celle native à HTML5. Nous pouvons améliorer notre validation en ajoutant des messages d'erreur. Bootstrap Validator contient une super fonctionnalité qui permet d'ajouter facilement des messages d'erreur à chaque champ. Pour les afficher nous devons ajouter du code HTML qui définira leur emplacement.

Dans chaque form-group sous le champ nous devons placer le code HTML suivant :

Par exemple, voici la div supplémentaire ajoutée aux champs Name et Email :

Renvoyer le formulaire doit maintenant afficher le message d'erreur par défaut quand les champs sont laissés vide "Please fill in this field" (Veuillez saisir une valeur pour ce champ). En ajouter le data-attribute "data-error" au champ vous pouvez modifier le message d'erreur. Par exemple :

Bootstrap Validator contient plein d'autres fonctionnalités comme les expressions régulières. Vous pouvez les parcourir sur Github.

Ajouter une animation

Notre validation côté client fonctionne bien ; les champs vide sont bien mis en avant. Toutefois, il serait intéressant d'ajouter des animations au formulaires et d'autres messages pour informer l'utilisateur de ce qu'il se passe. Actuellement nous avons le message "Message Submitted!" (Message transmis). qui apparaît en cas de succès mais qu'en est-il pour une erreur ?

Afin de faire de la réutilisation de code et rendre nos scripts réutilisables nous allons modifier le message de succès pour afficher aussi les messages d'erreur.

Tout d'abord, supprimons le message "Message Submitted!" (Message transmis). du code HTML et gardons une div vide :

Nous allons maintenant créer une nouvelle fonction pour gérer l'état du message. Ajoutez cette fonction en bas de scripts.js

Cette fonction prend deux arguments. valid est une variable booléenne : si elle est vrai ce sera un message de succès ; sinon ce sera un message d'erreur. msg sera le message à afficher dans la div.

Premièrement la fonction regarde si c'est une message de succès ou d'erreur en vérifiant la valeur de valid. Dans tous les cas elle définie les bonnes classes CSS (nous devons remettre les classes h3 et text-center car nous les supprimons plus loin) :

Note : nous utilisons des classes animate.css pour le message de succès. L'animation tada se lancera en cas de succès.

Enfin la fonction supprime toutes les classes de #msgSubmit (pour empêcher les conflits), puis ajoute les classes définies plus haut et ajoute le texte du message dans la div.

Dans l'initialisation du validateur que nous avons modifié au début de cette section nous pouvons ajouter l'appel à cette fonction dans le if s'il est vrai.

Envoyer le formulaire avec des champs vide devrait afficher le message d'erreur "Did you fill in the form properly?" (Avez-vous bien rempli le formulaire).

La dernière étape pour la fonction submitMSG est de l'appeler lorsque le formulaire est valide. Modifiez la fonction formSuccess() avec le code suivant :

Premièrement nous réinitialisons le formulaire et vidons les champs en cas de succès, puis nous appelons notre fonction submitMSG comme précédemment avec un message de succès. L'envoi valide du formulaire doit maintenant afficher un message de succès avec l'animation tada de animate.css.

Secouons tout ça

Pourquoi ne pas ajouter une animation?  Ajoutons en une au formulaire lors d'une erreur, une animation classique de secouage devrait suffire.

Créez une nouvelle fonction après formSuccess() et appelez la formError()

Cette fonction utilise une technique provenant de la page de démonstration de animate.css qui permet d'ajouter une animation à un élément de la relancer en boucle. Les animations CSS ont tendances à ne pas ce rejouer lorsqu'elles ont déjà été jouées, même si on supprime et ajoute les classes. Cette fonction supprimer les classes lorsque l'animation a terminé, ce qui nous permet de les ré-ajouter ensuite. Lorsque l'utilisateur clique sur le bouton submit avec un formulaire incomplet nous voulons que l'animation shake soit jouée. Et s'ils l'envoient à nouveau et qu'il est encore invalide l'animation sera rejouée.

Nous pouvons appeler la fonction formError() avant la fonction submitMSG() que nous avons créé pour les messages d'erreur. Par exemple :

Maintenant lorsque nous envoyons un formulaire vide il se secouera pour signifier à l'utilisateur que quelque chose s'est mal passé.

Validation supplémentaire

Toute cette validation côté client est correcte, cependant n'importe quel utilisateur peut désactiver cette fonctionnalité et envoyer le formulaire avec des champs vide en modifiant le code dans leur navigateur. Il est toujours important de faire une validation côté serveur pour détecter tout ce qui pourrait déraper.

En ouvrant le fichier process.php nous devons faire quelques changements si les champs sont vides ; s'ils ne le sont pas nous devons envoyer un message à l'interface. Nous allons créer une variable $errorMSG pour stocker notre message d'erreur et ajouter une validation sur $_POST.

Ce code PHP vérifie si les champs sont vide avant de les stocker dans la variable correspondante (remplace le code de définition des variables à partir de $_POST). S'ils sont vides nous ajoutons un message d'erreur qui sera transmis au client. En PHP et JavaScript nous pouvons aussi vérifier autre chose que le fait que le champ soit vide ou non (s'il est trop court/long, le valider avec une expression régulière, etc.). Toutefois, par souci de simplicité, nous nous restreindrons aux champs vides.

Nous devons envoyer les messages d'erreurs à l'appel AJAX qui les affichera dans le navigateur. Nous allons modifier le if que nous avons créé à la fin du fichier PHP.

Dans notre if nous vérifions si $errorMSG est vide ("") ainsi que le statut de la fonction mail via la variable $success. Dans la condition else nous avons ajouté d'autres vérifications. Elles contrôlent juste si l'erreur provient d'un échec de $success, si c'est le cas il renvoi "Something went wrong :(" (Quelque chose s'est mal passé). Sinon on affiche le message retourné par l'état de contrôle des champs.

La dernière étape est de traiter ce message en AJAX et de l'afficher dans le formulaire. Nous devons mettre à jour l'objet AJAX dans le fichier scripts.js :

Nous avons simplement modifié la condition else pour vérifier si text == success. Dans notre else on appelle la fonction formError() qui applique l'animation de secouage et nous demandons à la fonction submitMSG() d'afficher le texte renvoyé par le PHP. Le texte retournée sera soit "Something went wrong :(" (Quelque chose s'est mal passé) ou la liste des champs vides.

Conclusion

Consulter le code complet sur Github, nous avons terminé!

Notre formulaire doit maintenant annoncer à l'utilisateur quels champs sont vide grâce à une validation robuste. Nous proposons des messages contextuel basé sur le retour du script PHP et avons implémenté une couche de validation côté serveur pour  contrecarré ceux qui contournent la validation côté client.

Vous avez maintenant un formulaire de contact prêt à être personnalisé et intégré dans votre site. J'espère que ce tutoriel vous a plu, n'hésitez pas à poser vos questions ou idées dans les commentaires ci-dessous!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.