Formulaire de Contact WordPress: Tuto d’installation

17 1892

Comment installer un Formulaire de contact.

Vous souhaitez que l’on puisse vous contacter depuis votre Blog WordPress ? Je vais vous guider pour installer votre formulaire de contact sur votre site.

Vous voulez un formulaire de contact qui soit personnalisable ?

Ok alors j’ai ce qu’il vous faut, lisez ceci.

Lorsque l’on créé un Blog, on peut désirer être contacté, pour une proposition de Guest Blogging, ou pour une simple question… Pour ma part, on me contacte pour mes fautes d’orthographe ^^ Oui je l’assume totalement ;-)

Alors quel formulaire choisir, et surtout comment intégrer celui ci ?

1) Le choix du plugin de contact.

Après moult tentatives, je me suis arrêté sur le plugin Custom Contact Forms.

Pourquoi ?

  • Premièrement il est gratuit, donc ça vaut le coup de se pencher dessus.
  • Deuxièmement il est personnalisable.
  • Troisièmement il est complet.

Je vous donne le lien de téléchargement en bas de l’article.

2) L intégration.

Une fois le plugin téléchargé, activez celui ci sur votre interface WordPress.

Vous verrez apparaître ceci:

Cliquez donc afin de rentrer dans un menu qui va vous faire froid dans le dos.

Alors pas de panique, je vais vous indiquer exactement comment mettre en place votre template de formulaire de contact WordPress.

Créons un formulaire de contact ensemble:

Partie gauche.

*Form Slug: Nom de votre formulaire partie admin (ex: « contact »)
* Form Title: Nom de votre formulaire côté site Web (ex: Nous contacter)
* Form Style: Laissez sur « défault » pour le moment
* Submit Button Text: Texte qui apparaîtra sur le bouton « Envoyer »
* Form Destination Email: Email recevant les contacts clients (ex: levotre@votresite.com)
* Form Email Subjet: Sujet de l’eMail que vous recevrez (pensez que si vous devez répondre, préférez un texte du genre « Contact depuis le site « nomdevotresite »
* Form Email Name: Le nom de l’expéditeur du mail (ex: Rodrigue F.)

Partie droite.

* Form success Message: message de validation complet du formulaire par le visiteur
(ex: Merci d’avoir rempli notre formulaire de contact. Nous vous répondrons très prochainement.)
* Form success Message Title: Titre du message (ex: Merci)
* Custom Success URL: URL de la Page de renvoi après validation du formulaire.
(pensez donc à créer une page où le visiteur sera redirigé)
* Who Can View This Form: Personne pouvant voir ce formulaire.

Maintenant cliquez sur:

Votre template de formulaire de contact est créé, le voici.

Maintenant nous allons créer les champs à remplir.

Cliquez sur l’onglet « Fields »:

Ici nous allons créer les champs qui seront demandés sur votre formulaire. Je ne ferai qu’un seul champs, après à vous de créer les suivants, se sera répétitif je vous rassure.

Création du Champs « Votre nom » afin de demander au client sur le formulaire ceci:

Partie Gauche:

* Field Slug: nom de votre premier champs partie admin (ex: « nom »)
* Field Label: nom de votre premier champs côté site Web (ex: « Votre nom »)
* Field Type: Type de case, vous pouvez choisir entre Texte simple sur une ligne, ou un format date, voir même des cases à cocher, comme sur le site de mon agence web
(ex: ici nous prendrons le format « Text » pour le champs « Votre nom »)
*Initial Value: Si vous voulez une valeur initiale genre « Mon prénom est  » pour que le visiteur finisse la phrase, comme ici sur mon site:

* Max Length: Nombre de caractère maxi pour le champs

Partie Droite:

* Required Field: Champs obligatoire ou non au choix
* Field Instructions: bulle qui apparaîtra pour donner des infos supplémentaires
(ex: « Indiquez dans ce champs votre nom complet »)
* Field Class: Ne pas toucher pour le moment
* Field Error: Message d’erreur si le champs est mal rempli

Cliquez sur:

Votre champs de formulaire de contact est créé, le voici.

Refaites la manip’ pour les autres champs de votre futur formulaire.

Voici mon formulaire exemple:

Comment intégrer le formulaire de contact sur mon site ?

Maintenant retournez dans l’onglet « Forms »:

Descendez tout en bas, dans manage Forms:

Une fois en bas, Cliquez sur « Add A field » pour ajouter un champs à votre template.

– Allez chercher les champs que vous avez créé, par exemple le champs appelé « nom »
– Cliquez sur « Attach »

Le champs choisi va apparaître dans la colonne « Attached Fields » de la sorte:

Cliquez sur « Save Field Configuration ».

Votre template est terminé.

Maintenant comment intégrer le formulaire sur une page de votre site, voir même en Widget puisque le plugin vous permet de laisser le formulaire de contact en Sidebar.

Intégrer un formulaire de contact dans une page WordPress.

Maintenant c’est très simple, toujours dans l’onglet « Forms », rendez vous sur le résumé de votre template, et copiez le code dans la rubrique « Form Display Code »

Rendez vous dans votre page « Contact », où celle que vous avez créé, où même sur toutes vos pages si vous le désirez, et coller ce code dans la partie HTML de l’éditeur:

Et normalement, lorsque vous enregistrez la page, et que vous vous rendez sur celle ci « côté site » vous devriez avoir un jolie formulaire comme ceci:

Pour le mettre en Widget, faites glisser le Widget Contact Form dans le Bloc de votre choix.

Maintenant si vous rencontrez un soucis avec la taille de la Zone de texte, comme j’ai pu rencontrer, voici la manip’ dans le fichier « custom-contact-forms-front.php » du plugin.

Problème avec taille de la zone de texte:

Une fois que vous avez téléchargé le plugin, et installé celui ci, il se peut que par défaut, la zone de texte d’un de vos champs soit trop grande, comme je n’ai pas réussi à la modifier en créant un nouveau style, j’ai procédé comme ceci quand j’ai vu ma Zone de texte ainsi:

Pour modifier celle ci, et retrouver une zone de texte correcte:

Rendez vous sur votre FTP, et prenez le fichier « custom-contact-forms-front.php » qui se trouve à la racine du plugin custom contact forms:

…wp-content/plugins/custom-contact-forms/custom-contact-forms-front.php

Maintenant recherchez le terme

cols=

Pour ma part, celui ci était égal à 40, je l’ai réduit à 25.

Modifier celui ci avec une valeur inférieur (ou supérieur), directement dans le fichier.

Remettez le fichier dans votre FTP, et constatez, ou ajustez en fonction du résultat.

Voilà j’espère que ce tuto vous a aidé, voici le lien de téléchargement du plugin
Celui ci s’appel Custom contact forms pour installer votre formulaire de contact.

17 Commentaires

  1. Personnellement, j’ai opté pour « Contact Form 7 » sur mon blog, et j’en suis content: installation et utilisation super simple.
    Il n’offre pas autant de possibilités que Custom Contact Form que tu présentes, mais il a le mérite de faire son boulot ;-)

    (Un exemple de formulaire est visible là : http://www.pexiweb.be/contact/)

  2. je ne sais pas si vous connaissez le formulaire de contact en plugin qui s’appelle Cforms, mais c’est une tuerie pour personnaliser ses formulaires en trois clics !
    Je dis ça, c’est que souvent le plugin qui est montré ici est assez limitant quand on veut demander plus d’infos, ou simplement des informations différentes.

  3. Merci pour ce tuto très complet. Ça a l’air un peu compliqué mais je pense qu’avec tes explications je vais y arriver. Souhaite moi bon courage ! :)

  4. je savais pas que ce formulaire avait autant d’importance, merci pour l’information et ces conseils, je vais les suivre et je verrais bien si mon blog connaîtra un flux plus important

  5. Tres bon tuto. Il ne me reste plus qu’une question : comment mettre une liste déroulante ou placer une liste de bouton à cocher???

  6. Salut Rodrigue,

    Je viens de tester ce plugin, mais sur mon site il bug.
    En effet, j’ai sélectionné 5 ou 6 champs et il n’affiche que les champs « message » et « Captcha ».
    Donc, je pense que je vais en utiliser 1 autre!
    Dommage, car tes explications sont à la fois claires et détaillées.

  7. Bonjour ,
    afin de personnaliser le formulaire, ou plutôt le mail envoyé via le formulaire , je souhaiterai que soit affiché dans le courriel l’email de l’utilisateur en tant qu’expéditeur, connais tu la solution ?

    merci beaucoup ;-)

  8. Bonsoir,
    Yes moi aussi je cherche à ce que l’email envoyé ai le mail de l’expéditeur (comme le message du dessus, si vous avez la solution)
    Merci d’avance

Réagis