Prestashop propose une page contenant un formulaire de contact afin que les visiteurs et utilisateurs de votre boutique puissent communiquer avec vous.
Cependant ce formulaire est peu personnalisable. Nous allons voir ci-dessous comment personnaliser ce formulaire. Notre exemple consistera en l’ajout d’un champ supplémentaire, mais la procédure permet permet de comprendre comment faire pour également supprimer ou modifier des champs existants.
Premièrement nous allons modifier le template du formulaire de contact afin de lui ajouter un champ.
Pour cela nous allons récupérer le template qui se situe dans votre thème (thème parent) ou bien directement dans le module « contactform » de prestashop.
Donc soit dans :
Soit dans
Et copier ce fichier dans votre theme enfant pour pouvoir le modifier proprement. C’est à dire dans :
Vous pouvez maintenant faire vos modifications dans ce fichier. Par exemple pour ajouter un champ « Téléphone » (avec bien sur le html à adapter en fonction de votre thème et de la présentation souhaité) :
La seconde étape consiste à overrider le module contactform en étendant la classe « ContactForm » que vous trouverez dans le fichier :
Pour cela nous créons le fichiers suivant :
qui contiendra le code suivant (pour commencer) :
On va à présent remplacer la ligne « //code à venir » en copiant telles quelles les 2 fonctions « getWidgetVariables » et « sendMessage » présentent dans le fichier d’origine :
On adapter les ligne de la fonction « getWidgetVariables » pour ajouter notre champs :
//ajout de notre champ
$this->contact['phone'] = html_entity_decode(Tools::getValue('phone'));
//code d'origine
$this->contact['contacts'] = $this->getTemplateVarContact();
$this->contact['message'] = html_entity_decode(Tools::getValue('message'));
//etc...
Passons à la fonction « sendMessage » ou il va falloir modifier plusieurs partie du code, mais ces parties sont assez facile à repérer.
Il s’agit des 3 suivantes :
} elseif (!Validate::isCleanHtml($message)) {
$this->context->controller->errors[] = $this->trans('Invalid message', array(), 'Shop.Notifications.Error');
} elseif (!Validate::isCleanHtml($phone)) {//contrôle de notre champ supplémentaire.
$this->context->controller->errors[] = $this->trans('Téléphone invalide', array(), 'Shop.Notifications.Error');
}//....
'{order_name}' => '-',
'{attached_file}' => '-',
'{message}' => Tools::nl2br(stripslashes($message)),
'{email}' => $from,
'{product_name}' => '',
'{phone}' => Tools::nl2br(stripslashes($phone)),//notre ajout
];
Il nous reste une dernière étape, il s’agit de modifier les templates correspondant à l’email transmis par le formulaire.
Vous pouvez retrouver ces template dans
/mails/fr/contact.txt
en adaptant la partie /fr/ selon votre language.
Vous devez copier ces fichier dans votre thème enfant :
...
Et modifier leur contenus en ajoutant les informations concernant le nouveau champ.
Par exemple :
Normalement tout est bon !
Hello !
Super tuto, merci !
Chez moi, cela ne marchait pas alors j’ai aussi fait :
– /themes/votre-theme-enfant/mails/fr/contact.html et contact.txt : le dossier n’existait pas, je l’ai créé (j’ai aussi copié les fichiers dans /mails/fr/)
– j’ai ajouté id= »checkrgpd » (le nom de mon champ additionnel)
– j’ai carrément collé les fonctions en entier dans l’override, en ajoutant les lignes proposées
Passé cela, tout fonctionne sauf une chose : si la personne n’a pas coché la case, le mail est quand même envoyé !
Dans ce cas il faut ajouter une vérification dans la fonction « sendMessage » pour afficher une erreur (et donc ne pas envoyer le mail) si la case n’est pas coché.
Hello!
Merci pour ce tuto très cohérent.
-Je suis débutant dans l’utilisation de prestashop…
-dans le site que je suis entrain de réaliser je veux ajouter un champ « numéro de téléphone » lors de la création du compte client.
-J’ai suivi les différentes étapes décrites dans le tuto et même ce que benjamin à expliqué dans son commentaire mais toujours aucun changement dans mes différent formulaires.
-j’ai peut être mal travaillé dans une des étapes du tuto.
bien vouloir m’aider en m’indiquant où est ce quelle est la partie qui est modifié à la fin de l’application de ce tuto dans mon site….
Bonjour,
Je voudrai savoir si il est possible d’imposer le format de caractère à l’utilisateur, mettre uniquement des 10 numéros pour le téléphone ?
Merci de votre réponse
Bien cordialement, Axel Hoberdon
Bonjour,
Pour limiter les champs textes tu as pas mal de possibilités avec des options rajoutées dans le html :
Tu vas pouvoir trouver toutes les infos que tu recherches ici :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input
Merci bcp bcp
Bonjour,
Je trouve votre tutoriel très bien rédiger et je viens je pense de le réaliser avec succès. Une petite question, comment puis-je retrouver les numéros de téléphone qui du coup ne s’affiche pas par contre dans la partie « SAV » de Prestashop ?
Bonjour,
J’ai bien suivi le tuto, le mail est envoyé (résultat sur le front office OK) mais je ne le reçois jamais, ni dans la boite de réception normal ni dans les indésirables.
Ma page: https://stamp.fr/catalogue-online/nous-contacter
Bonjour j’ai exactement le meme pb que vous et j’ai beau tout retourner pas moyen de savoir !!!
Si qqn a une idée elle est la bienvenue
Vraiment top, merci !
bonjour, pouvez-vous me dire comment faire pour changer le mail de réception dans le formulaire contact svp, pour que les clients qui m’écrive sur contact je les reçois sur l’adresse modifié. j’espère que vous m’avait compris.
prestashop 1.7
merci
Bonjour
Auriez vous la même chose pour l’ajout d’un deuxième champs upload?
Vous remerciant de votre aide.
Cordialement.
La champes pas enregistré et donc invisible dans le SAV backoffice, je suggère ceci comme dépannage :
Ajouter ceci dans public function sendMessage()
………..
………..
$message = « Tel : » . trim(Tools::getValue(‘phone’)) . » ——— Message : » . trim(Tools::getValue(‘message’));
………..
………..