Contact form 7 : formulaires gratuits pour WordPress

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 :

installer formulaire gratuit 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)

 

zones shortcodes contact form 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 » :

envoyer message contact form 7

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 :

boite de dialogue cf7

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 :

exemple balise texte contact form

Puisque nous avons rendu obligatoire le champ, si vous cliquez sur « Envoyer », vous aurez ce message :

notification champ obligatoireAstuces : 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 :

<p>Merci d'indiquer votre nom</p>
[text* Nom placeholder akismet:author "Votre nom"]

[submit "Envoyer"]
Exemple de shortcode accompagné d'un petit paragraphe

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 :

menu deroulant a choix multipleEn 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 :

creer des cases à cocherLes 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 :

opt in actif formulaire

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 = ?

creation formulaire quiz

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 :

telechargement de fichiersIci, 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 :

curseur formulaireSi 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) :

installer recaptcha

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 :

reception email formulaireLes 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:

messages réponse internautes

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 :

reglages additionnelsCela 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 :

garder messages dans wordpressL’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 ?

[Total : 5    Moyenne : 4.2/5]

Pas de commentaire

Laisser une réponse