Le formulaire de contact ça vous semble une page sans importance ? Détrompez-vous, il faut absolument la soigner pour inspirer confiance… sous Prestashop 1.7 ça évolue dans le bon sens.
Episode 15
Le formulaire de contact c’est toujours un emplacement « austère »… combien de fois j’ai vu cette page dans Prestashop avec seulement quelques champs… et un pauvre bouton valider (sans aucune information complémentaire).
Il faut dire aussi qu’il y a toujours cette envie de rester caché quand on est marchand, afin de ne pas être dérangé par le client… Hey ! Nous sommes en 2017, les clients veulent pouvoir vous contacter facilement, les acheteurs veulent un terrain de confiance… avec un numéro de téléphone… une adresse, de la transparence !
Le système de FAQ est aussi sous-exploité, répondez d’avance aux questions régulières de vos clients en mettant en place une page pour les questions les plus fréquentes. Avec cette approche, vous allez leur faire gagner du temps et vous aussi.
Essayez aussi dans la mesure du possible d’humaniser avec une photo la page de contact, un gros plus serait de pouvoir mettre la photo des personnes qui vont vous répondre… C’est très primaire comme comportement, mais on est toujours plus « tolérant » quand on sait qui va nous répondre et qu’on sait d’avance que quelqu’un est là pour nous.
Vous l’avez compris, si vous êtes encore à l’ère des formulaires « ultra-basiques », de l’époque des années 2000 faites un petit effort.
Ressources
Pour ce tutoriel vous avez à disposition :
- Fichier contact.psd (pour votre bannière)
- contactform.tpl (pour la partie droite du formulaire)
- ps_contactinfo-rich.tpl (pour la partie gauche du formulaire)
- theme.css.txt (extrait de règles CSS)
Au programme
- Améliorer la page de contact Prestashop de manière générale.
- Ajuster la taille des champs et obtenir un alignement parfait.
- Masquer l’option sujet dans la liste des champs.
- Ajuster les coordonnées de contact de la boutique.
- Inclure l’emplacement Google Map.
- Ajouter une bannière dans le haut de pages + règles CSS.
- Intégrer un lien vers une FAQ (qui pointe vers une page CMS).
- Enlever le fond gris pour plus de clarté ?
Bonjour Germain
merci pour cet excellent tuto.
Je coince cependant avec ce bout de code :
<strong>{l s='Consultez notre FAQ'}</strong> : <a>getCMSLink(17)}" target="_blank">{l s='Vous allez peut-être trouver la réponse à votre question.'}</a>« consultez notre FAQ » s’affiche bien, mais pas le lien cliquable
ma page cms est bien active (id 17), je ne vois pas ce qui cloche
Merci
Cordialement
Fabien
Bonjour,
Pouvez-vous vérifier si vous avez bien copier/coller le code ci-dessous :
<div class="alert alert-info"> <strong>{l s='Consultez notre FAQ'}</strong> : <a href="{$link->getCMSLink(6)}" target="_blank"><u>{l s='Vous allez peut-être trouver la réponse à votre question.'}</u></a> </div>Essayez aussi de déplacer le code dans la page TPL à plusieurs emplacements différents pour tester.
A bientôt !
Merci Germain
J’ai bien vérifié le code, c’est le même, je l’ai déplacé à plusieurs endroits, rien n’y change. Seul le bloc « Consultez notre FAQ » apparait, mais pas le lien
Mais pas grave, je trouverai bien un autre moyen
merci quand même
Cordialement
Hello,
Difficile de répondre précisément sur le cas, tu peux toujours te faire aider par un développeur (voir forum Prestashop) ou un freelance qui pourra juste te corriger le code.
A bientôt !
Hello
J’ai trouvé une solution simple
Merci
Bonjour,
J’ai rajouté le display:none comme vous le montrez dans votre vidéo, mais cela ne fonctionne pas, même après avoir vidé le cache de prestashop et celui de mon navigateur.
Pouvez-vous m’aider ?
merci
Bonjour,
Vous pouvez essayer de forcer la règle en faisant :
Bonjour,
Auriez-vous une solution pour laisser le lien « Contactez-nous » en haut à gauche sur la page d’accueil.
Quand nous rentrons notre numéro de téléphone dans la page « Contact-nous » le lien est automatiquement remplacé par « Appelez-nous »
Mon explication est un peu brouillons, c’est à la 13 minutes de la vidéo si ça peut aider.
Merci.
J’espère que je suis clair
Bonjour,
Il faudrait que je creuse un peu la question… mais peut-être à voir dans ce sens.
Dans le fichier suivant « \themes\classic\modules\ps_contactinfo\nav.tpl », il faudrait mettre le code ci-dessous :
<div id="_desktop_contact_link"> <div id="contact-link"> {if $contact_infos.phone} {* [1][/1] is for a HTML tag. *} {l s='Call us: [1]%phone%[/1]' sprintf=[ '[1]' => '<span>', '[/1]' => '</span>', '%phone%' => $contact_infos.phone ] d='Shop.Theme' } {else} {*<a href="{$urls.pages.contact}">{l s='Contact us' d='Shop.Theme'}</a>*} {/if} | <a href="{$urls.pages.contact}">{l s='Contact us' d='Shop.Theme'}</a> </div> </div>Avec cela le lien devrait s’afficher.
A bientôt !
Bonjour,
Ce tuto est très intéressant. J’essaye de supprimer dans la partie gauche du formulaire l’affichage du pays…
J’ai tenté pas mal de choses, et notamment sur le fichier ps-contactinfo-rich.tpl.. mais ça ne fonctionne pas ..
Auriez-vous une idée ?
Merci
Hello,
Peut-être que le plus simple c’est de mettre une adresse manuellement en retirant le code « {$contact_infos.address.formatted} », car on dirait que l’adresse est déjà compilée avant d’être passée au template.
A bientôt !
Merci pour vos tous vos tutos qui me sont fort utiles.
Je suis sous Prestashop 1.7.2.4 et mon adresse mail passe sur 2 lignes. Auriez-vous une solution pour résoudre ce problème ?
Merci !
Hello,
Peut-être en mettant une règle CSS sur l’e-mail en changeant la taille « font-size » (plus petit)… à creuser dans cette direction.
A bientôt !
Bonjour et merci ce tuto qui est très intéressant,
Mise en application sans problème au top…
Petite question qui n’a plus vraiment rien à voir avec votre tuto
Et si vous me le permettez 🙂
j’aimerais rajouter dans champs supplémentaires
j’ai suivi les tutoriels pour la version 1.6 et réussi a faire tout les champs, j’ai seulement la partie où il faut modifier le fichier ContactController.php mais qui n’est pas du tout le même sur la version 1.7
Auriez-vous une idée à ce sujet
Merci d’avance pour votre aide et encore bravos pour votre site
Bonjour,
Pour ce genre de cas, je pense que sincèrement c’est bien plus avantageux d’acheter un module qui propose la création de formulaires, ça évitera de perdre des journées à faire quelque chose de complet : https://addons.prestashop.com/fr/formulaires-contact-sondages/16685-puissant-generateur-de-formulaire.html
Pour ajouter des champs spécifiques c’est une autre approche qui demande un certain temps.
A bientôt !
j’ai suivit vos conseils merci à vous
bonne continuations
cordialement cyril
Hello, Petite question mais qui pourrait intéressé du monde …
Comment protégé, avec par exemple un captcha, l’envoie de mail non sollicité??
Il y a t’il un tuto la dessus ?
Merci 🙂
Bonjour,
Pour ce point à voir peut-être de ce côté : https://www.h-hennes.fr/blog/2017/07/11/module-catpcha-pour-prestashop-1-7/
A bientôt !
Bonsoir
j’ai appliqué le tuto, tout est super bien.
Sauf que la traduction STORE INFORMATION, call us, ne se fait pas, alors que pour le reste des traductions c’est ok.
En tous cas un grand merci, j’adore ce que vous faites, votre manière d’aborder les problèmes et de les résoudre.
Bonjour,
Parfois il faut vider le cache de Prestashop, sous performances (en back-office) pour que ça recharge les traductions… mais j’ai pas fait le test pour cette chaîne de caractères.
A bientôt !
Bonjour,
Webbax, vous recommandez quand même le module « Powerful Form Generator » sous prestashop 1.7 ?
Merci.
Bonjour,
Oui je l’ai utilisé sur mon propre shop, pour me faire des formulaires personnalisés, il m’a bien rendu service.
A bientôt !
Bonjour webbax!
Avant toute chose je tiens à vous remercier pour vos tutos qui nous aide énormément.
Je ne pense pas publier au bon endroit mais la partie qui m’intéresse est dessus. Il y a dans le formulaire de contact dans les champs « votre@email.com » « comment pouvous-nous vous aidez ».
Je souhaiterais dans le formulaire « Créez votre compte » dans le champs mot de passe ajouté « 5 caractères min », car si le client en met moins cela indique « veuillez modifiez la valeur pour correspondre au format demandé » mais vu que rien n’est indiqué le client ne sait pas ce qu’il se passe.
avez vous une idée de quel fichier modifier car impossible de le trouver..?
Merci!!
Après quelques recherches (beaucoup) j’ai enfin trouvé!!!
Cela m’a permis aussi d’apprendre à retrouver la ligne concerné dans le fichier correspondant.
pour ceux que ça intéresse il faut aller dans ce fichier
PrestaShop / themes / classic / templates / _partials / form-field.tpl
et rajouter placeholder= »5 caractères min. » dans ce bloc
{block name=’form_field_item_password’}
{l s=’Show’ d=’Shop.Theme.Actions’}
{/block}
Merci et bon code!
Bonjour,
Difficile de répondre à cette question, éventuellement ajouter un message d’erreur en retour via le fichier « classes\form\CustomerForm.php » ou alors peut-être modifier la traduction du label « Mot de passe » en mettant « Mot de passe (min. 5 caractères) ».
A bientôt !
Bonjour,
Merci pour l’astuce.. c’est une seconde solution. J’avais trouver entre temps j’ai essayé de mettre le code pour le partager mais ça ne c’est pas affiché correctement..
🙂
Merci
Après avoir moi aussi cherché, il s’agit de l’utilisation de la propriété « pattern » en HTML 5. Le message d’erreur est donc généré par le navigateur et est différent en fonction du navigateur et de la langue utilisée.
Firefox en français : Veuillez modifiez la valeur pour correspondre au format demandé.
Firefox en anglais : Please match the requested format
Chrome : Veuillez respecter le format requis.
Donc ce message n’est pas stocké dans un fichier de Prestashop et ne peut pas être personnalisé puisque généré par le navigateur lui-même.
Bonjour Webbax,
j’administre le site http://www.cemagique.com en ligne depuis 3 mois déjà.
en suivant ce tutos, j’ai fait les modification via mon ftp client, mais rien ne s’est produit dans mon formulaire de contact.
veuillez m’aidez svp.
cordialement
Bonjour,
Certainement que c’est un problème d’actualisation, voir ce tutoriel : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
A bientôt !
Bonjour Germain,
Encore un tuto utile et toujours aussi pratique à mettre en oeuvre.
Maniaque aussi et 2 choses me déplaisaient encore dans la page. Comme tu invites à donner les retours d’expérience.
1 / Le aside. Aux dimensions IPAD portrait 768×1024, les pictos prennent pratiquement la moitié de la colonne et les textes deviennent incohérents. Dans ps_contactinfo-rich.tpl, en supprimant les div block (pas les contenus) et isolant le picto dans une première div puis le texte dans une seconde, ça va beaucoup mieux et en bonus, un meilleur équilibre de la page, le aside devient pratiquement de la même hauteur que le formulaire.
2 / Sur l’ensemble de la page INFORMATIONS d’un côté et à même hauteur à droite un cadre ne me choquaient un peu. J’ai donc déplacé CONTACTEZ NOUS à la même hauteur en supprimant dans contactform.tpl toute la div form-group contenant { l s=’Contact us’ d=’Shop.Theme.Global’} et plaçant { l s=’Contact us’ d=’Shop.Theme.Global’} dans le layout contact.tpl à l’intérieur du block page_header_container vide.
Ca donne https://coeur-huitres-oleron.com/nous-contacter et j’aime assez, bien que les goûts et les couleurs…
Merci encore pour l’aide que tu apportes.
Une question en dehors, on peut écrire du code dans ce formulaire, pas osé.
Hello,
Effectivement il y’a toujours à ajuster et à personnaliser si on veut vraiment pousser le concept un peu plus loin (merci pour les retours).
Au niveau du code il est possible d’en poster, je conseille de mettre le code entre les balises suivantes c’est ce qui est le plus clair ensuite à la lecture.
Souvent il y’a la nécessité d’ajouter des règles spécifiques pour chaque résolution, afin d’avoir vraiment un bon rendu sur chaque interface.
A bientôt !
Bonjour,
Bravo pour tous ces super tutos, franchement les explications sont claires, détaillées et didactiques.
J’ai remarqué qu’une question revient toujours et qui me semble meriter un tuto 😉
Dans le formulaire de contact, il est parfois, voire meme souvent utile, de rajouter le champs « télephone » et eventuellement de le rendre obligatoire.
Il existe des tutos pour les anciennes versions de prestashop mais qui ne sont pas valables pour la version 1.7, y aurait il moyen de donner quelques tuyaux ou un petit tuto?
Merci
Bonjour,
Pour ce point je n’ai pas présenté de solutions, car cela implique de créer un override spécifique et il faut faire ensuite la gestion validation des données & transmission. En principe pour des formulaires de contact personnalisés, je conseille d’utiliser un module générateur de formulaires ex. : https://addons.prestashop.com/fr/formulaires-contact-sondages/16685-puissant-generateur-de-formulaire.html
A bientôt !
Bonjour Fabien,
Merci pour vos tutoriels.
J’ai un souci avec mon formulaire de contact (Prestashop 1.7.3), que ce soit celui du thème ajouter ou du thème classic. On m’a dit de remplacer le fichier contact.tpl du thème utilisé par celui du thème classic mais j’ai le même souci.
Les test d’envoi d’e-mail depuis le back-office fonctionnent et le formulaire marche en partie (signale l’oublie d’ajout d’un e-mail, l’oubli de saisi de texte, etc.) mais n’envoie pas l’e-mail et laisse un message d’erreur : « Une erreur s’est produite pendant l’envoi du message ».
Je ne sais pas si vous pourriez m’aider, y compris contre rémunération, ou m’envoyer vers des développeurs sérieux qui ne prennent pas des sommes trop élevés ?
Merci
Christian
Rebonjour,
J’ai trouvé la solution.
Je la note ci-dessous ci certaines personnes avaient le même souci.
Si le formulaire de votre thème (template) ne fonctionne pas au niveau de l’envoi de l’e-mail avec message d’erreur dasn le frontoffice au moment de l’envoi (Prestashop 1.7) vous pouvez essayer de remplacer le fichier contactform.tpl du thème que vous utilisez par celui d’origine de Prestashop.
Root \ themes \ name_theme \ modules \ contactform \ views \ templates \ widget \ contactform.tpl
Merci
Christian
Merci pour avoir fait le retour à ce sujet !
Bonjour Christian, peux tu me dire un peu plus sur la manip étant débutant.
Merci
Bonjour,
Le TPL proposé dans le tutoriel doit être trop vieux… je conseille donc de conserver le TPL de votre version et d’ajouter uniquement les zones modifiées par le tutoriel (vous pouvez faire une comparaison de fichier avec WinMerge).
A bientôt !
Bonjour Germain,
J’aimerais modifier les div de cette page, à savoir ne plus avoir informations de la boutique à gauche (id= »left-column ») du formulaire mais en dessous.
Dans quel fichier puis-je modifier ça?
Sébastien
Bonjour,
Sincèrement j’ai pas testé, mais peut-être avec 2 règles du genre dans le CSS ça peut fonctionner :
#contact #left-column{display:none!important;} #contact #content{width:100%!important;}A bientôt !
Bonjour,
Bravo pour toutes vos vidéos qui sont une source précieuse.
Je rencontre un problème technique sur l’envoi des messages via le formulaire de contact. PRESTASHOP 1.7.4.2
lorsqu’on envoie un message depuis le formulaire il y a bien la confirmation d’envoi et les messages arrivent bien sur le back office.
Cependant ils s’arretent la et ne sont pas transférés à l’adresse mail prévue.
Pourtant la fonction mail php marche bien car le « mail test » envoyé depuis le backoffice arrive bien dans la boite mail…
Je suis assez confus… une idée?
Merci
Nicolas
Bonjour,
Cela doit être à cause de la différence de version entre les TPL, je conseille de faire ceci : https://www.webbax.ch/2017/03/20/prestashop-1-7-formulaire-de-contact-ep-15/#comment-13659
A bientôt !
Bonjour,
tout d’abord félicitation et un grand merci pour ce travail colossale que vous faites pour nous venir en aide notamment aux novices dont j’en suis un !
J’ai pas compris pourquoi mon formulaire page contact d’origine PrestaShop 1.7 avec son lien ‘Contactez-nous’ n’y est plus sur le haut de la bannière du front !
Et dans le Back-office dans apparence/pages il n’y ai pas non plus !
Je ne sais pas où il est caché !!! 🙂 ça doit être tout simple mais je ne le trouve pas !!!!
Du coup je me demandais si vous pourriez m’aider à le retrouver pour le re-mettre en place qu’il s’affiche à nouveau dans le front de mon Prestashop 1.7
et ainsi je pourrais m’appliquer à mettre en place les améliorations dont vous parlez dans ce Tutorial.
D’avance Merci 🙂
Zvyi
Alsace/France
Bonjour,
A vérifier si ce n’est pas le module de contact qui influence l’affichage de ce lien. Vous pouvez aussi installer une nouvelle version de Prestashop en parallèle pour comparer les modules installés et les vérifier les positions des modules.
A bientôt !
Un grand merci
Merci cela me fait plaisir !
Bonjour Germain,
Je n’ai jamais eu le temps de te remercier pour tes tutos qui sont très intéressant.
J’ai trouvé la solution pour le problème : « Seul le bloc « Consultez notre FAQ » apparaît, mais pas le lien »
C’est un problème d’encodage de la page car tu mets des accents dans ta phrase « Vous allez peut-être trouver la réponse à votre question. »
Les pages par défaut sont en AINSI et pour que les accents soient acceptés, il faut encoder la page en UTF-8
Hello,
Alors il faut bien vérifier, car parfois certains fichiers de tutoriels Prestashop sont auto-encodés différemment suivant le logiciel qui va l’ouvrir, mais c’est une bonne remarque (en principe Notepad++ le fait automatiquement dans le bon mode).
Merci pour le retour positif !
Moi dernièrement après une maj le module « formulaire de contact » v4.3.0 viens de disparaitre de la devanture de ma boutique.. J’y avais jamais fait gaffe c’est en voulant bidouillé mon formulaire de contact avec ce tutoriel que je viens de m’en apercevoir. Soit ça date de la maj de prestashop vers 1.7.6.7 faite il y a peu soit lors de la maj des modules fait il y a peu également ou j’ai cliqué sur mettre a jour tout les module sans regarder exactement ce qui se trouvait dans cette liste…
J’ai plus le bouton « Contactez-nous » et la page « xxxx.com/contact-us » affiche une erreur 500… Si j’aurais pas visité cet article de webbax je m’en serais aperçus dans un mois peut être :/
Salut Germain,
Merci pour ce super tuto 😉
J’aurai une question concernant la partie FAQ. Comment je peux faire pour faire traduire le texte dans plusieurs langues. En effet, mon site est en français, allemand et italien et je connais mal ce domaine
Merci d’avance
Stéph.