Comment utiliser contact form 7 : Tutos en image

Suite de mon article sur les formulaires de contact, pour mieux vous familiariser avec l’utilisation de contact form, je vais vous guider étape par étape à la création d’un formulaire.
Dans cet article, je vais vous expliquai que contact form 7 est une extension pour personnaliser. Vous pourrez faire, par exemple, votre page de contact et comme vous le verrez, il est très flexible une fois qu’on le maîtrise !

Le paramétrage de contact form

Si le module n’a pas été installé, allez dans la bibliothèque de wordpress, recherchez contact form 7, installez-le et activez-le.

contact form

Vous trouverez dans le menu administration (barre de gauche) un libellé “Contact” comme ceci :

formulaire de contact
Cliquez sur “Contact” dans la barre d’administration
reCAPTCHA contact form
reCAPTCHA

Vous pouvez configurer contact form avec akismet (plugin installé par défaut sur wordpress). Celui-ci vous permettra de vous protéger des spams. Pour cela, aller sur la page de google reCAPTCHA et remplissez le formulaire (choisir reCAPTCHA v3 : Validez les requêtes à l’aide d’un score).

Notre premier formulaire de contact

Lançons-nous ! Cliquez sur “créer un nouveau formulaire”.

Créer un formulaire
Créer un formulaire
Nouveau formulaire de contact
Nouveau formulaire de contact

Ajouter un formulaire de contact : mettez un titre à votre formulaire

Formulaire

Par défaut, il nous propose 4 champs avec 1 bouton envoyer

Pour comprendre, regardons le résultat du premier champ texte avec le bouton “Envoyer” :

Les balises d’étiquette <label> et </label> permettent d’encadrer l’intitulé du formulaire. Ainsi, dans notre exemple, il affiche “Votre nom (obligatoire)” et un champ vierge.

Ajoutons un champs prénom : j’écris mon code et clique sur l’onglet texte

Une fois le labal en place, cliquez sur le marqueur “texte”
paramétrage du champs texte
Paramètre du champ “text”

Type de champ : à cocher si le visiteur doit obligatoirement le renseigner.
Nom : laisser le tel quel par défaut.
Valeur par défaut : vous pouvez laisser un exemple de saisie pour aider le visiteur.
Cochez “Utilisez ce texte comme texte indicatif du champ.” si vous voulez placer la valeur par défaut dans le champ.
Cochez “Ce champ nécessite le nom de l’auteur.” si vous avez Askimet pour identifier l’utilisateur.
Attribut id : cette partie vous permet de récupérer l’id du champ. Sinon, si vous ne l’utilisez pas, laissez le vide.
Attribut class : cette partie vous permet de personnaliser votre champs avec du CSS, si vous ne l’utilisez pas, laissez le vide.
Cliquez sur insérer la balise pour intégrer au code ces nouveaux paramètres.

Et voici mon code, en rajoutant champ obligatoire (cela me rajoute une étoile), je mets comme valeur par défaut :”Exemple : Franck” et je coche “Utilisez ce texte comme texte indicatif du champ”. Voici le résultat :

Maintenant que l’on a ajouté tous nos champs, passons aux paramétrages de l’envoi du formulaire par l’internaute :

E-mail

Paramètre e-mail
paramétrer les E-mails

Comme contact form ne sauvegarde pas les envois de formulaire dans la base de données, il faut configurer les envois par mail :

paramétrer les e-mails

Pour : adresse mail où vous recevrez les formulaires.
De : e-mail de l’expéditeur.
Objet : idem laissez pareil.
En-têtes additionnelles : vous pouvez ajouter des destinataires en copie : “cc : [email protected]”, en copie cachée : “bcc : copiecaché[email protected]
Corps du message : configurez ici le message que vous allez recevoir. Sachant que par défaut, il propose de remettre le nom [your-mail] et l’adresse mail [your-email].
Le corps du message [your-message] : il est important de le laisser, car il contient le message de votre interlocuteur.
Exclure les lignes dont la balise d’e-mail est vide : a cocher, si vous ne souhaitez pas voir les champs qui n’ont pas été remplis par les visiteurs.
Envoyer ce message au format HTML : sauf si vous voulez recevoir les réponses au format HTML, laissez décocher.
E-mail (2) : si vous avez mis le destinataire en copie, vous pouvez rajouter un texte en plus dans le message , comme par exemple : “Voici une copie du formulaire. Je vous contacte rapidement pour vous apportez plus d’informations”

Message

Paramètre messages contact form
Paramétrer les Messages

Par défaut, contact form prévoit d’informer l’internaute de l’envoi du message si tout se passe bien ou s’il y a une erreur.
Ainsi, Je vous conseille de personnaliser un peu plus ces messages un peu austère.

Réglages additionnels

Paramétrer les réglages additionnels
Paramétrer les Réglages additionnels

Vous pouvez le laisser vide, il sert à aller plus loin dans les réglages, je ferai un article pour le détailler.

Notre formulaire dans un article

Nous avons fait le plus dur ! Alors, maintenant que tout est paramétré, intégrons-le dans un article.

Vous l’avez peut-être remarqué, mais un haut de votre paramétrage se trouve un code.

copiez le code court contact form
code court

Hé bien, il suffit de copier ce code et de le coller dans votre article ou votre page. Et c’est tout ! Vous n’avez plus qu’à le “Prévisualiser” ou “le publier” (en haut à droite) pour voir le résultat.

Dite moi en commentaire si certain champ ont été difficiles à faire ?

Si vous avez aimé l'article, vous êtes libre de le partager ! :)
  •  
    1
    Partage
  • 1
  •  
  •  
  •  
  •  

Une réflexion sur “Comment utiliser contact form 7 : Tutos en image

  • 17 août 2020 à 16 h 25 min
    Permalien

    Salut Franck,

    Merci pour cet article complet sur le plugin contact form 7.

    Je l’utilise depuis un moment et j’avoue qu’il est assez simple d’utilisation et il fait bien son boulot 🙂

    Je reviendrais sur ton article si j’ai besoin de paramétrer pour intégrer un formulaire de contact à un article ou une page par exemple.

    A bientôt,

    Damien.

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

%d blogueurs aiment cette page :