Prestashop de A à Z – Formulaire de contact amélioré (ép.26)

Le formulaire de contact d’une boutique en ligne, est une page encore trop souvent négligée pourtant c’est bien souvent cette page qui fera le lien entre vous et le client, alors tâchons de l’améliorer ensemble.

Tutoriel 26

Chaque jour je vois défiler des boutiques Prestashop et ma conclusion est sans appel… peu de marchands modifient la page de contact par défaut. C’est bien dommage, car personnellement en tant que client, ça me fait toujours un peu peur d’acheter sur une boutique où dans la page contact on a seulement 4 champs et un bouton valider.

Il ne faut pas beaucoup de choses pour rendre un peu plus dynamique la page de contact, une carte Google Map, les coordonnées de l’entreprise ainsi qu’une image de votre bureau / entrepôt suffisent à vous crédibiliser devant un acheteur indécis. Les acheteurs sur internet, veulent avoir la certitude d’avoir quelqu’un qui pourra les aider lorsqu’ils rencontreront des problèmes liés à leur achat.

L’optimisation que je vous propose à travers ce tutoriel, concerne uniquement l’affichage de la page sans ajout de champs supplémentaires. A noter aussi que cette optimisation contribue à convaincre l’acheteur sur mobile, en lui montrant en priorité les coordonnées de votre entreprise.

Ressources

Pour ce tutoriel vous avez à disposition :

  • 1 x fichier contact-form.tpl
  • 1 x fichier entreprise.jpg

Télécharger les sources

Au programme

  • Définir les objectifs de modification
    – intégrer Google Map
    – intégrer les coordonnées de l’entreprise
    – intégrer l’image de l’entreprise
  • Comprendre la règle de la grille Boostrap
  • Structurer l’intégration
    – utiliser la règle col-md-6
    – ajuster le champ message
    – ajuster la position du bouton du formulaire
    – intégrer les informations de l’entreprise
  • Equilibrer et ajuster le formulaire
  • Inverser les colonnes pour le mobile
  • Tester la validation du formulaire

BOUM !

1 seul mail par semaine - pas de publicité

3 commentaires sur “Prestashop de A à Z – Formulaire de contact amélioré (ép.26)”

  1. Salut,
    j’ai remplacé mon fichier TPL original Prestashop par ton fichier TPL tel quel dans mon serveur, depuis j’ai une erreur lors de l’envoi du message :
    « Une erreur s’est produite pendant l’envoi du message »
    Tu as des infos à ce sujet?
    Je suis sur Prestashop 1.6.1.20
    Merci de ton aide et encore bravo pour tes tutos qui sont vraiment cool!

    1. Hello,

      Il faudrait plutôt garder le TPL original et récupérer uniquement les lignes importantes du mien, car le TPL de Prestashop a dû changer et ils ont peut-être ajouté des nouveaux champs cachés dans le formulaire.

      A bientôt !

  2. HEllo
    Dans un premier temps ! je trouve super vos tutos!!

    Je voulais vous dire que je n’ai carrément pas le répertoire Boostrap que vous montrez dans la vidéo donc je ne peux pas faire ce tuto 🙁
    Ou alors la version 1.7.8.7 est complétement différente.

    A bientôt

Laisser un commentaire

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