Nous allons créer un formulaire de contact simple mais qui fait parfaitement son travail avec Contact Form 7.
Cela ne prends que quelques minutes.
Contact Form 7 une valeur sûre avec plus de 5 millions de sites qui utilisent cette extension.
Le résultat obtenu sur pour pas un rond
Débutant
Créer ton formulaire avec Contact Form 7
- Installer et activer l’extension Contact Form 7
Contact > créer un formulaire
- Inscrire le titre de travail qui apparaîtra dans la liste des formulaires
Le formulaire par défaut :
- Votre nom (obligatoire)
- Votre e-mail (obligatoire)
- Sujet
- Votre message
- Bouton Envoyer
Si ce formulaire te convient, tu passes directement au paragraphe suivant : onglet e-mail.
Ajouter un autre champ pour personnaliser ton formulaire de contact
Je vais prendre l’exemple de l’ajout d’un champ téléphone.
- Se placer à l’endroit où tu souhaites ajouter le nouveau champ
- Passer à la ligne
- Cliquer sur le bouton téléphone
- Cocher Champ obligatoire (si besoin)
- Bouton insérer la balise
- Copier avant le code “<label> Téléphone (obligatoire) “
- Copier après ” </label>”
Cela donne :
<label> Votre téléphone (obligatoire) [tel* tel-XXX] </label>
- Passer à la ligne
La case à cocher RGPD
La RGPD stipule que le consentement doit être clairement exprimé.
Nous allons ajouter une case à cocher juste au dessus du bouton.
- Cliquer sur Case à cocher
- Cocher Champ obligatoire
- Intégrer un texte sur pourquoi tu collectes des donnée. Par exemple : J’accepte que mon adresse soit stockée pour apporter une réponse.
- Bouton Insérer la balise
- Vérifier qu’il y ai un espace avant et après ce nouveau texte qui est placé juste au dessus du code du bouton
- Bouton sauvegarder
Onglet e-mail
Compléter les champs suivants :
- Pour : ton adresse e-mail qui réceptionnera les messages
- Sujet : L’objet de ton message, par exemple : Demande de renseignements du formulaire de contact
- Bouton sauvegarder
- Copier le code qui est apparu en haut
Intégration dans la page
- Aller dans la page où tu souhaites ajouter le formulaire
- Coller le code directement dans le texte à l’emplacement voulu
- Enregistrer la modification
Conclusion
Te voilà doté d’un formulaire de contact opérationnel. Tu peux l’intégrer dans ta page de contact mais également en pied de page ou dans la barre latérale.
Pour aller plus loin :
Alex de Wpmarmite donne 5 conseils pour personnaliser son formulaire dans ce tutoriel très complet.
WebGeek présente 10 services de création de formulaire de contact.
Les articles susceptibles de t’intéresser :
- Crée les images de ton site
- Personnalise le thème Twenty Seventeen
- Assure la sécurité de ton site
- Le contenu de ta page d’accueil
Retrouve tous les articles pour Créer seul ton site
Jean
Fondateur, auteur et homme à tout faire
J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.
