Un formulaire de contact sous forme de popup.

Je voulais pouvoir afficher mes formulaires de contact sous forme de popup par un simple clic sur un bouton, un lien ou une image.
Je voulais aussi que le résultat soit esthétique et pratique, facile et souple à mettre en place, gratuit si possible.

Depuis l’écriture de cet article, j’ai changé de plugin de popup pour « Popup maker » qui dans la version gratuite m’apporte les fonctions voulues, même si elles sont un peu cachées.
Il faut un peu fouiller dans différents onglets et comprendre la logique.

Pourquoi un popup pour un formulaire ?

Je trouve les formulaires de contact envahissants, surtout si l’on veut poser plusieurs questions précises …
Je mettais donc les questionnaires en bas de page, mais sur une page un peu longue, l’utilisateur devait scroller pour le trouver (ou je devais mettre un lien atteindre le formulaire).
Il est possible de mettre le formulaire sur une autre page, mais c’est moins rapide (temps de chargement de la page) et l’on perd le lien avec la page d’origine qu’il est facile d’obtenir avec Contact Form 7, ce qui met utile pour savoir quel page motive l’envoi du formulaire et quel type de produit mon client recherche.

Un autre intérêt, pouvoir utiliser plusieurs formulaires différents sur la même page et aussi poser plusieurs appels à l’action.

Mes recherches plugin idéal.

J’ai essayé des plugin de popup réputé et je n’avais pas trouvé comment déclencher le popup sur un clic, ces plug-ins ont de très  nombreuses options et je n’avais pas compris comment fonctionnait les liens cliquables.

J’ai fini par trouver un plug-in : Popup anything on click, qui permet de rendre un lien, un bouton ou une image cliquable, ce que je recherchais, mais j’ai trouvé que la mise en oeuvre manquait de souplesse et que les choix pour l’apparence des boutons et du popup étaient limités.

J’ai essayé aussi : Slick Popup Lite, qui permet de mettre un bouton glissant pour un popup de contact avec CF7, sur le côté gauche ou droit de la page. C’est une solution pratique pour mettre un formulaire sur toutes les pages d’un site.
La version gratuite est limitée à un bouton, ce qui est dommage. On en veut toujours plus.

En créant un bouton avec Shortcodes Ultimate je me suis aperçu que je pouvais ajouter du JavaScript sur le clic, et j’ai pensé que cela pourrait être la solution…
En cherchant un peu, je me suis aperçu que ce n’était pas tout à fait la solution, mais que je m’en approchai, il suffisait d’ajouter une « extra CSS class »  au bouton pour le rendre magique !
Et cette « extra CSS class » correspond au  popup créé à l’aide de votre plug-in de popup préféré.

En résumé, il suffit d’ajouter la class CSS correspond au popup voulu a m’importe quel lien de wordpress, même dans un menu !

Pour un simple lien texte :

<a class="Class_du_popup" href="adresse_de_la page/">Ancre du lien</a>

Pour une image :

<a class="popmake-test-contact" href="https://trucs.labelleimage.net/"><img src="https://labelleimage.net/wp-content/uploads/2018/12/AG5A2539-900x600.jpg" alt="" class="wp-image-7826"/></a>