Update du 02/05/2018
Je m’étais arrêté la dernière fois à cause du javascript à ajouter au code pour faire fonctionner les formulaires préremplis. Je test aujourd’hui en intégrant ce javascript directement dans l’article WP pour vérifier que ça fonctionne…
Yeah !! ça fonctionne, il suffisait d’ajouter le script en mode text de l’article wordpress (NPMM ! il faudra que je fasse un article sur wordpress également…)
Vous pouvez voir que le formulaire fonctionne finalement en regardant plus bas
Bon je suis encore coupé dans mon élan rédactionnel, je dois partir satisfaire un client important ! Je reviendrais pour tester plus en avant ce formulaire et les dernières fonctionnalités de Modal Bootstrap.
A bientôt
Yeah, un petit post pour tester les fonctionnalités de Bootstrap !
Bootstrap est une bibliothèque créée par les développeurs du célèbre réseau social à l’oiseau blanc sur fond bleu 🐱💻 pour optimiser la création de site web.
Cette bibliothèque comporte par défaut une multitude de fonctionnalités qui permettent au développeur de ne pas avoir à réinventer la roue à chaque fois qu’il créé un site internet…
Ce site s’appuie déjà sur Bootstrap pour sa mise en forme, d’ailleurs c’est la Base de mon nouveau thème dont je vous parlerais certainement dans un prochain article.
En attendant, je vais tester dans ce post les quelques fonctionnalités avancées que je n’ai pas encore testées pour créer des sites internet n’utilisant pas bootstrap jusqu’à présent, j’importai des librairies supplémentaires pour des effets qui sont désormais pré installés.
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Utilisez le module Modal de Bootstrap pour ajouter des boîtes de dialogue à votre site pour des lightboxes, des notifications utilisateurs, ou du contenu complètement personnalisé.
https://getbootstrap.com/docs/4.0/components/modal/
Super, la démo Bootstrap fonctionne bien,voyons voir maintenant des exemples plus pratiques, avec par exemple un formulaire de contact dans le Modal, et puis une position différentes que la précédente fenêtre qui était collée en haut de l’écran.
Vertically centered
Centrée verticalement ça va être bien.
Argh… Le formulaire est tout écrasé, et pire que ça, quand j’essaie de le soumettre, il se ferme avant de vérifier les champs. Il faut que je corrige tout ça pour créer des beaux sites internet 😍…
Wawww !
Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
La possibilité de passer des arguments à mes formulaires sans plugin supplémentaire ?!? Je teste ça tout de suite, on verra plus tard pour mes jolies popup 🎇 (attention dernier emoji, après c’est lourd)
Bon, j’avais pas vu, il faut ajouter du javascript pour faire fonctionner cet exemple. Et comme je ne peux pas le faire directement dans le texte de l’article, je dois remettre à plus tard ce test.
Pour revenir à nos moutons, essayons d’afficher le formulaire dans une belle Modal.
Bon c’est mieux au niveau de l’affichage mais je vais devoir passer par du javascript pour corriger le problème de fermeture intempestive (si on clic sur envoyer sans remplir les champs) + on n’est pas redirigé quand on rempli le formulaire.
Mais c’est un bon début et le formulaire fonctionne, c’est le principal…
Pour conclure avant d’aller déjeuner, Bootrstap offre de bonne fonctionnalités mais dès qu’on veut aller plus loin que la mise en forme de base, il devient nécessaire de quitter le costume de bloggeur pour enfiler celui de développeur.
A bientôt pour de nouvelles aventures 😉