Contact Form 7 est une extension WordPress gratuite pour créer des formulaires de contact sur WordPress simplement et rapidement.
Flexible et personnalisable. Elle fait partie des plugins les plus populaires du répertoire officiel. Et son utilisation couplée au Captcha est un vrai bonus contre les spams!
D’abord, assure-toi que Contact Form 7 est bien installé et activé. Tu verras, un nouvel onglet « Contact » va apparaître dans ton menu sur le côté.
Maintenant, lance-toi et crée ton premier formulaire de contact. Tu trouveras l’option « Créer un formulaire » en haut de ton écran ou dans le menu. Une fois dedans, tu auras devant toi 4 onglets : Formulaire, Email, Messages et Réglages additionnels. Un formulaire de base est déjà prêt à l’emploi.
Créer son formulaire WorPress
L'onglet formulaire
Dans l’onglet « Formulaire », tu trouveras le code HTML de ton formulaire. Il contient des balises <p> ou <label> avec des marqueurs pour les champs à remplir et le bouton d’envoi.
Par exemple, pour demander le nom, tu verras quelque chose comme <label>Votre nom (obligatoire)
[text* your-name]</label>.
Tu peux également ajouter et configurer d’autres types de champs. Pour cela, tu vas utiliser des boutons spéciaux pour insérer des marqueurs dans ton code HTML, qui représentent les différents champs que tu veux.
Quand tu es dans l’onglet « Formulaire », au-dessus de la zone où tu tapes ton code HTML, il y a une série de boutons. Chacun correspond à un type de champ que tu peux ajouter à ton formulaire. Voici quelques-uns des plus courants :
- Texte : Pour ajouter un champ texte, clique sur le bouton texte. Cela insère un marqueur du type
[text your-text]dans ton formulaire. Tu peux remplacer « your-text » par ce que tu veux, par exemple, « nom-de-l’utilisateur ». - Email : Si tu as besoin que les gens te laissent leur adresse mail, utilise le bouton email pour ajouter
[email* your-email]. Le petit astérisque signifie que le champ est obligatoire. - Date : Pour laisser tes visiteurs choisir une date, clique sur le bouton date. Ça ajoute
[date your-date]dans ton code. - Menu déroulant : Parfait pour une liste d’options.
- Bouton radio : Idéal pour des choix exclusifs.
- Case à cocher : Pour des options multiples, les cases à cocher sont top.
- Fichier : Permet à tes visiteurs de t’envoyer des fichiers.
- ReCaptcha le Captcha est un test qui permet de lutter contre le spam, cette option nécessite d’installer un autre plugin « Recaptcha »
- Quiz, url, nombre, bouton envoyer..
Chaque fois que tu cliques sur un de ces boutons, un marqueur avec le code correspondant au type de champ s’insère dans ton formulaire. Tu peux le placer où tu veux entre les balises <label>...</label> pour organiser ton formulaire.
Par exemple, si tu veux ajouter un champ pour que les gens puissent t’envoyer leur CV, tu pourrais utiliser le bouton fichier pour ajouter [file votre-cv] et placer ça où tu veux dans ton code HTML.
C’est assez intuitif une fois que tu as pigé le système de marqueurs. Et n’oublie pas, après avoir ajouté tous tes champs, de sauvegarder ton formulaire pour garder les changements
L'onglet mail
Ici tu configureras l’envoi des messages. Tu définis ici l’adresse email destinataire, l’expéditeur, l’objet du message et tu peux même ajouter des adresses en copie ou copie cachée.
Utilise les marqueurs pour personnaliser le contenu de l’email reçu.
Tu peux aussi décider d’envoyer cet email au format HTML et d’inclure des pièces jointes.
Si tu souhaites envoyer un email automatique en réponse, c’est également possible avec l’option Email (2). Tu peux ainsi ajouter un message personnalisé pour remercier la personne de son contact.
L'onglet message
L’onglet « Messages » te permet de personnaliser les messages de retour, que ce soit pour confirmer l’envoi réussi ou signaler une erreur.
Mettre le formulaire en place sur le site
Pour intégrer le formulaire que tu viens de créer avec Contact Form 7 sur ton site WordPress, c’est hyper simple. Une fois que tu as personnalisé et enregistré ton formulaire, tu obtiens un shortcode.
Ce shortcode est une petite ligne de code qui te permet de placer ton formulaire où tu le souhaites sur ton site, juste en le copiant et le collant.
Si tu souhaites voir à quoi peut ressembler un formulaire de contact sur WordPress avec Contact form, tu peux aller directement sur ma page contact.