Lorsque vous créez votre site WordPress, vous vous heurtez très vite à l’ajout de fonctionnalités le plus souvent simples comme le fait de générer un formulaire de contact ou la nécessité de créer des conditions logiques. Nous avons vu qu’en la matière, le vrai roi des constructeurs de formulaires est bien Gravity Form. Mais cela peut représenter un coût que vous jugez inutile pour votre projet. En vous tournant vers les solutions gratuites, vous allez immanquablement tomber sur Contact Form 7. Voici donc un tutoriel complet pour exploiter au maximum certains points avec le plugin qui représente plus d’1 million d’installations actives, rien que ça.
- Fonctions de base
- Zones de manipulations du formulaire
- Les balises de base
- La balise texte
- Créer un menu déroulant
- Créer des cases à cocher
- Confirmation avec Opt-in actif
- Créer un formulaire quiz
- Téléchargement de fichiers
- Créer un curseur ou un compteur
- Installer un Captcha
- Les E-mails reçus
- Les messages des internautes
- Les réglages additionnels
- Conservation des messages avec Flamingo
Les fonctions de base de l’extension Contact form 7
Une fois le plugin installé, un onglet apparaît sur la droite intitulé « Contact ». Cliquez dessus afin de voir un message qui vous permettra d’aller plus loin dans les configurations. Ce message s’adresse en français si vous avez une version française de WordPress :
Le spam est effectivement un sport pour certains, on le voit dans le cadre des spamco (commentaires spams) mais également lorsque vous mettez en place un formulaire. Akismet représente une solution, également le petit supplément reCAPTCHA bien que ce soit particulièrement sujet à controverse pour l’expérience utilisateur. La liste noire des commentaires, quant à elle, peut se gérer à partir de l’onglet discussion. Voir notre tutoriel de gestion des commentaires.
Si Contact Form 7 permet de récupérer des notifications, parfois votre serveur pose des problèmes pour la dérivabilité. Comme Contact Form 7 ne garde aucun message, contrairement à Gravity Form, vous êtes invité à exploiter Flamingo. Nous y revenons par la suite.
Pour commencer, voyez le Formulaire de Contact 1 créé par défaut. Un code court, ou Shortcode avec une id et un title vous sont proposés d’office. Simple, comme nous le voyons après, il est en soi exploitable tout de suite. Cliquons dessus pour voir le fonctionnement.
6 première zones sont à voir :
- Vous pouvez créer un nouveau formulaire ou modifier celui en cours (1),
- Le titre (2) que vous pouvez changer à tout moment et qui n’a pas de conséquence particulière sauf de vous aider à identifier vos formulaires,
- 1 zone juste en dessous (2) qui vous permet simplement de copier le shortcode en court à placer ensuite où vous souhaitez sur votre site,
- 4 onglets que nous voyons en détail (4)
- La zone de modification et de création des labels pour customiser le formulaire (5)
- La possibilité de dupliquer un formulaire existant (6),
- Deux boutons de sauvegarde (7)
Passons à présent au fonctionnement des différentes balises.
Les zones de manipulation du formulaire avec les shortcodes (5)
En cliquant sur les boutons au-dessus de la zone 5, vous pouvez créer des balises différentes pré-programmées. Par défaut, le premier formulaire comprend un champs nom [text* your-name], un champ E-mail [email* your-email], une zone de sujet du message [text your-subject], une zone libre de message textuel [textarea your-message] et un bouton Envoyer [submit « Envoyer]. Changez le nom de submit par autre chose et autre chose s’affichera. Ici dans l’exemple « Envoyer un message » :
Insérez simplement le shortcode présent sur une page, un article ou une zone Widget, vous aurez un rendu similaire reprenant les CSS de votre thème. Mais allons plus loin dans la configuration et l’usage des balises.
Les balises de base de Contact form 7
Pour commencer, prenons un exemple simple avec la balise texte qui propose un simple champ pour l’utilisateur.
La Balise Texte
La balise texte est certainement la plus utilisée. En cliquant sur le bouton, une fenêtre de dialogue s’ouvre :
Un shortcode est automatiquement généré (ici, [text text-47]). En cliquant sur le bouton radio Champs obligatoire, vous contraignez l’internaute à remplir le champ au risque d’avoir un message d’avertissement. Nous vous invitons ici à tester le Champs « Nom » : Remplacez donc le text-xxx par « Nom ».
Si vous mettez une valeur par défaut, vous pouvez utiliser le texte pour donner un texte indicatif au champ. Pour l’exemple, nous avons choisi « Votre nom ».
Si vous avez Askimet, vous pouvez donc forcer l’utilisateur a être reconnu par son nom. L’attribut « id » peut être changé optionnellement, et vous pouvez ajouter une classe CSS si vous voulez modifier la couleur ou le format de votre champ. Insérez la balise et testez-la, vous devriez avoir quelque chose comme ceci :
Puisque nous avons rendu obligatoire le champ, si vous cliquez sur « Envoyer », vous aurez ce message :
Astuces : Pensez à l’UX Design, précisez pour les versions mobiles un petit paragraphe explicatif avant le champ. Sur certains champs particuliers (autres que le fait de mettre son nom), on peut oublier de quoi il s’agissait.
Voici donc ce que vous pourriez faire en reprenant l’exemple précédent :
Les autres balises de base
Si l’on excepte la création de texte, d’e-mail, d’URL, de téléphone, de zone de texte (champ pour écrire plus large), les autres balises de base vous proposent des particularités intéressantes :
Créer un menu déroulant
Elle vous permet de proposer plusieurs choix. Cocher des options est possible : Sélections multiples et insertion de champ vide par exemple :
En exploitant un système similaire, vous pouvez proposer des cases à cocher.
Créer des cases à cocher dans le formulaire
On peut créer plusieurs choses (exclusivité, choix multiples). Pour rendre exclusif le choix, procédez de cette manière :
es boutons radios fonctionnent de manière similaire. Vous pouvez également utiliser le bouton confirmation pour des conditions générales de prestation/vente par exemple :
Le bouton de confirmation opt-in actif
Par défaut, il est possible de faire un bouton de confirmation comme on le souhaite. Rappelons qu’il existe plusieurs cas :
- L’opt-in dit actif : l’utilisateur de votre formulaire coche lui-même la case pour signifier qu’il souhaite s’inscrire,
- L’opt-in dit passif : la case est déjà pré-cochée pour l’utilisateur,
- L’opt-out dit actif : l’utilisateur doit cocher une case s’il ne souhaite pas s’abonner,
- L’opt-out dit passif : il est abonné automatiquement et doit faire une démarche de désabonnement s’il ne souhaite plus recevoir d’informations.
Il s’agira donc de bien préciser les raisons qui motivent le bouton de confirmation et d’opter de manière réglementaire en France pour l’opt-in actif :
Voyons un autre point sur les balises proposées de base, assez simple également dans l’usage : le quiz.
Créer un quiz en formulaire
Alors l’idée du quiz est utilisable dans bien des cas. Pour réellement faire un quiz du genre test mais pourquoi pas également pour éviter d’avoir des problèmes avec les spammeurs vus plus haut. Par exemple : 2+2 = ?
Une autre fonction qui permet l’échange de données : le téléchargement (upload) de fichiers.
Téléchargement de fichiers via le formulaire
Si vous souhaitez que les utilisateurs proposent des fichiers, vous pouvez le faire, les fichiers sont ainsi uploadés sur votre serveur. Voici le chemin : wp-content/uploads/wpcf7_uploads
Il est possible de choisir les types de fichiers que vous souhaitez voir arriver comme dans l’exemple suivant :
Ici, en précisant les formats acceptés, la taille du fichier, vous excluez les autres formats que pdf gif et png et les tailles trop volumineuses.
Créer un curseur ou un compteur avec le bouton nombre
Vous pouvez préciser dans votre formulaire une variation de nombre sous forme de liste ou sous forme de curseur :
Si vous souhaitez placer un Captcha, vous devrez faire quelques manipulations supplémentaires.
Installer un Captcha
Pour installer le Captcha, vous avez plusieurs solutions. Celle intitulée ReCaptacha est très envisageable puisque standard comme solution , celle appelée Really Simple CAPTCHA nécessite l’installation d’un nouveau plugin ; A noter que le simple fait d’installer ce dernier vous permet d’exploiter le bouton CaptCHa.
En utilisant ReCaptcha, vous avez besoin d’aller dans la section nommée intégration » muni de vos clés (clé du site et clé secrète) :
Vous pouvez également faire des tests pour développer d’autres types de balise. Rendez-vous sur le forum de Contact Form 7
Les E-mails reçus provenant du formulaire
Lorsqu’un internaute remplit et soumet un formulaire, il convient d’avoir toutes les infos du formulaire rempli :
Les champs que vous avez ajouté précédemment, vous pouvez les placer où bon vous semble sur le corps du mail.
Les messages à envoyer aux internautes
Personnalisez les réponses aux internautes qui vous écrivent.C’est aussi un bon moyen de personnaliser les réponses lorsque le formulaire est mal rempli:
Dernier point à aborder, les réglages additionnels.
Réglages additionnels
Pour créer des paramètres plus personnalisés, Contact Form 7 vous propose d’insérer des extraits de codes personnalisés :
Cela peut vous permettre de faire des tests du formulaire. Voir ici les possibilités.
Installer Flamingo pour conserver les messages
Flamingo est une extension supplémentaire vous permettant de garder les messages et le carnet d’adresse des personnes dans votre back-office WordPress. Un onglet supplémentaire apparaît après l’installation appelé Flamingo :
L’outil est par ailleurs très pratique puisqu’il vous permet de faire des Exports au format .CSV (Excel).
Et vous, plutôt Contact Form 7 ou Gravity Forms ? Ou autre ?
