Créer un formulaire de contact

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

contact 7 formulaire version rgpd
picto articles débutants

Débutant

Créer ton formulaire avec Contact Form 7

contact form 7

Contact > créer un formulaire

contact form 7 menu
  • Inscrire le titre de travail qui apparaîtra dans la liste des formulaires
contact form 7 nom

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
contact form 7 formulaire 1
  • Passer à la ligne
contact form 7 formulaire 3
  • Cliquer sur le bouton téléphone
contact form 7 formulaire 4
  • Cocher Champ obligatoire (si besoin)
  • Bouton insérer la balise
contact form 7 formulaire 5
  • 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>

contact form 7 formulaire 6
  • Passer à la ligne
contact form 7 formulaire 7

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
contact 7 insérer une case à cocher RGPD
  • 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
contact 7 réglages de la case à cocher
  • 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
contact form 7 case à cocher code
  • Bouton sauvegarder
contact form 7 formulaire 8

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
contact form 7 email 1
  • Bouton sauvegarder
contact form 7 sauvegarder
  • Copier le code qui est apparu en haut
contact form 7 short code

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
contact form 7 intégration dans la page
  • 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.

Découvre comment ajouter simplement un formulaire de contact sur ton site.

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 :

Retrouve tous les articles pour Créer seul ton site

portrait jean pourpasunrond

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.

bannière de la newsletter de pour pas un rond version bleu-vert
formulaire de contact visuel pinteret
Résumé
Article
Comment créer simplement ton formulaire de contact [tuto]
Description
Un tutoriel pas à pas pour intégrer un formulaire de contact gratuit sur ton site avec l'extension Contact Form 7 comme 5 millions de sites.
Auteur
Publié par
pour pas un rond
Logo

Laisser un commentaire

Fermer le menu
id in mattis eleifend Praesent ut