Contact via Prestashop

Prestashop 1.7 – Formulaire de Contact (ép.15)

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)

Télécharger

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é ?

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (Soyez le premier à noter ce billet)
Loading...

16 commentaires sur “Prestashop 1.7 – Formulaire de Contact (ép.15)”

  1. 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"&gt;{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

    1. 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 !

  2. 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

    1. 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 !

  3. 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

  4. 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

    1. 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 !

  5. 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

    1. 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 !

  6. 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 !

    1. 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 !

  7. 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

Laisser un commentaire

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