Tutoriel
Modifier le formulaire de contact de Prestashop
Le formulaire de contact de PrestaShop est un outil indispensable pour communiquer avec vos clients. Par défaut, il ne contient qu’un champ e-mail et un message. Si vous souhaitez permettre à vos clients de laisser un numéro de téléphone, il est possible de le faire proprement à l’aide d’une surcharge du module contactform. Ce guide explique comment procéder, y compris pour les thèmes modernes comme Hummingbird.
1. Comprendre la structure du module contactform
Depuis PrestaShop 8, le module contactform fonctionne comme un widget. Il ne possède plus de contrôleur FrontOffice et le template se trouve désormais ici :
/modules/contactform/contactform.php— logique principale du module/modules/contactform/views/templates/widget/contactform.tpl— affichage du formulaire
Dans le thème Hummingbird, le module est déjà surchargé via le fichier :
/themes/hummingbird/modules/contactform/views/templates/widget/contactform.tpl
C’est ce fichier qu’il faut adapter pour y intégrer le champ “Numéro de téléphone”. Vérifiez donc toujours si ce fichier est déjà présent votre thème. A défaut, copiez-le à partir du dossier du module.
2. Pourquoi passer par une surcharge
Modifier directement le code du module n’est pas recommandé : une simple mise à jour le réinitialiserait. La bonne pratique consiste à créer une surcharge PHP qui valide le nouveau champ et à adapter le template du thème. Cette méthode assure une compatibilité totale avec les futures mises à jour de PrestaShop.
3. Créer la surcharge du module
Créez le fichier suivant :
/override/modules/contactform/contactform.php
Ajoutez le code suivant :
<?php
class ContactformOverride extends Contactform
{
public function sendMessage()
{
$phone = Tools::getValue('phone', '');
// Optionnel : on n’affiche une erreur que si le champ est rempli mais invalide
if ($phone !== '' && !preg_match('/^[0-9\+\.\-\s]{6,20}$/', $phone)) {
$this->context->controller->errors[] = $this->trans(
'Le numéro de téléphone n’est pas valide.',
[],
'Modules.Contactform.Shop'
);
}
// Si OK, on injecte le téléphone au début du message
if ($phone !== '' && empty($this->context->controller->errors)) {
$msg = (string) Tools::getValue('message', '');
$_POST['message'] = "Téléphone : {$phone}\n\n" . $msg;
}
return parent::sendMessage();
}
public function getWidgetVariables($hookName = null, array $configuration = [])
{
$vars = parent::getWidgetVariables($hookName, $configuration);
$vars['contact'] = array_merge($vars['contact'] ?? [], [
'phone' => Tools::getValue('phone', ''),
]);
return $vars;
}
}
Cette surcharge vérifie le champ “numéro de téléphone” et l’injecte dans les variables Smarty utilisées par le template.
Notez par ailleurs que cette technique permet de s'affranchir des modifications des modèles de mail car le nouveau champ est injecté dans le champ "Message".
4. Adapter le template du thème Hummingbird
Le thème Hummingbird utilise un template déjà modernisé. Il faut donc insérer le champ dans la structure Bootstrap :
- Copiez le fichier :
/themes/hummingbird/modules/contactform/views/templates/widget/contactform.tpl
dans votre thème enfant ou sauvegardez-le avant modification.
Ajoutez ensuite ce bloc juste après le champ “Email address” :
{* Champ Numéro de téléphone *}
<div class="mb-3">
<label class="form-label">{l s='Phone number' d='Shop.Forms.Labels'}</label>
<input
class="form-control"
name="phone"
type="text"
value="{$contact.phone|default:''|escape:'htmlall':'UTF-8'}"
placeholder="{l s='Enter your phone number' d='Shop.Forms.Help'}"
>
<span class="form-text">
{l s='optional' d='Shop.Forms.Help'}
</span>
</div>
Ce champ s’affichera parfaitement dans le style Hummingbird, entre l’adresse e-mail et la référence de commande.
6. Vider le cache et régénérer les surcharges
- Allez dans Paramètres avancés → Performances.
- Cliquez sur “Vider le cache”.
Rechargez ensuite la page “Contactez-nous” pour vérifier que le champ s’affiche correctement.
7. Tester le fonctionnement
Essayez d’envoyer le formulaire sans numéro de téléphone pour tester la validation. Vous devriez voir s’afficher le message d’erreur prévu. Le champ est maintenant pris en compte dans la logique du formulaire et dans les variables Smarty.
8. Bonnes pratiques
- Travaillez toujours sur un environnement de préproduction.
- Ne surchargez que les fonctions nécessaires.
- Sauvegardez vos fichiers avant mise à jour.
- Testez sur mobile pour vérifier l’ergonomie du champ.
Conclusion
Grâce à cette méthode, vous pouvez ajouter un champ “Numéro de téléphone” au formulaire de contact PrestaShop même sur les thèmes modernes comme Hummingbird. L’ajout via une surcharge garantit la compatibilité avec les futures mises à jour tout en conservant un code propre, maintenable et visuellement intégré au thème.
🚀 Vous voulez aller plus loin techniquement ? Nos formations avancées PrestaShop vous donnent les clés pour développer des boutiques performantes.
Nous travaillons avec 772424 — la référence française de l’hébergement e-commerce spécialisé, avec déjà +1200 boutiques PrestaShop accompagnées.
Bloqué à cette étape ? Faites appel à un expert certifié PrestaShop et avancez sereinement.
